Figma to HTML [Плагин]
Весьма амбициозный плагин, экспортирующий ваш проект в Figma в HTML5 (плюс CSS), на текущий момент все еще находится в разработке.
На 19 августа стало доступно:
- Используются шрифты Google Fonts
- Можно копировать HTML/CSS из плагина
- Скачать HTML или стили, или всё сразу в ZIP
- Можно экспортировать сколь угодно вложенные фреймы
- Также можно экспортировать вложенные группы
- Можно сохранять изображения
- Поддерживается межстрочное и межбуквенное расстояния
- Стили текста
- Векторные фигуры
- Заливка сплошным цветом (Solid)
- Тени
- Линейные градиенты
На тот же момент в разработке:
- Векторы
- Работа с компонентами
Как пользоваться
- Выбрать родительский фрейм
- Запустить плагин
- Скачать архив/файл HTML или CSS или скопировать код
Документация плагина на момент публикации не богата, так что разбираемся сами.
Figma в html — исходный фрейм
- Адаптивность не обнаружена
- Есть проблемы с русским текстом
- Ссылки и кнопки сделать невозможно (мы не нашли)
- Правила формирования стилей пока что не ясны
Где скачать
Как устанавливать плагины в Figma читайте здесь.
Несмотря на все вышеперечисленное, мы восхищаемся разработчиками, которые занимаются подобной работой. Уверены, у этого решения большое будущее. Как представители дизайнерского сообщества отчаянно бьём пятюню таким энтузиастам
Хочу выразить огромную благодарность за ваш труд, я буду вам очень благодарен если вы продолжите разработку, для меня это оказался очень полезный плагин, так как основную геометрию сайта плагин может самостоятельно выполнить, а это я хочу заметить очень удобно, если приспособиться то можно здорово сэкономить время в верстке сайта, пожалуйста не забывайте про этот плагин
Кастомный CSS — больше контроля над дизайном плагинов
Кастомные CSS стили позволяют вам менять внешний вид плагинов. Сейчас стиль большинства премиум плагинов можно редактировать, но в бесплатных плагинах зачастую нет этой функции.
Возьмём, к примеру, один из наиболее популярных плагинов Contact Form 7. Его стиль можно изменить только слегка. Но используя кастомный CSS, вы можете полностью изменить каждый аспект его отображения на экране.
К тому же, даже плагины с предусмотренной возможностью изменения внешнего вида не позволят изменить каждый элемент.
Так что, изучив немного CSS и как его безопасно добавить к вашей теме, вы выйдете на новый уровень отображения плагинов читателям.
Реальный пример: Contact Form 7
Давайте рассмотрим реальный пример. Представим, что вы хотите изменить стиль формы обратной связи Contact Form 7. Вы установите плагин и получите похожую форму:
Теперь вы хотите оживить её немножко, добавив чёрные границы в полях формы. Вы можете зайти в таблицу стилей вашей дочерней темы и добавить этот код под комментарием, который вы сделали:
.wpcf7 input,
.wpcf7 input,
.wpcf7 textarea
{
border: 1px solid #000000;
}
В редакторе ваш CSS должен выглядеть так:
После сохранения таблицы стилей и обновления вашей формы обратной связи, вы должны увидеть это:
Теперь границы полей ввода выделены черной рамкой.
Если вы используете Divi, то ваш код будет таким же, только добавляется он в другом месте:
Конечно, это просто эксперимент, поскольку вам не нужен плагин формы обратной связи в Divi. Но этот метод сработает с любым плагином!
Функция экспорта в Figma
Как делать в Figma экспорт элементов или групп? Какие виды объектов можно экспортировать в figma и как сохранить в фигме работу?
Функция экспорта в Figma позволяет не только выводить готовый дизайн в единое изображение, но и помогает нарезать макет для будущей верстки интерфейса. Данная функция находится внизу в правом нижнем углу программы.
Экспорт в JPG
Экспорт макет в формат изображения JPG является самым популярным. В настройках экспорт вы можете управлять масштабом экспорта, добавлять суффиксы к имени, он будет вписан после имени файла, а также если вы хотите экспортировать несколько версий макетов (версия для клиента, для портфолио, для behance), то просто нажмите на знак плюса и настройте нужные опции.
Экспорт в PDF
По моему мнению данный формат не очень нужен, так как на выходе вы получаете документ, который в несколько раз больше весит, чем картинка. И если у клиента нет программы для чтения данного формата – он просто не сможет открыть его.
Но у этого формата есть особенности экспорта:
- Вы можете выделять текст, который набран в макете;
- Все векторные объекты прорисовываются идеально независимо от масштаба приближения.
Казалось бы преимущества очевидны, но на практике, лично я еще ни разу не сталкивался с просьбой предоставить макет в формате PDF.
Экспорт в PSD
Очень частый вопрос: как открыть psd в Figma, или как загрузить psd в Figma? К сожалению, в Figma не предусмотрен экспорт в программу Adobe Photoshop. Так как фотошоп более сложная программа, то и интерпретатор для него будет сложно написать. Поэтому разработчики, по моему мнению, просто не хотят тратить время на разработку данного решения. Да оно и не нужно особо, так как все больше людей переходит на специализированный для веб-дизайна софт.
Экспорт в SVG
Данный метод является популярным при экспорте иконок для верстки сайта. Так как SVG — это векторный формат, то для верстальщика намного проще использовать не картинки формата PNG для разных разрешений, а одну иконку, которая будет прорисовываться на нужный размер, на разных размерах устройства. Поэтому данный метод используйте для экспорта иконок, а также мелких графических элементов.
Экспорт в HTML
Функции экспорта в html в программе Figma нет. Но есть подсказки для верстальщика в виде свойств каждого объекта. Они находятся в левой вкладке «Code». Здесь вы получите полный список CSS свойств для верстки сайта, а также параметры для разработчиков на iOS и Android.
Один из вопросов, который волнует начинающих пользователей: как сохранить проект в фигма?
Сохранение проекта в Figma происходит с помощью экспорта файла с расширением «.fig». Для этого нужно в главном меню выбрать пункт «Save as».
Этому вопросу я посвятил видео, которое вы можете посмотреть ниже.
Важно! Для того, чтобы на практике понять, какие виды экспорта существуют, и чем они отличаются — рекомендую ознакомиться с готовыми шаблонами Figma. В них вы сможете применить различные виды экспорта
Ссылки на шаблоны: ссылка 1 и ссылка 2
Узнавайте о новых шаблонах, а также других полезных материалах в группе Вконтакте
Figma — делаем дизайн компонентов, пригодный для экспорта в код
В этой статье я расскажу, о том, как сделать в Фигме компонент, который будет пригоден для экспорта в код. В Фигме можно будет выбрать наш компонент и при помощи плагина сгенерировать готовый код.
Figma — это приложение, которое специализируется на предоставлении целого пакета сервисных услуг и функций для разработки интерфейсов различной сложности. Само приложение кроссплатформенное и может использоваться как десктопное приложение, так и браузерное. По своей сути представляет из себя векторный графический редактор, поддерживает большую базу плагинов. С самого начала поддерживал генерацию CSS стилей и кода для мобильных устройств. Большим плюсом является хранение макетов в облаке, и возможность работы одновременно над одним проектом целой командой дизайнеров. Для разработчиков есть удобный экспорт ресурсов (например векторных иконок) в форматы PNG/SVG/JPG, а так же экспорта страниц в PDF файл.
Плагины в Figma служат для того, чтобы облегчить задачу дизайнера и разработчика — расширяя функционал базового приложения Фигмы при помощи пользовательских расширений (плагинов).
Нарисуем лист вью с иконкой, и сгенерируем вёрстку.
Так выглядит примерная структура нашего элемента списка — слева иконка, и далее текст.
Такую структуру будет иметь наш компонент — вертикальный набор элементов, который мы придумали выше.
Так, со структурой разобрались, поняли что нам примерно нужно сделать, теперь приступаем непосредственно к дизайну. Для этого мы возьмём один элемент, и сделаем его на основе компонентов Фигмы и применим к нему Auto layout. Сначала объединим текст и иконку, добавим отступы, сделаем выравнивание по высоте в середине, и по левому краю. Получится так…
Далее нам нужно создать два элемента, расположить их друг под другом по высоте, и объединить их Auto layout. В целом всё кажется готовым, но на самом деле, если вы поменяете длину текста, то элементы не будут гибко подстраиваться друг под друга.
Завершающим штрихом станет выставление автоматического растягивания элемента по ширине самого длинного элемента. Применяем это ко всем элементам списка, чтобы они могли адаптироваться к любой длине текста. Это делается при помощи вот этого инструмента.
В результате у нас должен получиться такой вот список.
Запускаем генератор кода.
Открывается плагин с генерацией кода. где мы можем выбрать необходимую нам технологию. Я буду использовать Tailwind 2. Далее выберем нужный нам элемент дизайна, и плагин выдаст нам готовую вёрстку.
Копируем в буфер и запускаем песочницу, для того чтобы проверить сгенерированный код и подправить пару нюансов.
Так, всё работает, кроме иконок, которые нам нужно копировать как SVG и вставить в наш код. Делается это вот так…
Заменяем наши иконки в вёрстке (я вставил прям в разметку, но вы можете и так как вам удобно — по url на пример.).
Получаем результат, который идентичен нашему в Фигме.
Подробнее про Auto layout тут.
Рисуем карточку товара.
Нашей целью будет сделать так, чтобы при генерации кода, наша карточка была выполнена на основе display: flex; — CSS модели, для построения гибких контейнеров.
Я нарисовал макет, как в прошлом примере, сделал дизайн, распределил блоки, и при помощи Auto layout выровнял всё так, как мне нужно. Сгенерировал код, подправил некоторые нюансы с картинками и иконками, в результате получил готовую карточку товара. Подробнее про Flexbox тут.
Надеюсь вам пригодится моя статья, и верстать станет в разы легче. Но если нет, то прошу не минусовать статью, а помочь мне ее доработать до удобоваримого вида — оставляя свои комментарии.
Куда добавлять CSS стили в теме Divi
Для начала рассмотрим процесс добавления кастомных стилей CSS на примере темы Divi.
Для безопасного добавления CSS стилей для ваших плагинов в Divi, зайдите во вкладку «Theme Options» в вашем меню Divi:
Потом во вкладке «General» нужно пролистать страницу до конца вниз. Там вы найдёте окошко «Custom CSS»:
Технически, всё, что вам нужно сделать, это ввести ваш кастомный код CSS и нажать «Save Changes». Но поскольку мы хотим сделать так, чтобы можно было легко перемещать и копировать стиль нашего плагина, то давайте сделаем еще один шаг.
Вы, наверное, уже добавили кастомные Divi CSS сниппеты, они помогают настроить кастомный CSS в этом окне. Для этого вы можете добавить комментарий типа «Плагин CSS стилей начинается тут». Тогда добавьте ваш CSS код под этой строчкой.
Чтобы добавить такой комментарий, нужно скопировать и вставить этот код:
/* Plugin CSS Styles Start Here */
Комментарий ни на что не повлияет, но поможет организовать разные кастомные CSS стили. Divi поможет сохранить ваши пользовательские CSS стили в безопасности во время обновлений так, что вам не нужно бояться потерять их.
Использование произвольных значений
Хотя обычно вы можете построить основную часть хорошо продуманного дизайна, используя ограниченный набор токенов дизайна, время от времени вам нужно вырваться из этих ограничений, чтобы добиться идеального пикселя.
Когда вам действительно нужно что-то вроде , чтобы получить фоновое изображение именно в нужном месте, используйте квадратную скобку Tailwind, чтобы сгенерировать класс на лету с любым произвольным значением:
Это в основном похоже на встроенные стили, с основным преимуществом, которое вы можете комбинировать с интерактивными модификаторами, такими как , и адаптивными модификаторами, такими как :
Это работает для всего в фреймворке, включая такие вещи, как цвета фона, размеры шрифтов, содержимое псевдоэлементов и многое другое:
Произвольные свойства
Если вам когда-нибудь понадобится использовать свойство CSS, для которого Tailwind не входит в стандартную утилиту, вы также можете использовать обозначение квадратных скобок для написания полностью произвольного CSS:
Это действительно похоже на встроенные стили, но опять же с тем преимуществом, что вы можете использовать модификаторы:
Это может быть полезно и для таких вещей, как переменные CSS, особенно когда их нужно изменить в разных условиях:
Обработка пробелов
Когда произвольное значение должно содержать пробел, используйте вместо него символ подчеркивания (), и Tailwind автоматически преобразует его в пробел во время сборки:
В ситуациях, когда подчеркивание является обычным явлением, но пробелы недопустимы, Tailwind сохранит подчеркивание вместо преобразования его в пробел, например, в URL-адресах:
В редком случае, когда вам действительно нужно использовать подчеркивание, но это неоднозначно, потому что пробел также действителен, избегайте подчеркивания с помощью обратной косой черты, и Tailwind не преобразует его в пробел:
Разрешение двусмысленностей
Многие утилиты в Tailwind имеют общее пространство имен, но соответствуют различным свойствам CSS. Например, и имеют общее пространство имен , но одно для , а другое для .
При использовании произвольных значений Tailwind обычно может автоматически обрабатывать эту неоднозначность в зависимости от значения, которое вы передаете:
Иногда это действительно неоднозначно, например, при использовании переменных CSS:
В этих ситуациях вы можете «намекнуть» на базовый тип Tailwind, добавив перед значением тип данных CSS:
Итоги
Добавление пользовательских CSS стилей в WordPress является довольно простым процессом. Тяжелее всего узнать, какой CSS код нужно добавить или изменить. Вы не станете экспертом в CSS за одну ночь, но есть простой трюк.
Чтобы подсмотреть, какие стили вам нужно изменить для того или иного элемента на вашем сайте, откройте Developer Tools в Chrome (нажмите F12) и наведите мышкой на интересующий вас объект. Вы сразу же увидите, какие стили использует этот элемент.
Просто помните – всегда храните кастомный CSS в отдельной области, отделённой комментарием. Так вы всегда сможете его быстро найти.
