Как организовать файлы в Figma?

За два года я успела попробовать много способов хранения и структуризации файлов в Figma. Эта статья сфокусирована на работу в продуктовых командах, но возможно в опыте студии это тоже будет полезно.

Не забудь, когда организовываешь

Когда первый раз создавала структуру файлов в Figma, моя ошибка была в том, что я недостаточно общалась на эту тему с другими дизайнерами, разработчиками и менеджерами. Я делала все так, как мне удобно.
При разработке такой структуры важно учитывать удобство всех, кто будет работать в Figma. Лучше всего провести интервью, чтобы выслушать и понять каждого, кто участвует в процессе разработки. Составьте таблицу с потребностями каждого человека, чтобы не забыть об этом. В будущем, когда вы будете писать документацию вам очень пригодится такая таблица.
Также очень важно учитывать особенности вашей разработки. Как часто ставят задачи? Где ставят задачи? Как и кто эти задачи описывает?
Обязательно спросите чем пользуются разработчики при верстке макетов, есть ли у них плагины, которые упрощают работу. Уделите время на то, чтобы при переходе на новый инструмент упростить работу, а не усложнить.

Уделите время на то, чтобы при переходе на новый инструмент упростить работу, а не усложнить.

Какие варианты?

Такой тип структуры подходит, если создаете проект на фрилансе или в студии. Файл такого типа легко передавать сразу в разработку. В нем можно держать необходимые компоненты. Также не нужно использовать платную версию Figma для связи с компонентами.
Минус такого файла в том, что его сложно развивать и масштабировать — в Figma есть предел размера одного файла (Посмотреть можно в Бургер>View>Resource Use). Также будет сложно строить дизайн систему на базе такого файла.

Такой тип структуры рекомендую использовать для разработки продуктов. Для поддержки нужна платная версия Figma. Плюс в том, что компоненты проекта можно использовать в других файлах. Это упрощает и ускоряет работу, если в команде больше двух дизайнеров.
Минус в том, что на поддержания дизайн системы нужно тратить время и ресурсы дизайнеров и разработчиков.

Такой тип структуры похож на прошлый вариант, но сложнее за счет старого мастер файла. Подходит для больших
проектов, где важно поддерживать версии продукта. Если собираете приложение, рекомендую в Old Master File поддерживать соответствие версии с App store или Goole Play

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

Ошибки

Не нужно разделять Design System на отдельные файлы с иконками, компонентами и другими объектами. Проблема может возникнуть, когда нужно переносить компоненты из Tasks в Design System. В некоторых ситуациях этим можно пользоваться, но в моем случае такая структура принесла много проблем. Figma не поддерживает связь с компонентами при переносе из Tasks в Design System. Чтобы сохранить связь все макеты вместе с компонентами нужно вставить в Design System, обновить, а потом вернуть макеты в Tasks.

Не забывайте поддерживать актуальность вашей Design System и Master File ❤️

Facebook
Instagram
Behance
Dribbble

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniela Muntyan

Focused on mobile interfaces and interaction design. Design Director at GR8 Tech danielamuntyan.com