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

Переменные можно использовать в проекте для настройки стилей, компонентов или прототипов. Они упрощают работу над сложными проектами, сокращают количество ручных изменений и поддерживают консистентность дизайна.

Типы переменных:

— Цветовые. Можно создать переменные для основного цвета, цвета фона или акцентов.
— Текстовые переменные. Это могут быть строки для заголовков, лейблов кнопок или вспомогательных текстов.
— Числовые. Полезны для значений размеров, отступов или радиусов закругления.
— Булевы значения. Видимость слоёв и управление логикой.

Как применяются:

1. Светлый и темный режимы — через задания 2х значений переменной для разных режимов.

2. Мультиязычный дизайн — аналогично через несколько режимов для каждого языка.

3. Продвинутое прототипирование. Благодаря переменным вы можете создавать прототипы, которые производят вычисления или полагаются на условную логику.

4. Переменные для разных брейк-пойнтов. С помощью числовых переменных и режимов вы можете задавать отступы для экранов разных размеров.

Наглядно показали в карточках ⬆️

Пару советов по работе с переменными:

— Используйте переменные в сочетании с компонентами для максимальной гибкости.
— Создавайте коллекции переменных (collections), чтобы переключаться между разными наборами значений.
— Используйте плагин для выгрузки переменных в формате JSON или CSS.