Создание базовой кнопки с автолейаутом и вариантами

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

Кнопка: автолейаут и переменные

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

1. Создай основу:

   • Нарисуй фрейм (клавиша F).
   • Внутри фрейма добавь текст, например, "Нажать".
   • Примени к тексту типографическую переменную, скажем, text/body/medium.

2. Примени автолейаут:

   • Выдели фрейм с текстом и нажми Shift + A.
   • Настрой отступы. Используй переменные: spacing/medium для горизонтальных и spacing/small для вертикальных. Это гарантирует единообразие и упростит изменения в будущем.
   • Убедись, что для текстового слоя установлено Hug contents по горизонтали и вертикали. Так кнопка сама подстроится под размер текста.

3. Примени цветовые переменные:

   • Выдели фрейм кнопки.
   • В разделе Fill (Заливка) примени семантическую переменную для фона, например, color/background/primary.
   • Для текста примени соответствующую переменную, например, color/text/on-primary.
   • Добавь переменную для Border Radius (Скругление углов), например, radius/medium.

   Совет: Всегда используй семантические токены (color/background/primary, color/text/on-primary), а не глобальные цвета (color/brand/blue/500). Это позволит легко менять темы (светлая/тёмная) или брендинг, не затрагивая структуру компонентов.

Компонент и варианты

Базовая кнопка готова. Теперь превратим её в компонент и добавим варианты.

1. Создай компонент:

   • Выдели кнопку и нажми Ctrl + Alt + K (или Cmd + Option + K на Mac).
   • Переименуй компонент в Button.

2. Добавь первый вариант:

   • Выдели компонент Button.
   • На правой панели, в разделе Properties (Свойства), нажми + рядом с Variants (Варианты).
   • По умолчанию появится свойство Property 1 со значением Default. Переименуй Property 1 в Type, а Default в Primary.

   Теперь у тебя есть компонент Button с вариантом Type: Primary.

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

Создай базовую кнопку в Figma. Используй автолейаут и переменные для отступов, цветов и скруглений. Убедись, что кнопка автоматически подстраивается под длину текста. Затем преврати её в компонент с вариантом Type: Primary.

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