Как организовать работу команды в Figma

Привет, я Миша, ux/ui-дизайнер в Noknok. При командной работе в Figma мы, бывает, сталкиваемся с организационными проблемами. В статье я расскажу, как мы с ними справляемся, а в конце добавлю макет с полезными материалами — обязательно дочитайте!

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

Сейчас я работаю над CRM-системой, которую в разное время поддерживали разные дизайнеры. В мое распоряжение попало три Figma-документа с дизайном, ни один из них не совпадал с тем, который сейчас на продакшене. Плюс, у продукта не было UI-Kit’а и, как следствие, консистентности в дизайне.

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

К тому же, в какой-то момент — еще до нашего сотрудничества — клиент решил сделать редизайн СRМ-системы, но он не был завершен, и часть системы была с новым дизайном, а часть — со старым.

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

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

Всю работу мы разбили на 3 этапа:

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

Стартовая страница

Для менеджеров и дизайнеров я сделал канбан-доску прямо в Figma для просмотра задач и их статуса. В каждом документе содержится очень много страниц, поэтому доска обеспечивает быструю навигацию, а карточки в ней отображают статусы готовности раздела или фичи. Так разработчики и менеджеры могут быстро найти нужный макет. Для легкого онбординга в проект параллельно с работой я подготовил специальные материалы: для дизайнеров — правила оформления макетов, для разработчиков —информацию об использовании Figma и Dev Mode.

Документ с макетами

Чтобы не путаться в сценариях, каждому разделу в CRM-системе посвящена отдельная страница. Если дизайн раздела утвержден, там проставляется статус Ready for Dev.

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

Библиотека элементов

Здесь я использовал атомарный подход, чтобы было удобнее считывать структуру компонентов:

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

Надеюсь, что было полезно — жду ваших вопросов и комментариев. В следующих статьях расскажу про функционал Figma для разработчиков, оставайтесь со мной: )