Создание страниц документации в Figma: Описание компонентов

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

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

Зачем нужна документация дизайн-системы в Figma?

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

Документирование в Figma даёт несколько преимуществ:

Единый источник истины: Вся информация о компонентах, стилях и принципах дизайна хранится в одном месте, доступном для всех.
Быстрый онбординг: Новые члены команды быстрее осваивают дизайн-систему и начинают продуктивно работать.
Согласованность: Документация помогает поддерживать единообразие в дизайне, предотвращая появление «зоопарка» стилей и компонентов.
Эффективная коммуникация: Разработчики получают чёткие инструкции по использованию компонентов. Это сокращает количество вопросов и ошибок.
Поддержка масштабирования: По мере роста дизайн-системы документация становится незаменимым инструментом для управления ею.

Структура страниц для документации

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

Пример структуры страниц:

_Documentation (или _Docs)
- Overview (Обзор дизайн-системы, принципы, философия)
- Colors (Описание цветовой палитры, как использовать переменные цвета)
- Typography (Описание типографической системы, стилей текста)
- Icons (Руководство по использованию иконок)
- Components
  - Button (Документация для компонента «Кнопка»)
  - Input Field (Документация для компонента «Поле ввода»)
  - ...и так далее для каждого компонента
- Guidelines (Общие рекомендации по UI/UX, доступности)

Совет: Используйте префикс _ (нижнее подчёркивание) для страниц документации. Так они всегда будут в начале списка страниц в Figma, и вы легко их найдёте.

Описание компонентов: Что включать?

Для каждого компонента создавайте отдельную страницу или фрейм. Вот что важно включить в описание:

Название компонента: Чёткое и понятное название.
Описание: Кратко объясните назначение компонента и когда его использовать.
Примеры использования:
- Покажите все варианты (Variants) компонента (состояния, размеры, типы).
- Продемонстрируйте, как компонент выглядит в разных контекстах.
- Используйте интерактивные компоненты (если применимо), чтобы показать их поведение (например, при наведении или клике).
Свойства (Properties):
- Перечислите все Component Properties (текстовые, булевы, Instance Swap, Content Property) и объясните их назначение.
- Укажите, какие переменные используются для отступов, размеров, цветов.
Правила использования (Do's & Don'ts):
- Примеры правильного и неправильного использования компонента. Это очень важно для поддержания согласованности.
- Например: «Не используйте кнопку без текста», «Всегда используйте иконку слева от текста в этом типе кнопки».
Связанные компоненты/стили: Укажите, с какими другими элементами дизайн-системы этот компонент часто используется или от каких стилей зависит.
Технические заметки (для разработчиков):
- Если есть специфические требования к реализации, укажите их здесь.
- Например, ссылки на документацию по реализации на стороне кода.

Пример оформления страницы компонента «Кнопка»

## Кнопка (Button)

Кнопка — это интерактивный элемент, который запускает действие.

### Когда использовать

Используйте кнопки для основных действий пользователя: отправка формы, подтверждение выбора, навигация.

### Варианты и состояния

*   **Типы:** Primary, Secondary, Tertiary, Destructive
*   **Размеры:** Small, Medium, Large
*   **Состояния:** Default, Hover, Pressed, Disabled, Loading

*(Здесь разместите фреймы с примерами всех вариантов кнопок, используя экземпляры мастер-компонента)*

### Свойства компонента

*   `Text (String)`: Текст на кнопке.
*   `Icon Left (Instance Swap)`: Иконка слева от текста.
*   `Icon Right (Instance Swap)`: Иконка справа от текста.
*   `Show Icon (Boolean)`: Переключатель видимости иконки.
*   `State (Variant)`: Состояние кнопки (Default, Hover, Pressed, Disabled, Loading).
*   `Size (Variant)`: Размер кнопки (Small, Medium, Large).
*   `Type (Variant)`: Тип кнопки (Primary, Secondary, Tertiary, Destructive).

### Правила использования

> **✅ Правильно:**
> *   Используйте `Primary` кнопку для главного действия на странице.
> *   Всегда используйте осмысленный текст на кнопке.

> **❌ Неправильно:**
> *   Не используйте более одной `Primary` кнопки на одном экране.
> *   Не используйте иконки без текста, если их значение неочевидно.

### Технические заметки

*   Реализовано с использованием компонента `Button` из библиотеки `UI-Kit`.
*   Использует переменные для отступов: `spacing/md`, `spacing/lg`.
*   Цвета кнопки определяются переменными: `color/primary/default`, `color/primary/hover` и т.д.

Инструменты Figma для документирования

Текстовые стили: Используйте их для заголовков, подзаголовков и основного текста в документации.
Переменные: Ссылайтесь на переменные для цветов, отступов и размеров, чтобы показать, как компоненты связаны с дизайн-токенами.
Auto Layout: Используйте Auto Layout для организации содержимого на страницах документации. Так оно будет аккуратным и легко читаемым.
Компоненты: Сами компоненты, их варианты и свойства — это основа вашей документации. Размещайте экземпляры компонентов на страницах документации.
Комментарии: Используйте комментарии для быстрых заметок или вопросов к команде.
Ссылки: Вставляйте ссылки на внешние ресурсы, если это необходимо (например, на Confluence, Notion или Jira).

Создание качественной документации в Figma — это инвестиция, которая окупится многократно. Она упростит работу всей команды и обеспечит единообразие продукта.

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