Подготовка Figma: Настраиваем рабочее пространство для эффективности

Дизайн-система — мощный инструмент. Она ускоряет разработку и поддерживает порядок. Теперь настроим Figma, чтобы быстро создать дизайн-систему для Next.js.

Готовим рабочее пространство

Начнём с чистого листа. Откройте Figma и создайте новый файл. Сразу назовите его, например, [НазваниеПроекта] — Дизайн-система.

Совет: Понятные названия файлов экономят время вам и команде.

Проверьте базовые настройки:

1. Единицы измерения: Figma по умолчанию использует пиксели (px). Это идеально для веба.

2. Цветовое пространство: sRGB — стандарт для веба.

3. Сетка (Grid): Пока не будем делать сложную сетку, но базовая сетка 8px или 4px поможет выравнивать элементы и поддерживать ритм.

   • На панели справа, в разделе "Layout Grid", нажмите +.
   • Измените Grid на Columns.
   • Установите Count на 12 (стандартная 12-колоночная сетка для адаптивного дизайна).
   • Type — Stretch.
   • Margin — 24px (или 16px для мобильных).
   • Gutter — 24px (или 16px).
   • Сделайте цвет сетки полупрозрачным, чтобы она не отвлекала.

   Важно: Не зацикливайтесь на идеальной сетке. Наша цель — MVP, поэтому достаточно базовых настроек.

Организуем страницы и фреймы

Эффективная организация — ключ к быстрой работе. В Figma это продуманная структура страниц и фреймов.

Структура страниц

Предлагаю такую структуру страниц для вашей дизайн-системы:

• 00 — Intro: Общая информация о дизайн-системе, принципы, ссылки на документацию.
• 01 — Foundations: Здесь будут дизайн-токены (цвета, типографика, отступы).
• 02 — Components: Страницы для атомарных компонентов (кнопки, поля ввода и т.д.). Категоризируйте их по мере роста системы. Например, 02.1 — Buttons, 02.2 — Inputs.
• 03 — Patterns: Сложные паттерны и композиции компонентов.
• 04 — Examples: Примеры использования компонентов и паттернов в реальных интерфейсах.
• 99 — Archive: Для устаревших или экспериментальных компонентов.

Лайфхак: Нумеруйте страницы (00, 01, 02 и т.д.), чтобы они всегда были в нужном порядке, независимо от алфавитной сортировки.

Организация фреймов на страницах

На каждой странице, особенно в 02 — Components, используйте фреймы для группировки связанных компонентов. Например, на странице 02.1 — Buttons у вас может быть один фрейм для базовых кнопок, другой — для кнопок с иконками, третий — для кнопок разных размеров.

• Именование фреймов: Давайте им чёткие и понятные названия, например, Primary Buttons, Secondary Buttons, Icon Buttons.
• Использование разделов (Sections): Figma позволяет создавать разделы (Sections). Они полезны для визуального отделения групп компонентов внутри фрейма или на странице. Это удобно для организации вариантов одного компонента.

Готовимся к работе с переменными

В следующих уроках мы будем активно работать с переменными Figma. Они станут основой наших дизайн-токенов. Убедитесь, что у вас открыта панель "Local Variables" (Локальные переменные).

• На правой боковой панели, в разделе "Design", найдите секцию "Local Variables" и нажмите на иконку "Open variables".

Это всё, что нужно для старта! Мы создали чистое рабочее пространство, организовали его и готовы погрузиться в мир дизайн-токенов.

На следующем шаге мы начнём создавать и организовывать цветовые переменные. Они станут основой визуального стиля вашей дизайн-системы. Готовы раскрасить ваш проект? 🎨