Notes by tag: Дизайн
Show all
Autolayout в Figma — мощный инструмент, который автоматически выстраивает и адаптирует фреймы и компоненты в зависимости от их содержимого и настроек. Он делает дизайн более гибким, похожим на поведение Flex_ов при вёрстке, и позволяет:
🌟 автоматически выравнивать и распределять элементы внутри фрейма или компонента;
🌟адаптировать размер контейнера под содержимое (или наоборот);
🌟 настраивать отступы, выравнивание, направление (горизонтальное или вертикальное), интервалы между элементами;
Использование Autolayout заметно ускоряет работу, а в сочетании с компонентами превращает дизайн-макет в «живую» систему.
⚡️ Кстати, если собрать письмо через Autolayout, его можно легко выгрузить в готовую email-верстку с помощью плагина Pixcraft.
Переменные можно использовать в проекте для настройки стилей, компонентов или прототипов. Они упрощают работу над сложными проектами, сокращают количество ручных изменений и поддерживают консистентность дизайна.
Типы переменных:
— Цветовые. Можно создать переменные для основного цвета, цвета фона или акцентов.
— Текстовые переменные. Это могут быть строки для заголовков, лейблов кнопок или вспомогательных текстов.
— Числовые. Полезны для значений размеров, отступов или радиусов закругления.
— Булевы значения. Видимость слоёв и управление логикой.
Как применяются:
Светлый и темный режимы — через задания 2х значений переменной для разных режимов.
Мультиязычный дизайн — аналогично через несколько режимов для каждого языка.
Продвинутое прототипирование. Благодаря переменным вы можете создавать прототипы, которые производят вычисления или полагаются на условную логику.
Переменные для разных брейк-пойнтов. С помощью числовых переменных и режимов вы можете задавать отступы для экранов разных размеров.
Наглядно показали в карточках ⬆️
Пару советов по работе с переменными:
— Используйте переменные в сочетании с компонентами для максимальной гибкости.
— Создавайте коллекции переменных (collections), чтобы переключаться между разными наборами значений.
— Используйте плагин для выгрузки переменных в формате JSON или CSS.