Использование переменных для отступов и размеров (spacing and sizing)

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

Зачем переменные для отступов и размеров?

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

Это особенно важно для:

• Единообразия: Все отступы и размеры соответствуют дизайн-системе.
• Гибкости: Быстро адаптируйте дизайн под разные платформы или плотности пикселей.
• Эффективности: Сокращайте время на ручные изменения, минимизируйте ошибки.
• Передачи разработчикам: Переменные легко транслируются в CSS-переменные или дизайн-токены. Это упрощает фронтенд-разработку.

Создаём и применяем числовые переменные для отступов

Давайте создадим коллекцию переменных для отступов.

1. Откройте панель Variables. Нажмите на иконку Variables в правой боковой панели или используйте Shift + 1 (если настроен быстрый доступ).

2. Создайте новую коллекцию. Нажмите Create collection и назовите её, например, Spacing.

3. Добавьте переменные.

   • Нажмите Create variable и выберите Number.
   • Назовите переменную, используя семантический подход или шкалу. Например:
     • spacing/xs (extra small) = 4
     • spacing/sm (small) = 8
     • spacing/md (medium) = 16
     • spacing/lg (large) = 24
     • spacing/xl (extra large) = 32
   • Используйте слеши (/) для группировки, как мы делали с цветами и типографикой. Это поможет организовать переменные внутри коллекции.

   Совет: Для отступов часто используют шкалу, кратную 4 или 8 (например, 4, 8, 12, 16, 24, 32, 48). Это обеспечивает визуальную гармонию и упрощает работу.

4. Примените переменные к элементам.

   • Выберите любой элемент (например, прямоугольник или текстовый блок).
   • В панели свойств (например, Width, Height, Padding, Gap в Auto Layout) наведите курсор на поле ввода значения.
   • Появится иконка Variables (четыре точки). Нажмите на неё.
   • Выберите нужную переменную из коллекции Spacing.

   Теперь, если вы измените значение переменной spacing/md с 16 на 20, все элементы, использующие её для отступа, автоматически изменят свой размер или расположение.

Переменные для размеров элементов

Как и отступы, числовые переменные помогут стандартизировать размеры элементов: высоту кнопок, ширину полей ввода, размеры аватаров и так далее.

1. Создайте коллекцию Sizes. Повторите шаги 1-2 из предыдущего раздела, но назовите коллекцию Sizes.
2. Добавьте переменные размеров.
   • Например:
     • size/button/height/md = 48
     • size/avatar/sm = 32
     • size/icon/md = 24
3. Примените переменные. Выберите элемент и примените переменную к его свойствам Width или Height.

Переменные и Auto Layout: идеальное сочетание

Переменные особенно мощно проявляют себя в сочетании с Auto Layout. Вы можете привязать значения Padding (внутренние отступы) и Gap (отступы между элементами) в Auto Layout к переменным.

1. Создайте фрейм с Auto Layout.
2. В панели Auto Layout:
   • Наведите курсор на поля Horizontal padding, Vertical padding или Gap between items.
   • Нажмите на иконку Variables и выберите соответствующую переменную отступа (например, spacing/md).

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

Практическое задание

Создайте в Figma небольшой компонент, например, кнопку или карточку, используя Auto Layout. Примените к внутренним отступам (Padding) и отступам между элементами (Gap) переменные из коллекции Spacing, которую вы создали. Попробуйте изменить значения этих переменных и посмотрите, как ваш компонент автоматически адаптируется.

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