Назад

Карта файлов Фигмы

25 мая 202460

У меня в Фигме, огромное число проектов по работе. Бывало такое, что меня спрашивают по задаче: «Лёш, слушай, я помню мы делали для клиента отдельную страницу оформления заказа, скинь, плиз, фигму, а то я не нашла». Окей, полез искать, и провозился в поисках 15 минут, после чего вспомнил, что искал не там...

Свою продуктивность в Фигме организовать легко, всю мою проблему решают папки, в которые всё можно разложить по проектам. Папки решают проблему дезориентации. Но к папкам есть доступы только у дизайнеров. А проекты нужны менеджерам для демонстрации или проверки, тестировщикам, фронтенд разработчикам. Всем раздать доступы не получится. А постоянное дёргание «скинь ссылку на Фигму» утомило, отвлекает от работы.

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

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

Если я в фигме, то список можно сделать нагляднее, показать проекты, связи между ними. 

Сначала я придумал, как можно визуализировать файл Фигмы:

Я отобразил его виджетом. Каждый файл — это преимущественно клиент, то есть компания, для которой разрабатывался персональный дизайн B2B-площадки. Для быстрого поиска глазами я разместил логотип компании. Менеджеры чаще ищут именно по компаниям и знают их логотипы наизусть.

Название файла — чаще всего это название компании. 

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

Индикатор персонального решения говорит о том, что для этой компании реализован большой проект.

Ссылка на готовый сайт компании — реализация фронтенд разработчиков.

У некоторых клиентов есть только лого и название — это значит что для них были выполнены базовые работы.


Все виджеты, то есть все файлы я рассортировал по папкам:

На скриншотах видны стрелки. Ими я показал связанные проекты.

Все разработки выполнены в едином визуальном стиле. Правила визуального стиля диктует UI кит. UI кит — это составляющая дизайн-системы под названием B2B Движение.

Если смотреть в масштабе, то получилась карта. Интерактивная карта по всем проектам и файлам. С иллюстрацией связей между файлами. 

Ну и вишенкой на торте тут является встроенный в Фигму поиск по странице, чтобы им воспользоваться нужно зажать клавиши ⌘ + F, если у пользователя MacOS или Ctrl + F, если Windows. Такую подсказку я расположил вверху карты, ее можно увидеть при большом отдалении, что логично:

Поиск работает замечательно:

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

Читать ещё