В этой статье я расскажу, о том, как сделать в Фигме компонент, который будет пригоден для экспорта в код. В Фигме можно будет выбрать наш компонент и при помощи плагина сгенерировать готовый код.
UPD
Figma — это приложение, которое специализируется на предоставлении целого пакета сервисных услуг и функций для разработки интерфейсов различной сложности. Само приложение кроссплатформенное и может использоваться как десктопное приложение, так и браузерное. По своей сути представляет из себя векторный графический редактор, поддерживает большую базу плагинов. С самого начала поддерживал генерацию CSS стилей и кода для мобильных устройств. Большим плюсом является хранение макетов в облаке, и возможность работы одновременно над одним проектом целой командой дизайнеров. Для разработчиков есть удобный экспорт ресурсов (например векторных иконок) в форматы PNG/SVG/JPG, а так же экспорта страниц в PDF файл.
Плагины в Figma служат для того, чтобы облегчить задачу дизайнера и разработчика - расширяя функционал базового приложения Фигмы при помощи пользовательских расширений (плагинов).
Нарисуем лист вью с иконкой, и сгенерируем вёрстку.
Так выглядит примерная структура нашего элемента списка - слева иконка, и далее текст.
Такую структуру будет иметь наш компонент - вертикальный набор элементов, который мы придумали выше.
Так, со структурой разобрались, поняли что нам примерно нужно сделать, теперь приступаем непосредственно к дизайну. Для этого мы возьмём один элемент, и сделаем его на основе компонентов Фигмы и применим к нему Auto layout. Сначала объединим текст и иконку, добавим отступы, сделаем выравнивание по высоте в середине, и по левому краю. Получится так…
Далее нам нужно создать два элемента, расположить их друг под другом по высоте, и объединить их Auto layout. В целом всё кажется готовым, но на самом деле, если вы поменяете длину текста, то элементы не будут гибко подстраиваться друг под друга.
Завершающим штрихом станет выставление автоматического растягивания элемента по ширине самого длинного элемента. Применяем это ко всем элементам списка, чтобы они могли адаптироваться к любой длине текста. Это делается при помощи вот этого инструмента.
В результате у нас должен получиться такой вот список.
Запускаем генератор кода.
Открывается плагин с генерацией кода. где мы можем выбрать необходимую нам технологию. Я буду использовать Tailwind 2. Далее выберем нужный нам элемент дизайна, и плагин выдаст нам готовую вёрстку.
Копируем в буфер и запускаем песочницу, для того чтобы проверить сгенерированный код и подправить пару нюансов.
Так, всё работает, кроме иконок, которые нам нужно копировать как SVG и вставить в наш код. Делается это вот так…
Заменяем наши иконки в вёрстке (я вставил прям в разметку, но вы можете и так как вам удобно - по url на пример.).
Получаем результат, который идентичен нашему в Фигме.
Подробнее про Auto layout тут.
Результат тут.
Рисуем карточку товара.
Нашей целью будет сделать так, чтобы при генерации кода, наша карточка была выполнена на основе display: flex; - CSS модели, для построения гибких контейнеров.
Я нарисовал макет, как в прошлом примере, сделал дизайн, распределил блоки, и при помощи Auto layout выровнял всё так, как мне нужно. Сгенерировал код, подправил некоторые нюансы с картинками и иконками, в результате получил готовую карточку товара. Подробнее про Flexbox тут.
Моя сгенерированная разметка доступна по ссылке. Вы можете посмотреть и попробовать сами.
Надеюсь вам пригодится моя статья, и верстать станет в разы легче. Но если нет, то прошу не минусовать статью, а помочь мне ее доработать до удобоваримого вида - оставляя свои комментарии.
