В прошлом уроке мы ускорили работу с плагинами и виджетами. Теперь наведём порядок в файлах и страницах Figma, чтобы эта скорость не превратилась в хаос. Правильная организация — фундамент для эффективной команды и масштабирования дизайн-системы.
Зачем наводить порядок?
Представьте: вы работаете над большим проектом с дизайнерами и разработчиками. Если каждый будет создавать файлы и страницы как ему вздумается, очень скоро начнутся проблемы:
- Потеря времени: Нужный макет или компонент придётся искать часами.
- Ошибки: Легко использовать устаревшую версию или дублировать работу.
- Сложный онбординг: Новичкам будет крайне сложно разобраться в проекте.
- Проблемы с передачей разработчикам: Непонятная структура файлов замедлит разработку.
Совет: Думайте о файлах Figma как о библиотеке. Чем лучше она каталогизирована, тем проще найти нужную книгу.
Структура файлов: Команды, проекты, файлы
Figma предлагает иерархию для организации работы:
- Команды (Teams): Верхний уровень. Обычно это отдел, департамент или крупный проект. Например, «Отдел Продуктового Дизайна» или «Проект CRM-системы».
- Проекты (Projects): Внутри команды. Проект может быть посвящён продукту, фиче или направлению. Например, «Мобильное приложение», «Веб-сайт», «Дизайн-система».
- Файлы (Files): Ваши дизайн-файлы. Внутри проекта может быть много файлов.
Как организовать структуру:
- Одна команда — один продукт/направление: Если у вас несколько продуктов, создайте отдельные команды для каждого.
- Проекты по фичам/этапам: Внутри команды разбивайте работу на логические проекты. Например:
[Название продукта] - Основные экраны[Название продукта] - Дизайн-система[Название продукта] - Исследования
- Именование файлов: Используйте чёткие и единообразные правила:
[Название продукта/фичи] - [Тип файла] - [Версия]- Примеры:
CRM - Dashboard - v1.2,Мобильное приложение - Онбординг - v2,Дизайн-система - UI Kit
Организация страниц внутри файла
В каждом файле Figma можно создавать несколько страниц. Это мощный инструмент для структурирования работы.
Типичные страницы в дизайн-файле:
- Обложка (Cover): Первая страница, которая служит обложкой для файла в списке проектов. Создайте простой фрейм с названием файла, датой и именем автора. Это помогает быстро ориентироваться.
- Исследования/Референсы (Research/References): Здесь храните результаты исследований, мудборды, скриншоты конкурентов.
- Флоу/Карты (Flows/Maps): Схемы пользовательских путей, карты сайта, диаграммы.
- Черновики/Песочница (Drafts/Sandbox): Место для экспериментов, быстрых набросков, которые ещё не готовы к показу.
- Основные макеты (Main Designs): Здесь находятся финальные или почти финальные версии макетов. Разделяйте их по экранам, фичам или этапам.
- Компоненты/Стили (Components/Styles): Если файл не отдельная библиотека дизайн-системы, здесь храните локальные компоненты и стили.
- Архив (Archive): Старые версии макетов, которые могут понадобиться, но не должны мешать основной работе.
Как именовать страницы:
Используйте префиксы или эмодзи для быстрой навигации и понимания назначения страницы:
✨ Обложка📚 Референсы🗺️ Пользовательские флоу🚧 Черновики📱 Главная⚙️ Компоненты🗑️ Архив
Пример: В файле «Мобильное приложение - Личный кабинет» могут быть страницы:
✨ Обложка,🗺️ Флоу авторизации,📱 Профиль,📱 Настройки,🚧 Новые идеи,⚙️ Локальные компоненты.
Лучшие практики для порядка
- Единообразие: Договоритесь с командой о единых правилах именования и структурирования. Используйте общие шаблоны файлов.
- Регулярная чистка: Удаляйте ненужные страницы и слои, архивируйте устаревшие макеты.
- Используйте обложки: Всегда создавайте обложку для файла. Это значительно улучшает навигацию по проектам.
- Комментарии и описания: Используйте комментарии в Figma для пояснений к макетам, а также заполняйте описание файла.
- Версионирование: Активно используйте историю версий Figma (File > Show version history) для сохранения важных этапов работы. Это особенно важно перед крупными изменениями или передачей разработчикам.
Важно: Не бойтесь удалять то, что не нужно. Figma хранит историю версий, так что вы всегда сможете вернуться к предыдущему состоянию, если что-то пойдёт не так.
Практическое задание
- Создайте новый файл в Figma. Представьте, что это файл для нового проекта «Онлайн-магазин электроники».
- Организуйте страницы: Создайте следующие страницы, используя предложенные соглашения по именованию и эмодзи:
- Обложка
- Исследования и референсы
- Главная страница (макет)
- Страница товара (макет)
- Корзина (макет)
- Локальные компоненты
- Черновики
- Наполните обложку: Создайте простой фрейм на странице «Обложка» с названием проекта и вашим именем.
Правильная организация файлов и страниц — это не просто «красиво», это залог эффективной и бесперебойной работы, особенно в больших командах. В следующем разделе мы углубимся в тему командной работы и узнаем, как Figma помогает в коллаборации и управлении версиями, чтобы ваш дизайн-процесс был максимально прозрачным и контролируемым.