Как организовать файлы в Figma с привязкой к задачам продуктовой команды в Jira/ALM
В продуктовых командах важно поддерживать порядок в дизайне, чтобы избежать недопонимания между дизайнерами, разработчиками, аналитиками и менеджерами.
Хорошо организованная система файлов в Figma помогает создать прозрачный процесс работы. В этой статье рассмотрим, как выстроить удобную структуру организации файлов в Figmа.
Вводная. Задачи = Макеты.
Участники продуктовой команды работают все без исключения в таск-трекерах. И поэтому чтобы у всех было одинаковое понимание, хранение макетов нужно сделать на подобии задач команды.
Пример задач в таск-трекере
Данные задачи свяжем со страницами в Figma
Далее основываясь на данном премере, посмотрим организацию макетов в Figma.
Принципы организации файлов в Figma
Команда (Team)
Для разграничения прав доступа и обеспечения безопасности разработки дизайна каждый продукт или проект имеет свою команду Проект.Team (Проект - название продукта или проекта) в пространстве Figma.
Проекты (Projects)
Чтобы избежать хаоса, важно заранее продумать логику организации проектов и файлов. Рекомендуется использовать следующую структуру проектов:
Файлы (Files)
Хранение файлов компонентов и дизайн-системы не связано с задачами. Все остальные файлы связана с конкретными задачами по проекту.
Файлы Проект.Kit
Файлы Проект.Analitics
Файлы Проект.Design
Файлы Проект.Test
Файлы Проект.Trash
Страницы (Pages)
Для удобства навигации используйте унифицированные правила именования которая соответствует задачам в таск-трекерах.
Страницы можно вести двумя способами, это зависит от обьема задач или кому как нравится.
Первый вариант: используем страницы (page) как группы
Второй вариант: используем блоки (section) как группы
Такая организация файлов в Figma и их связь с Jira/ALM помогает быстро находить нужные макеты, согласовывать изменения и упрощает взаимодействие между дизайнерами, разработчиками и аналитиками.
Мой телеграм канал. ❤
Есть множество вещей, которые помогают мне как дизайнеру в работе. Например, components и auto-layout в Figma заметно ускоряют создание макетов, а единая дизайн-система упрощает взаимодействие с разработкой. ChatGPT и вовсе я использую почти на каждом этапе. Но все это лишь инструменты. Мой главный навык заключается в другом.
Традиционный дайджест Юрия Ветрова, директора по дизайну и бренду Muse Group.
В статьях про атомарный дизайн есть одна большая проблема: в одной кнопка считается атомом (пример), а в другой — уже молекулой (другой пример).
Горячие клавиши в Figma, или Keyboard Shortcuts, — это мощное оружие для ускорения работы. В этой статье расскажем, где посмотреть список горячих клавиш в Figma и какое действие скрывается за каждой комбинацией.
Как-то раз я пришел к дизайнеру Мише и попросил сделать обложку для этого канала. Тогда я стал свидетелем чуда: он одним движением руки превратил текст из линейного в круговой. Потом посмотрел мое удивленное лицо, пожал плечами и на немой вопрос ответил: «Плагины». Оказывается, есть в Figma инструменты, которые упрощают работу с макетом до пары кли…
Дизайн-проект загородного дома в коттеджном поселке «Колтуши парк» в Ленинградской области разработан для семьи, ценящей эстетику традиционных форм и натуральные материалы. Важно было не просто объединить функциональные зоны, но и визуально раскрыть объем пространства. Интерьер наполнен выразительными деталями: гипсовые бюсты, классическая лепнина…
В этой статье я расскажу о том, что сам безуспешно пытался найти в сети. Мне хотелось узнать, как подступиться к разработке крупной дизайн-системы, на что обратить внимание и как организовать свою работу и работу других дизайнеров, разработчиков и менеджеров. Я покажу этот процесс на своем примере.
Как насчёт иконок, которые автоматически меняют детализацию в зависимости от размера и при этом не ломаются? Сегодня разберёмся, как этого добиться.
Меня зовут Константин Зудов, и я занимаю должность Head of Design в компании Intelsy. Как и многих, меня волнует вопрос, смогут ли искусственный интеллект и автоматизация полностью заменить дизайнеров и разработчиков. Я с нетерпением жду новых решений в этой сфере, чтобы провести эксперименты и исследования.
Интеграция Figma с Bolt открывает новые возможности для быстрого преобразования дизайнов в полнофункциональные приложения. С помощью простого приёма — добавления "bolt.new/" перед URL вашего Figma-документа — вы можете начать процесс разработки приложения на основе созданного дизайна. Ниже представлено пошаговое руководство по использованию этой фу…
Интересный подход, мы пока в банке дублируем макеты в confluence
а вы макеты передаете именно в фигме на разработку?
по разному, нет единого стандарта. Хотя он есть по методологии, но на практики зависит от команды