В этой статье я расскажу вам, как это сделать Фигме компонент, который будет пригоден для экспорта в код. В Figma вы можете выбрать наш компонент и использовать плагин генерировать готовый код. УПД 
Figma — приложение, которое специализируется на предоставлении целого пакета услуг и функций для разработки интерфейсов различной сложности.
Само приложение является кроссплатформенным и может использоваться как десктопное приложение, так и браузерное.
По своей сути это редактор векторной графики, поддерживающий большую базу плагинов.
С самого начала он поддерживал генерацию стилей CSS и кода для мобильных устройств.
Большим преимуществом является хранение макетов в облаке и возможность одновременно работать над одним проектом целой командой дизайнеров.
Для разработчиков есть удобный экспорт ресурсов (например, векторных иконок) в форматы PNG/SVG/JPG, а также экспорт страниц в PDF-файл.
Плагины в Figma служат для облегчения задачи дизайнера и разработчика — расширения функциональности базового приложения Figma с помощью пользовательских расширений (плагинов).
Нарисуем вид-лист с иконкой и сгенерируем макет.
Вот как выглядит примерная структура нашего элемента списка — слева иконка, а затем текст.
Наш компонент будет иметь такую структуру — вертикальный набор элементов, который мы придумали выше.
Итак, со структурой мы разобрались, поняли, что примерно нам нужно сделать, теперь приступаем непосредственно к проектированию.
Для этого мы возьмем один элемент, сделаем его на основе компонентов Figma и применим к нему Auto Layout. Сначала объединим текст и иконку, добавим отступы, выровняем высоту по середине и выровняем по левому краю.
Получится вот так.
Далее нам нужно создать два элемента, разместить их друг под другом по высоте и объединить с помощью Auto Layout. В целом вроде все готово, но на самом деле, если изменить длину текста, элементы не будут гибко подстраиваться друг под друга.
Последним штрихом будет настройка автоматического растяжения элемента по ширине самого длинного элемента.
Мы применяем это ко всем элементам списка, чтобы они могли адаптироваться к любой длине текста.
Это делается с помощью этого инструмента.
В результате у нас должен получиться вот такой список.
Запустите генератор кода.
Откроется плагин с генерацией кода.
где мы можем выбрать нужную нам технологию.
Я буду использовать Tailwind 2. Далее мы выберем нужный нам элемент дизайна, и плагин выдаст нам готовый макет.
Копируем его в буфер и запускаем песочницу, чтобы проверить сгенерированный код и исправить пару нюансов.
Итак, все работает, кроме иконок, которые нам нужно скопировать в формате SVG и вставить в наш код. Вот как это делается.
Заменяем наши иконки в макете (я вставил их прямо в разметку, но вы можете сделать это как угодно — используя URL например.
).
Получаем результат, идентичный нашему в Figma.
Подробнее об автоматической компоновке здесь .
Результат здесь .
Нарисуйте карточку товара.
Нашей целью будет сделать так, чтобы при генерации кода наша карта основывалась на display:flex; - CSS-модели для создания гибких контейнеров.
Нарисовал макет, как в предыдущем примере, сделал дизайн, распределил блоки и с помощью Авторазметки выровнял все так, как мне нужно.
Сгенерировал код, подправил некоторые нюансы с картинками и иконками и в результате получил готовую карточку товара.
Подробнее о флексбоксе здесь .
Моя сгенерированная разметка доступна здесь.
.
Вы можете посмотреть и попробовать сами.
Надеюсь, моя статья окажется вам полезной, и верстка станет намного проще.
А если нет, то, пожалуйста, не минусуйте статью, а помогите мне довести ее до удобоваримой формы, оставив свои комментарии.
Теги: #разработка веб-сайтов #дизайн #HTML #интерфейсы #веб-дизайн #ui #figma #ui/ux #ui/ux design #html-верстка #дизайнер #tail #tailwind #tailwindcss
-
Зима Близко: Чему Можно Научиться За Полгода
19 Oct, 24 -
Spacex Успешно Запустила Обсерваторию Dscovr
19 Oct, 24 -
Прибыль Microsoft Упала На 11%
19 Oct, 24
