Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM

В продуктовых командах важно поддерживать порядок в дизайне, чтобы избежать недопонимания между дизайнерами, разработчиками, аналитиками и менеджерами.

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

Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM

Участники продуктовой команды работают все без исключения в таск-трекерах. И поэтому чтобы у всех было одинаковое понимание, хранение макетов нужно сделать на подобии задач команды.

Данные задачи свяжем со страницами в Figma

📌 Epic 1 [EP-000001] Личный кабинет пользователя ├── 📂 Feature 1 [FT-100001] Авторизация │ ├── 📄 Task 1 [TT-250021] Вход │ │ ├── ✅ Sub-task [ST-586061] Форма входа │ │ ├── ✅ Sub-task [ST-586062] Валидация форм │ │ ├── ✅ Sub-task [ST-586063] Сообщения │ ├── 📄 Task 2 [TT-250022] Регистрация │ ├── 📄 Task 3 [TT-250023] Сменить пароль ├── 📂 Feature 2 [FT-100002] Профиль пользователя ├── 📂 Feature 3 [FT-100003] Настройки │ 📌 Epic 2 [EP-000002] Главная страница │ 📌 Epic 3 [EP-000003] Каталог продуктов

Далее основываясь на данном премере, посмотрим организацию макетов в Figma.

Для разграничения прав доступа и обеспечения безопасности разработки дизайна каждый продукт или проект имеет свою команду Проект.Team (Проект - название продукта или проекта) в пространстве Figma.

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

📌 Проект.Team ├── Проект.Kit (библиотека компонентов и UI-кит) ├── Проект.Analitics (отдельные файлы для анализа и исследований) ├── Проект.Design (отдельные файлы для дизайна и прототипирования) ├── Проект.Test (отдельные файлы для фиксации багов) ├── Проект.Trash (все черновики или старые файлы)

Хранение файлов компонентов и дизайн-системы не связано с задачами. Все остальные файлы связана с конкретными задачами по проекту.

📌 Проект.Kit ├── Проект.Style (цвета, переменные и т.д / или копия ДС) ├── Проект.UI-Kit (библиотека компонентов / или копия ДС) ├── Проект.Components (модульные компоненты) ├── Проект.Guidlines (описание типовых страниц)

📌 Проект.Analitics ├── EP-000000 Название (Номер, статус, исполнитель и название)

📌 Проект.Design ├── EP-000000 Название (Номер, статус, исполнитель и название)

📌 Проект.Test ├── Проект.BG-000000 Название (Номер, статус, исполнитель и название)

📌 Проект.Trash ├── Проект.Date Название (черновик или неактуальные макеты со сроком давности)

Для удобства навигации используйте унифицированные правила именования которая соответствует задачам в таск-трекерах.

Страницы можно вести двумя способами, это зависит от обьема задач или кому как нравится.

Первый вариант: используем страницы (page) как группы

📌 File: [EP-000001] Личный кабинет пользователя ├── Page: [FT-100001] Авторизация ├── ├── Page: [TT-250021] Вход ├── ├── ├── Section: [ST-586061] Форма входа ├── ├── ├── Section: [ST-586062] Валидация форм ├── ├── ├── Section: [ST-586063] Сообщения ├── ├── Page: FT-000002 Регистрация ├── ├── Page: TT-250021 Сменить пароль ├── Page: [FT-100002] Профиль пользователя ├── Page: [FT-100003] Настройки ├── ––––––––––––––––––––– ├── Page: _local_components ├── Page: _demo ├── Page: _trash ├── Page: _cover

Второй вариант: используем блоки (section) как группы

📌 File: [EP-000001] Личный кабинет пользователя ├── Page: [FT-100001] Авторизация ├── ├── Section: [TT-250021] Вход ├── ├── ├── Section: [ST-586061] Форма входа ├── ├── ├── Section: [ST-586062] Валидация форм ├── ├── ├── Section: [ST-586063] Сообщения ├── ├── Section: FT-000002 Регистрация ├── ├── Section: TT-250021 Сменить пароль ├── Page: [FT-100002] Профиль пользователя ├── Page: [FT-100003] Настройки ├── ––––––––––––––––––––– ├── Page: _local_components ├── Page: _demo ├── Page: _trash ├── Page: _cover

Такая организация файлов в Figma и их связь с Jira/ALM помогает быстро находить нужные макеты, согласовывать изменения и упрощает взаимодействие между дизайнерами, разработчиками и аналитиками.

Мой телеграм канал. ❤

#ux #ui #design #frontend #дизайнсистема #интерфейс

Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM

Вводная. Задачи = Макеты.

Пример задач в таск-трекере

Принципы организации файлов в Figma

Команда (Team)

Проекты (Projects)

Файлы (Files)

Файлы Проект.Kit

Файлы Проект.Analitics

Файлы Проект.Design

Файлы Проект.Test

Файлы Проект.Trash

Страницы (Pages)