Ветки.md 6.2 KB
Figma Branch
Figma Branch (или «ветка») — это функционал, который позволяет создать копию проекта и изменять его независимо от основной версии. Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Всё как у разработчиков. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise.
Предпосылки
При коллективной работе над проектом, всегда встречаются классические проблемы: что/когда/кем было добавлено в проект и почему компоненты сломались. Типичное решение — складывать готовые экраны и компоненты куда-то в угол канваса, тегать лида комментом, а после ревью — чистить за собой, мрак. Проще, быстрей, дешевле использовать функционал Branch, тем более они идеально подходят для следующих сценариев:
- Вы дизайн-команда работающая над дизайн-системой или отдельным UI kit'ом
- Вы дизайн-команда работающая по фичам одновременно в одном или нескольких figma-проектах
- Оба варианта сразу
Три правила создания веток:
- Добавляем новые сущности в дизайн-систему: иконки, компоненты, варианты, стили, элементы, подсказки, группы, секции и так далее
- Вносим любые изменения в стили, компоненты и варианты в дизайн-систему
- Создаем или правим локальные компоненты в проекте продукта
Используя эти простые правила вместе с нативным функционалом, мы как продуктовые дизайнеры получаем отличный механизм контроля и порядка в своих дизайн-системах и больших проектах. Дополнительно получая защиту от глупых ошибок, которые отсеиваются на этапе мёрж-ревью перед сливанием ветки в мастер, например:
- Кривые иконки (стиль не по гайду, вывернутые точки, неправильный нейминг)
- В компоненте properties-конфликт или новый элемент не отображается соседних вариантах
- В компоненте забыли проставить auto layout
Выбор ветки
Проекты содержащие ветки, обозначаются специальным лейблом, по нажатию на который, можно выбрать конкретную версию проекта.
Также, посмотреть все ветки можно через основное меню File → See all branches.
В ветки мжно приглашать как в обычный проект и делиться ссылкой на них. Работает это через привычную кнопку Share в правом углу, но дополнительно можно скопировать ссылку, переименовать ветку или отправить её в архив через выпадающие меню проекта View Branch → See all branches → •••
Создание ветки
Находясь в проекте, раскрываем контекстное меню рядом с названием файл, в котором создаем ветку нажав на Create branch.
Мёрж ветки
Чтобы начать процесс мёржа, раскрываем контекстное меню проекта, жмём Review and Merge changes, далее описываем что было сделано и выбираем аппрувером лида/руководителя/других дизайнеров.
Бывает что созданная ветка не требует продолжения работы и мёрджить её нет смысла (дубликат, изменились условия задачи и тд) — просто архивируем. Посмотреть или восстановить архивные ветки можно через контекстное меню проекта в разделе Archived.
Заключение
Использование веток является важным базовым инструментом для дизайн-команд работающих с Figma. Он позволяет сделать совместную работу более эффективной и удобной. Убирает боль отмены больших изменений и путаницы при работе со сложными проектами. И конечно же, добавляет инструмент контроля и предотвращения ошибок.