Обложка канала

Figma Tips

4297 @figmatips

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

Figma Tips

8 лет назад
Открыть в
Чем круты последние изменения в организации компонентов

Ранее я сухо описал новую иерархию в дропе оверрайдов, а сейчас опишу, что это дает. Будет полезно понимать тем, кто еще не адаптировал свои библиотеки компонентов и задается вопросом, что случилось и зачем вообще.

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

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


Значительно упрощаются названия компонентов

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

Например, если все иконки у нас одного размера, то компонент «Icons / Arrow Right» превращается в «Arrow Right» во фрейме «Icons».


Автоматическое переименование экземпляров теперь радует

Когда перезаписываешь экземпляр, он сбрасывает свое имя к имени своего компонента. Ранее дико раздражало, потому что названия веток были очень большими — панель слоев быстро превращалась в мясо, если не возвращал названия обратно. Теперь это крутая фича, потому что названия компонентов стали короче.


Легко переименовать первые две ветки в структуре компонентов

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


Легче экспериментировать с компонентами

Потому что их можно "изолировать" на конкретной странице и внутри конкретного фрейма. Помогает, когда нужно протестировать новые версии компонентов или на первых этапах дизайна, когда все компоненты могут быть дико разбросаны и называться просто «Component» или «Rectangle».


Меньше усилий, чтобы поддерживать структуру компонентов в чистоте

Простые ветки, легче названия, легче переименовывать, легче экспериментировать, согласованность с вкладкой компонентов — все это экономит много времени и упрощает рутину.


Как адаптировать текущую структуру к новой?

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



#обзор_функционала
#дизайн_системы
#подсказки