Заметки по тегу: Figma

Autolayout в Figma — мощный инструмент, который автоматически выстраивает и адаптирует фреймы и компоненты в зависимости от их содержимого и настроек. Он делает дизайн более гибким, похожим на поведение Flex_ов при вёрстке, и позволяет:

🌟 автоматически выравнивать и распределять элементы внутри фрейма или компонента;
🌟адаптировать размер контейнера под содержимое (или наоборот);
🌟 настраивать отступы, выравнивание, направление (горизонтальное или вертикальное), интервалы между элементами;

Использование Autolayout заметно ускоряет работу, а в сочетании с компонентами превращает дизайн-макет в «живую» систему.

⚡️ Кстати, если собрать письмо через Autolayout, его можно легко выгрузить в готовую email-верстку с помощью плагина Pixcraft.

Практически все макеты сейчас готовят в Figma. Процесс верстки может быть осложнен, особенно если dev-режим недоступен. Мы решили эту проблему, создав бесплатный плагин, который заменит dev-режим и значительно ускорит процесс работы.

Что можно с помощью плагина Export Styles?

➖ получать CSS выбранного элемента и копировать в 1 клик;
➖ выгружать оригиналы изображений и заливок (включая GIF-анимации);
➖ копировать тексты в одно действие;
➖ автоматически превращать стили и переменные Figma в CSS-классы или переменные;
➖ показывать расстояния между двумя элементами при выделении.

Что есть ещё:

— возможность добавлять префиксы и суффиксы к названиям классов и переменных;
— выгрузка данных в JSON-формате для гибкости в разработке.

⚙️ Плагин максимально упрощает процесс переноса дизайна в код, экономит время и делает работу эффективнее.