Знакома ситуация, когда вы хотите найти какие-либо макеты другого дизайнера, а перед вами — куча пространств с кучей папок с файлами, а в файлах — куча непонятных страниц? И в итоге получается непонятное флоу, у которого актуальных макетов одной и той же страницы 100500, и все они лежат в разных файлах. В итоге вы, как первобытный дизайнер из Photoshop, идёте в чат и начинаете выпрашивать макеты, которые должны были найти за 5 минут. Было такое? Коллеги явно спасибо не говорили!
Как такое решить?
Я сделал небольшой мануал о том, как лучше организовывать файлы в Figma, чтобы другим дизайнерам и разработчикам, да и просто новеньким, было понятно, где и что лежит, как найти ответственного и т. д.
Как устроена организация файлов
Пространство (тима)
Создается пространство стрима или продукта с понятным названием для всех. Не надо создавать и держать пространства просто так, тем более называть их абстрактными именами — так вы только добавите шума в поиск.
Папка (раздел)
Далее в пространстве (тиме) создаёте папку и называете её по той же самой логике, что и пространство.
Файл с макетами
Файлы в папках создаются по принципу: один актуальный файл для раздела или даже нескольких разделов. Например, у вас есть файл с разделом корзины, и в нём уже лежат только актуальные макеты корзины.
Обложка файла
Обложки в идеале должны быть одинаковыми везде, плюс-минус, и нести в себе название раздела. Они не должны быть шумными, должны легко считываться и содержать только ту информацию, которая необходима, без всяких аватаров компании и т. д., что может мешать быстрому восприятию информации.
Страницы в файле
Страницы в файле должны быть разделены на разделы, если это необходимо и у вас там несколько страниц. Например, раздел с актуальными макетами, в работе и т. д. Главный посыл формирования страниц в том, чтобы я, как дизайнер, зашёл и сразу увидел раздел только с актуальными макетами. Например, страница с флоу корзины, и там лежат только актуальные макеты. Весь остальной рабочий процесс лежит либо на отдельной странице, либо в другом файле — так будет даже лучше. Ни в коем случае не должно быть 100500 макетов и страниц с непонятными названиями задач из Jira, с непонятными короткими флоу в 1-2 макета и т. д., только актуальные макеты раздела — и всё.
Основной файл, разводящий
Это файл с абстрактными макетами (чтобы не приходилось их каждый раз обновлять) в Figma, ссылка на который есть абсолютно у каждого (может быть и в другой программе, например, в Notion). В нём «абстрактно» описана структура приложения, сайта, компании и т. д. на подобии user flow, но не детально. Вы можете подписать всё, что угодно, но я делаю всегда так:
-
Размещаю ссылку на файл;
-
Подписываю кто ответственный;
-
Оставляю сылку на контакт или чат, что бы нажал и уже в чате;
На этих абстрактных макетах должно быть понятно, что за зона, чья зона (дизайнер или тимлид), куда она ведёт и т. д. Можно, конечно, сделать вместо абстрактных макетов реальные макеты, но тогда они должны быть компонентами с опубликованными библиотеками или библиотекой одного файла.
Требования к файлу
С разводящего основного файла ссылки ведут на файлы с актуальными макетами, которые соответствуют продукту. Требования к файлу следующие:
-
Файл с основными макетами раздела в организации может быть только один. Не может быть два файла с флоу оформления покупки, например;
-
Страница в файле с разделом может быть только одна в организации, не может быть две одинаковые корзины;
-
Ссылка должна вести на файл или страницу, в крайнем случае — на секцию. Макет могут удалить с большей вероятностью, чем файл, страницу или секцию;
-
В структуре страницы должно быть всё понятно, без всяких 123-jira и т. д., только названия разделов, так как я, как дизайнер или разработчик, должен понимать сразу, что это за страница;
-
Названия страниц разделов также должны быть понятны, например, «Прод»;
-
На странице (если это макеты прода) должны быть только основные user flow макетов, без всяких «В будущее» и т. д.;
-
Обложка (cover);
-
Привязаны должны быть только нужные библиотеки, без всяких неактуальных;
-
Все изменения вносятся через бранчи (если нет доступа к бранчам, то делаем через черновики — процесс тот же, но подольше).
Как сортировать макеты внутри организации?
Тут уже кому как больше нравится. Универсального способа нет.
Везде актуальные макеты
Если хочется, чтобы в каждом файле у разных дизайнеров из разных зон были только актуальные макеты, то выхода два:
-
Каждый файл у каждой зоны должен быть библиотекой, и там должны лежать инстансы макетов;
-
Или не брать чужие макеты, просто оставлять блок с ссылкой, которая ведёт на нужный раздел или секцию — по мне, это самый простой и идеальный способ.
Минусы первого способа
-
Каждому дизайнеру после вливания бранча нужно не забывать опубликовывать файл, иначе изменения не придут другим;
-
Нужно принимать обновления с разных файлов для поддержания актуальности файлов;
-
Обновления влияют на бранчи, создают конфликты и т. д., так что нужно быть аккуратным и бдительным.
Плюсы первого способа
У всех всегда будут только актуальные макеты и актуальные user story.
А если Я постоянно делаю микро флоу из разных разделов?
Представим, что вы сегодня делаете микро-флоу из корзины, а завтра — с главной, и т. д. Как тогда с этим жить? На самом деле выхода тут два:
-
Вы делаете флоу у себя в файле, и они остаются там. Но тут минус способа в том, что, например, если у вас микро-флоу корзины, а корзина лежит совсем в другом файле, то далеко не все догадаются, как воссоздать всю картину корзины. Нужно ходить по файлам, смотреть и выискивать и т. д.
-
Вы делаете это микро-флоу и кладёте его в раздел корзины другого дизайнера, подписывая свою зону, чтобы владелец понимал и не трогал вашу зону ответственности. Да, сложно, да, нужно быть аккуратным и т. д., но простите меня за честность. За что вы получаете деньги? За то, чтобы быть неряхой? Вы получаете деньги потому, что вы в IT и умеете думать, а не за фразы типа «Ой, забыл, в прод пустил неактуальные макеты» и т. д. Дизайнер — это тот же разработчик, а не художник, как думают 90% дизайнеров.
Второй способ мне лично нравится больше: зона одна, макеты одни, не нужно ничего искать и т. д. Всё предельно понятно.
Итог
Если соблюдать данную структуру файлов и поддерживать порядок, то любой в вашей команде быстро разберётся и будет находить макеты за считанные минуты, а не тратить кучу времени на поиски, отвлекая попутно дизайнеров, которые сами же в этой неразберихе и виноваты. Надеюсь, данная статья принесёт вам много пользы.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡
Автор: kto_to_v_focuse