Figma — это не только инструмент для дизайнеров, но и настоящая находка для разработчиков. Она помогает упростить процесс верстки и сделать его более эффективным.
Но иногда дизайнеры и разработчики говорят на разных языках. Чтобы избежать недопониманий, мы поделимся с вами несколькими фишками, которые помогут наладить общение и сделать сотрудничество более продуктивным.
Figma становится все ближе к реальной верстке. Autolayout (главный smart-контейнер в Figma) все больше напоминает Flexbox. В настройках Autolayout появились параметры min, max-width и height.
Это, вместе с новыми переменными (Variables), позволяет нам создавать адаптивные экраны и избавляться от мусорных псевдо-элементов (нулевых фреймов и т. д.), которые мешают при передаче макетов в разработку.
Разработчики Figma наконец-то услышали молитвы дизайнеров и добавили переменные (Variables) — механизм для работы с дизайн-токенами. Теперь мы можем использовать токены для цветов, размеров, эффектов и типографики (типографика и эффекты появятся чуть позже). А еще есть текстовые строки (Strings) для локализации интерфейса. Все это упаковывается в JSON-файлы по новому стандарту дизайн-токенов от W3C.
Что это нам дает? Мы можем покрыть переменными все экраны и легко менять коллекцию токенов, чтобы изменять компактность и состав элементов интерфейса, цветовую тему и локализацию.
Рекомендуем Specify: этот инструмент помогает нам автоматически собирать данные о дизайне из Figma и распределять их в нужном формате, в нужном проекте и в нужное время.
До недавнего времени разработчики были в Figma на вторых ролях. У них была панель Inspect, чтобы смотреть размеры, цвета и шрифты, возможность выгружать ассеты… и на этом все. Дальше — только профессионализм и добрая воля дизайнера, который должен был понятно составить спецификацию, описать поведение компонентов, продумать состояния и пометить готовые экраны.
И тут… (барабанная дробь)… появился Dev Mode! Он значительно упростил жизнь разработчикам.
Но есть одно «но»: с 31 января 2024 года Dev Mode доступен только по подписке. Если вы не работаете в крупной компании или просто не хотите платить за подписку, придется искать другие способы выгрузки кода из макета.
А ещё Figma проложила мост в одну из популярнейших IDE. Устанавливаем в VS Code плагин Figma for VS Code, и можем открывать макет прямо в IDE, писать и читать комментарии, получать подсказки по переменным и т. д.
P.S. Ссылка для перехода из Figma в VS Code спрятана в верху панели Inspect, в троеточии.
Figma — мощный инструмент, который может значительно упростить нам жизнь при интеграции дизайна в код. Главное — знать, как правильно использовать все ее возможности.
Следуя советам, которые мы дали в этом разделе, вы сможете эффективнее взаимодействовать с дизайнерами, ускорить разработку и повысить качество конечного продукта.