Основы работы с переменными: Типы и назначение - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Основы работы с переменными: Типы и назначение

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Вы уже умеете создавать компоненты, варианты и свойства. Это здорово упрощает работу с дизайн-системами. Но чтобы компоненты стали по-настоящему динамичными и адаптивными, нужен новый мощный инструмент — переменные (Variables).

Переменные в Figma — это не просто хранилище значений. Это фундамент для дизайн-токенов и управления сложными состояниями интерфейса. С их помощью вы централизованно управляете цветами, типографикой, отступами, размерами и даже темами (например, тёмной/светлой). Ваша дизайн-система станет невероятно гибкой и масштабируемой.

Что такое переменные и зачем они нужны?

Представьте: вам нужно изменить основной цвет приложения. Без переменных пришлось бы вручную менять каждый элемент, где этот цвет используется. С переменными вы меняете значение в одном месте, и оно автоматически применяется ко всем связанным элементам. Это экономит время, снижает ошибки и делает дизайн консистентным.

Переменные в Figma работают как дизайн-токены. Дизайн-токены — это атомарные единицы дизайна, которые хранят визуальные свойства: цвета, шрифты, отступы, тени и так далее. Их можно использовать в разных частях дизайн-системы. Токены — это мост между дизайнерами и разработчиками. Они обеспечивают единый язык и синхронизируют изменения.

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

Типы переменных в Figma

Figma поддерживает четыре основных типа переменных, каждый для своих задач:

  1. Цвет (Color)

    • Хранит цветовые значения: #FFFFFF, #000000.
    • Применяется к заливкам, обводкам, теням, текстам.
    • Позволяет легко управлять палитрой и создавать цветовые темы.
    • Примеры: primary-500, text-dark, background-light.

  2. Число (Number)

    • Хранит числовые значения: 8, 16, 24.
    • Применяется к отступам (padding, gap), размерам (width, height), радиусам скругления (corner radius), толщине обводки (stroke weight), прозрачности (opacity).
    • Идеально подходит для систем отступов и размеров.
    • Примеры: spacing-md, border-radius-sm, icon-size-24.

  3. Строка (String)

    • Хранит текстовые значения: "Заголовок", "Войти".
    • Применяется к текстовым слоям.
    • Позволяет централизованно управлять текстовыми константами, например, для локализации или повторяющихся надписей.
    • Примеры: button-label-confirm, placeholder-email.

  4. Булево (Boolean)

    • Хранит логические значения: true или false.
    • Применяется к видимости слоёв (visible property).
    • Позволяет включать или отключать отображение элементов, например, для управления состояниями (активный/неактивный, показан/скрыт).
    • Примеры: show-icon, is-active.

Как назначать переменные

Переменные назначаются к свойствам слоёв или компонентов в Figma. Для этого используйте значок "Apply variable" (ромб) рядом с полем свойства на панели "Design".

Например, чтобы применить переменную цвета к заливке:

  1. Выберите объект.
  2. На панели "Design" рядом со свойством "Fill" (Заливка) нажмите на иконку "Apply variable".
  3. Выберите нужную переменную из списка.

Совет: Давайте переменным осмысленные имена, чтобы их было легко найти и понять назначение. Например, color/primary/500 вместо red.

Практика: Первые шаги

Давайте создадим переменную для основного цвета и применим её к нескольким элементам.

  1. Откройте панель "Local variables" (Локальные переменные). Она находится в левой боковой панели, в разделе "Design" под "Styles" (Стили). Если её нет, нажмите на иконку "Variables" (четыре квадрата).
  2. Нажмите Create variable и выберите Color.
  3. Назовите её brand/primary.
  4. Установите значение цвета, например, #007AFF (синий).
  5. Теперь создайте несколько прямоугольников или текстовых слоёв на холсте.
  6. Выберите один из них, перейдите на панель "Design", найдите свойство "Fill" (Заливка) и нажмите на иконку "Apply variable" рядом с ним.
  7. Выберите brand/primary из списка. Повторите для других элементов.
  8. Вернитесь в панель "Local variables" и измените значение brand/primary на другой цвет, например, #FF9500 (оранжевый). Вы увидите, как все связанные элементы мгновенно обновятся! ✨

Это только начало. В следующем разделе мы углубимся в создание и организацию коллекций переменных, чтобы ваша дизайн-система была максимально структурированной и эффективной.