реклама
разместить

Как организовать файлы в 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 с привязкой к задачам продуктовой команды в Jira/ALM

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

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

Команда (Team)

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

Проекты (Projects)

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

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

Файлы (Files)

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

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

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

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

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

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

📌 Проект.Design ├── EP-000000 Название (Номер, статус, исполнитель и название)
Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM

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

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

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

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

Страницы (Pages)

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

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

Первый вариант: используем страницы (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
Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM

Второй вариант: используем блоки (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

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

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

22
реклама
разместить
2 комментария

Интересный подход, мы пока в банке дублируем макеты в confluence

а вы макеты передаете именно в фигме на разработку?

по разному, нет единого стандарта. Хотя он есть по методологии, но на практики зависит от команды

Главный навык в карьере дизайнера

Есть множество вещей, которые помогают мне как дизайнеру в работе. Например, components и auto-layout в Figma заметно ускоряют создание макетов, а единая дизайн-система упрощает взаимодействие с разработкой. ChatGPT и вовсе я использую почти на каждом этапе. Но все это лишь инструменты. Мой главный навык заключается в другом.

Главный навык в карьере дизайнера
44
22
реклама
разместить
Описание состояний компонентов в Figma и демократизация UX-исследований: главное в продуктовом дизайне за декабрь 2024 года

Традиционный дайджест Юрия Ветрова, директора по дизайну и бренду Muse Group.

1010
Продажи растут там, где правильно начинают день: чек-лист идеальной летучки
Продажи растут там, где правильно начинают день: чек-лист идеальной летучки
55
22
11
Немного про Атомарный дизайн

В статьях про атомарный дизайн есть одна большая проблема: в одной кнопка считается атомом (пример), а в другой — уже молекулой (другой пример).

Немного про Атомарный дизайн
33
Основные горячие клавиши в фигма на русском языке на Windows и Mac

Горячие клавиши в Figma, или Keyboard Shortcuts, — это мощное оружие для ускорения работы. В этой статье расскажем, где посмотреть список горячих клавиш в Figma и какое действие скрывается за каждой комбинацией.

Горячие клавиши для переключения между инструментами в Figma на русском языке
22
Как сделать работу в Figma удобней: подборка плагинов для дизайна

Как-то раз я пришел к дизайнеру Мише и попросил сделать обложку для этого канала. Тогда я стал свидетелем чуда: он одним движением руки превратил текст из линейного в круговой. Потом посмотрел мое удивленное лицо, пожал плечами и на немой вопрос ответил: «Плагины». Оказывается, есть в Figma инструменты, которые упрощают работу с макетом до пары кли…

Как сделать работу в Figma удобней: подборка плагинов для дизайна
1010
Дизайн-проект загородного дома в коттеджном поселке «Колтуши парк» в ЛО: классический интерьер с яркими деталями

Дизайн-проект загородного дома в коттеджном поселке «Колтуши парк» в Ленинградской области разработан для семьи, ценящей эстетику традиционных форм и натуральные материалы. Важно было не просто объединить функциональные зоны, но и визуально раскрыть объем пространства. Интерьер наполнен выразительными деталями: гипсовые бюсты, классическая лепнина

Дизайн-проект коттеджа в поселке  «Высокий стиль», гостевая комната с натуральными оттенками от студии Artum.
Аналитика перед разработкой дизайн-системы: что учесть, кого вовлечь и на что не стоит забивать
Аналитика перед разработкой дизайн-системы: что учесть, кого вовлечь и на что не стоит забивать

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

22
Figsight #14: Автоиконки
Figsight #14: Автоиконки

Как насчёт иконок, которые автоматически меняют детализацию в зависимости от размера и при этом не ломаются? Сегодня разберёмся, как этого добиться.

77
реклама
разместить
От хаоса к структуре. Как организовать взаимодействие дизайнера и фронтов.
Делюсь приемами, которые работают.
Про то, как переносить дизайн из Figma в ИИ
Про то, как переносить дизайн из Figma в ИИ

Меня зовут Константин Зудов, и я занимаю должность Head of Design в компании Intelsy. Как и многих, меня волнует вопрос, смогут ли искусственный интеллект и автоматизация полностью заменить дизайнеров и разработчиков. Я с нетерпением жду новых решений в этой сфере, чтобы провести эксперименты и исследования.

11
Как превратить дизайн из Figma в полноценное приложение с помощью Bolt: пошаговое руководство

Интеграция Figma с Bolt открывает новые возможности для быстрого преобразования дизайнов в полнофункциональные приложения. С помощью простого приёма — добавления "bolt.new/" перед URL вашего Figma-документа — вы можете начать процесс разработки приложения на основе созданного дизайна. Ниже представлено пошаговое руководство по использованию этой фу…

22
[]