Определение переменных для отступов, радиусов и теней

Мы уже освоили цвета и типографику с помощью переменных Figma. Теперь перейдём к не менее важным элементам, которые задают структуру и ритм интерфейса: отступам, скруглениям и теням. Эти детали делают дизайн аккуратным и профессиональным.

Отступы (Spacing)

Отступы — основа любого макета. Они разделяют элементы, добавляют «воздух» и улучшают читаемость. В дизайн-системе важно иметь стандартизированные отступы для консистентности.

1. Создайте коллекцию переменных Spacing.
2. Добавьте числовые переменные для отступов. Используйте базовую сетку (например, 4px или 8px) — это упростит масштабирование и адаптивность.
   • spacing-xs: 4
   • spacing-sm: 8
   • spacing-md: 16
   • spacing-lg: 24
   • spacing-xl: 32
   • spacing-2xl: 48
3. Применяйте переменные к Padding (внутренние отступы) и Gap (отступы между элементами в автолейауте).

Совет: Начните с небольшого набора отступов. По мере развития проекта вы всегда сможете добавить новые значения. Избегайте избыточности на старте.

Скругления (Border Radius)

Скругленные углы сильно влияют на восприятие интерфейса: делают его мягче и дружелюбнее или, наоборот, строже.

1. Создайте коллекцию переменных Radius.
2. Добавьте числовые переменные для радиусов.
   • radius-none: 0 (для острых углов)
   • radius-sm: 4
   • radius-md: 8
   • radius-lg: 12
   • radius-full: 999 (или любое большое число для полного скругления, например, для кнопок-пилюль)
3. Применяйте переменные к свойству Corner Radius слоёв.

Тени (Shadows)

Тени добавляют глубину и иерархию, помогая пользователю понять, какие элементы интерактивны или находятся выше других.

В Figma переменные для теней работают через стили эффектов (Effect Styles).

1. Создайте стили эффектов для теней. Для каждого стиля укажите:
   • X: смещение по горизонтали
   • Y: смещение по вертикали
   • Blur: размытие
   • Spread: расширение (опционально)
   • Color: цвет тени (используйте переменные цвета из вашей палитры!)
2. Примеры стилей теней:
   • shadow-sm: Y: 2, Blur: 4, Color: {colors.black-alpha-20}
   • shadow-md: Y: 4, Blur: 8, Color: {colors.black-alpha-25}
   • shadow-lg: Y: 8, Blur: 16, Color: {colors.black-alpha-30}
3. Применяйте эти стили эффектов к слоям.

Важно: Для цвета тени всегда используйте переменные цвета, которые вы определили ранее. Это обеспечит консистентность и упростит изменение темы (например, для тёмной темы).

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

Откройте свой файл Figma и выполните шаги:

1. Создайте коллекцию Spacing и добавьте 5-7 числовых переменных для отступов (например, 4, 8, 12, 16, 24, 32px).
2. Создайте коллекцию Radius и добавьте 3-4 переменные для скруглений (например, 0, 4, 8, 999px).
3. Создайте 2-3 стиля эффектов для теней, используя переменные цвета из вашей палитры.
4. Нарисуйте несколько простых прямоугольников и примените к ним созданные переменные отступов (через автолейаут), радиусов и стилей теней. Поэкспериментируйте с комбинациями!

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