Организация файлов в Figma

Знакома ситуация, когда вы хотите найти какие-либо макеты другого дизайнера, а перед вами — куча пространств с кучей папок с файлами, а в файлах — куча непонятных страниц? И в итоге получается непонятное флоу, у которого актуальных макетов одной и той же страницы 100500, и все они лежат в разных файлах. В итоге вы, как первобытный дизайнер из Photoshop, идёте в чат и начинаете выпрашивать макеты, которые должны были найти за 5 минут. Было такое? Коллеги явно спасибо не говорили!

Как такое решить? 

Я сделал небольшой мануал о том, как лучше организовывать файлы в Figma, чтобы другим дизайнерам и разработчикам, да и просто новеньким, было понятно, где и что лежит, как найти ответственного и т. д.

Как устроена организация файлов

Пространство (тима)

Создается пространство стрима или продукта с понятным названием для всех. Не надо создавать и держать пространства просто так, тем более называть их абстрактными именами — так вы только добавите шума в поиск.

Папка (раздел)

Далее в пространстве (тиме) создаёте папку и называете её по той же самой логике, что и пространство.

Файл с макетами

Файлы в папках создаются по принципу: один актуальный файл для раздела или даже нескольких разделов. Например, у вас есть файл с разделом корзины, и в нём уже лежат только актуальные макеты корзины.

Обложка файла

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

Страницы в файле

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

Основной файл, разводящий 

Это файл с абстрактными макетами (чтобы не приходилось их каждый раз обновлять) в Figma, ссылка на который есть абсолютно у каждого (может быть и в другой программе, например, в Notion). В нём «абстрактно» описана структура приложения, сайта, компании и т. д. на подобии user flow, но не детально. Вы можете подписать всё, что угодно, но я делаю всегда так:

1. Размещаю ссылку на файл;

2. Подписываю кто ответственный;

3. Оставляю сылку на контакт или чат, что бы нажал и уже в чате;

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

Требования к файлу 

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

• Файл с основными макетами раздела в организации может быть только один. Не может быть два файла с флоу оформления покупки, например;

• Страница в файле с разделом может быть только одна в организации, не может быть две одинаковые корзины;

• Ссылка должна вести на файл или страницу, в крайнем случае — на секцию. Макет могут удалить с большей вероятностью, чем файл, страницу или секцию;

• В структуре страницы должно быть всё понятно, без всяких 123-jira и т. д., только названия разделов, так как я, как дизайнер или разработчик, должен понимать сразу, что это за страница;

• Названия страниц разделов также должны быть понятны, например, «Прод»;

• На странице (если это макеты прода) должны быть только основные user flow макетов, без всяких «В будущее» и т. д.;

• Обложка (cover);

• Привязаны должны быть только нужные библиотеки, без всяких неактуальных;

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

Как сортировать макеты внутри организации?

Тут уже кому как больше нравится. Универсального способа нет.

Везде актуальные макеты

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

1. Каждый файл у каждой зоны должен быть библиотекой, и там должны лежать инстансы макетов;

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

Минусы первого способа

1. Каждому дизайнеру после вливания бранча нужно не забывать опубликовывать файл, иначе изменения не придут другим;

2. Нужно принимать обновления с разных файлов для поддержания актуальности файлов;

3. Обновления влияют на бранчи, создают конфликты и т. д., так что нужно быть аккуратным и бдительным.

Плюсы первого способа

У всех всегда будут только актуальные макеты и актуальные user story.

А если Я постоянно делаю микро флоу из разных разделов?

Представим, что вы сегодня делаете микро-флоу из корзины, а завтра — с главной, и т. д. Как тогда с этим жить? На самом деле выхода тут два:

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

2. Вы делаете это микро-флоу и кладёте его в раздел корзины другого дизайнера, подписывая свою зону, чтобы владелец понимал и не трогал вашу зону ответственности. Да, сложно, да, нужно быть аккуратным и т. д., но простите меня за честность. За что вы получаете деньги? За то, чтобы быть неряхой? Вы получаете деньги потому, что вы в IT и умеете думать, а не за фразы типа «Ой, забыл, в прод пустил неактуальные макеты» и т. д. Дизайнер — это тот же разработчик, а не художник, как думают 90% дизайнеров.

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

Итог

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

🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡

Telegram канал   |  vc.ru