Разбираемся в Components Properties Figma за 5 минут
Прошло уже больше недели с Figma Config 2022 и выхода большого количества обновлений, а до сих пор нет полноценного гайда по новым Components Properties. Исправляемся!
1. Три параметра
Boolean — позволяет менять видимость слоя компонента и имеет два значения true/false.
Применим для всех слоев компонента.
Text — позволяет менять текст через панель properties.
Применим только к текстовым слоям.
Instance Swap — позволяет заменять вложенные компоненты.
Применим только для вложенных компонентов.
2. Как добавить
Выберите компонент, нажмите «+» на панели Properties и выберите свойство, введите название — параметр создан. Теперь выберите слой и привяжите его к нужному свойству.
Или...
Выберите нужный слой, нажмите на иконку свойства и выберите Create property, введите название, свойство появится на панели Property.
3. Boolean
Скрывает не только слои но и связанные с ним параметры из панели properties.
4. Instant swap
Чувствителен к иерархии. Он предлагает к замене компоненты находящиеся с ним на одном уровне (file, page, artboard). Если вы хотите ограничить список предлагаемых instanс’ов — объедините их в один artboard.
Здесь кроется первое ограничение - через properties вы не можете переключать варианты вложенного компонента. Для того чтобы работал Instant swap это должны быть самостоятельные компоненты не объединенные как variants.
5. Изменение Variants
Если раньше при добавлении варианта сразу создавалась копия компонента, сейчас (хоть это и называется по-старому Variant) по сути добавляет новое свойство. Копировать компонент и назначать свойство нужно самому.
Bonus
При выборе слоя внутри компонента с вариантами, figma предложит выбрать подобные (иконочка прицела).
Что это всё нам даёт?
- Самое очевидное применение — сокращение больших матриц вариантов. Иконки на кнопках, нотификации на табах/аватарах и многое другое можно теперь сделать boolean props без дублирования.
- Изменение текста пригодится если с макетом взаимодействуют менеджеры когда нужно будет поменять название кнопки например по требованию комплаенса. Меньше риск что они что-то смогут повредить.
- С Instant Swap не нужно будет постоянно проваливаться в слои компонента чтобы что-то изменить (логотип компании, иконку и т/д).
но...
Что же такое Components Properties на самом деле?
Как по мне это скорее концептуальный разворот нежели банальное обновление.
Как эволюционировала работа с компонентами:
- В самом начале каждое состояние элемента нужно было делать отдельным компонентом, артборды были ограничены в адаптиве, нельзя было использовать вложенные компоненты — библиотеки были перегружены компонентами под каждое состояние и каждый размер интерфейса.
- Auto layout позволил сократить количество компонентов завязанных на разнице в размерах, адаптивность так же позволила сократить некоторые состояния скрывая какие-то элементы... Но — внутри стало появляться большое кол-во скрытых слоёв.
- Variants привнесли иерархию, убрали необходимость проваливаться внутрь компонента чтобы включить или выключить какой-то элемент … Но — вернули большие матрицы компонентов.
- Components Props решили проблему больших матриц компонентов, в каком-то смысле вернул нас к управлению состояниями видимостью и сделал это удобнее... Но — были полностью переосмыслены варианты.
Мне кажется впереди нас будут ждать больше новых свойств, но и варианты никуда не денутся, так как без них не будут работать интерактивные компоненты. Спасибо за внимание.
вспоминается панель работы с символами в Sketch.
Вижу очень большую проблему в свойстве булин на данный момент. Инстансы внутри компонента не удаляются, а скрываются, что влечет за собой такую-же перегруженность больших проектов. Если такая функция достаточно полезна в нотификациях, которые могут появиться раз в двадцати экранах, то абсолютно губительна, например, для инпута, где на одном экране их может быть тридцать, и при дублировании экранов и походу по сценарию эти скрытые инстансы будут плодиться в геометрической прогрессии.
До вариантов в целом так все и делали инстансы - просто был скрытый слой и ты включал его когда нужно... сейчас к этому сделали ручку.
Основная проблема - многие упарываются в создании компонентов, тут уже только постигать минимализм