Разбираемся в Components Properties Figma за 5 минут
Прошло уже больше недели с Figma Config 2022 и выхода большого количества обновлений, а до сих пор нет полноценного гайда по новым Components Properties. Исправляемся!
1. Три параметра
Boolean — позволяет менять видимость слоя компонента и имеет два значения true/false.
Применим для всех слоев компонента.
Text — позволяет менять текст через панель properties.
Применим только к текстовым слоям.
Instance Swap — позволяет заменять вложенные компоненты.
Применим только для вложенных компонентов.
2. Как добавить
Выберите компонент, нажмите «+» на панели Properties и выберите свойство, введите название — параметр создан. Теперь выберите слой и привяжите его к нужному свойству.
Выберите нужный слой, нажмите на иконку свойства и выберите Create property, введите название, свойство появится на панели Property.
Скрывает не только слои но и связанные с ним параметры из панели properties.
4. Instant swap
Чувствителен к иерархии. Он предлагает к замене компоненты находящиеся с ним на одном уровне (file, page, artboard). Если вы хотите ограничить список предлагаемых instanс’ов — объедините их в один artboard.
Здесь кроется первое ограничение — через properties вы не можете переключать варианты вложенного компонента. Для того чтобы работал Instant swap это должны быть самостоятельные компоненты не объединенные как variants.
5. Изменение Variants
Если раньше при добавлении варианта сразу создавалась копия компонента, сейчас (хоть это и называется по-старому Variant) по сути добавляет новое свойство. Копировать компонент и назначать свойство нужно самому.
При выборе слоя внутри компонента с вариантами, figma предложит выбрать подобные (иконочка прицела).
Что это всё нам даёт?
- Самое очевидное применение — сокращение больших матриц вариантов. Иконки на кнопках, нотификации на табах/аватарах и многое другое можно теперь сделать boolean props без дублирования.
- Изменение текста пригодится если с макетом взаимодействуют менеджеры когда нужно будет поменять название кнопки например по требованию комплаенса. Меньше риск что они что-то смогут повредить.
- С Instant Swap не нужно будет постоянно проваливаться в слои компонента чтобы что-то изменить (логотип компании, иконку и т/д).
Что же такое Components Properties на самом деле?
Как по мне это скорее концептуальный разворот нежели банальное обновление.
Как эволюционировала работа с компонентами:
- В самом начале каждое состояние элемента нужно было делать отдельным компонентом, артборды были ограничены в адаптиве, нельзя было использовать вложенные компоненты — библиотеки были перегружены компонентами под каждое состояние и каждый размер интерфейса.
- Auto layout позволил сократить количество компонентов завязанных на разнице в размерах, адаптивность так же позволила сократить некоторые состояния скрывая какие-то элементы. Но — внутри стало появляться большое кол-во скрытых слоёв.
- Variants привнесли иерархию, убрали необходимость проваливаться внутрь компонента чтобы включить или выключить какой-то элемент … Но — вернули большие матрицы компонентов.
- Components Props решили проблему больших матриц компонентов, в каком-то смысле вернул нас к управлению состояниями видимостью и сделал это удобнее. Но — были полностью переосмыслены варианты.
Мне кажется впереди нас будут ждать больше новых свойств, но и варианты никуда не денутся, так как без них не будут работать интерактивные компоненты. Спасибо за внимание.
18 показов
16K открытий
3 комментария
вспоминается панель работы с символами в Sketch.
Развернуть ветку
Вижу очень большую проблему в свойстве булин на данный момент. Инстансы внутри компонента не удаляются, а скрываются, что влечет за собой такую-же перегруженность больших проектов. Если такая функция достаточно полезна в нотификациях, которые могут появиться раз в двадцати экранах, то абсолютно губительна, например, для инпута, где на одном экране их может быть тридцать, и при дублировании экранов и походу по сценарию эти скрытые инстансы будут плодиться в геометрической прогрессии.
Развернуть ветку
До вариантов в целом так все и делали инстансы — просто был скрытый слой и ты включал его когда нужно. сейчас к этому сделали ручку.
Основная проблема — многие упарываются в создании компонентов, тут уже только постигать минимализм
10 советов по компонентам Figma
Советы и лучшие практики для работы с компонентами Figma Рекомендация: Повторяйте действия за мной в Figma Используйте созданный мной файл Figma Community.
1. Сочетания клавиш для работы с компонентами
- OPTION + CMD + K= Создать компонент
- OPTION + CMD + B= Отсоединить экземпляр
- OPTION + CMD+ O= Командная библиотека
- OPTION+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)
Windows:
- ALT + CTRL + K= Создать компонент
- ALT + CTRL + B= Отсоединить экземпляр
- ALT + CTRL + O= Командная библиотека
- ALT+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)
2. Поменять местами компоненты
Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст. Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего.
3. Именование компонентов
От того, как вы назовете свои компоненты, будет зависеть их организация. Если вы используете разделение косой чертой, Figma сгруппирует эти компоненты в меню экземпляра, что упростит их поиск. Figma использует следующий путь file / page / frame / ** name ** / для организации наших компонентов. Так, например, если у меня есть раскрывающийся компонент, я бы поместил его в отдельный фрейм Figma под названием «Inputs», а затем назвал бы компонент Dropdown / Active. Figma будет использовать это имя для создания папки «Inputs», а затем внутри папки «Dropdown». Вы также можете назвать свой компонент Inputs / Dropdown / Active, если основной компонент не находится внутри фрейма под названием «Inputs».
4. Создавайте компоненты забавной формы
Используя мощь логических операций для вычитания фигур и установки ограничений для этих фигур, мы можем создать аккуратно выглядящие компоненты (Спасибо Роджи Кингу). Для этого следуйте инструкциям Роджи на YouTube (начало с 32:50).
5. Используйте базовые компоненты
Используя базовые компоненты для наборов вариантов, мы можем внести одну корректировку в базовый компонент, и он внесет изменения во все варианты экземпляров. Для этого создайте базовый компонент со всеми элементами, необходимыми в различных вариантах для значений по умолчанию, иконки слева, иконки справа, наведения, активного состояния, ошибки и т. д. Это так же просто, как скрыть ненужные нам элементы в разных вариантах. Также полезно добавить модификатор перед именем компонента, который скроет его из библиотеки, когда вы будете готовы опубликовать компоненты. Для этого добавьте «.» или «_» перед названием компонента (например, «_Profile Card Base»).
6. Меню быстрой вставки
Добавляйте компоненты за секунды с помощью меню быстрой вставки.
7. Следуйте принципам атомарного дизайна
Атомарный дизайн Брэда Фроста – это методология создания дизайн-систем. Она помогает нам организовать компоненты для эффективного масштабирования нашей дизайн-системы и поддерживать порядок внутри вложенных компонентов. В атомарном дизайне есть пять различных уровней:
Атомы – это основные строительные блоки, такие как метка формы, поле ввода или кнопка.
Молекулы – это группы атомов, связанных вместе, например, метка формы, ввод и кнопка, объединенные вместе в форму.
Организмы состоят из похожих и / или разных типов молекул. Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.
Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.
Страницы – это особые экземпляры шаблонов. Здесь контент-плейсхолдер заменяется реальным репрезентативным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь. Чтобы узнать больше, посмотрите это видео на YouTube и прочтите книгу Брэда Фроста «Атомарный дизайн»
8. Используйте компоненты слота
Слоты позволяют использовать плейсхолдер, который мы можем заменить нужным нам контентом. Например, создать модальный компонент может быть не просто, потому что не все модальные окна будут иметь внутри себя одинаковый контент. Чтобы решить эту проблему, мы можем использовать технику под названием «слоты» (спасибо, Rogie, Ben Adelt, и Ridd). Просто вставьте компонент слота туда, где вам понадобится гибкий контент, и при необходимости поменяйте его.
9. Используйте несколько библиотек
В более крупных организациях с большим количеством компонентов и стилей, необходимых для поддержки множества различных платформ и продуктов, библиотека может очень быстро расти. Если пользователям нужен только небольшой набор этих компонентов, им все равно придется отсеивать множество похожих компонентов, которые им никогда не понадобятся. Попробуйте организовать свои компоненты в разных файлах, например:
- мобильные компоненты
- десктопные компоненты
- активы бренда и цвета
- и так далее…
10. Экспериментируйте с компонентами
Загрузите файл сообщества, чтобы поэкспериментировать с ним. Компоненты очень универсальны и могут использоваться для создания самых разных вещей, например, анимации с использованием интерактивных компонентов или забавных паттернов. Используя плагин и компоненты Rotate Copies, можно создавать забавные и динамичные арты прямо внутри Figma!
Как разгруппировать компоненты в Figma?
В фигма есть компонент. Появилась необходимость его изменить. Как разгруппировать существующий компонент, чтобы была возможность его редактирования?
- Вопрос задан более трёх лет назад
- 41242 просмотра
Комментировать
Решения вопроса 1
Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов
Если речь о дочернем компоненте, то вот так:
Ответ написан более трёх лет назад
Как разломать мастер-компонент в Figma?
Делаем копию мастер-компонента. Кликаем правой кнопкой мыши по нему и выбираем Detach Instance. А мастер-компонент просто удаляем.
2. С использованием плагина
Устанавливаем плагин Detach Component. Выбираем нужный компонент, который нам нужно разломать. Включаем компонент и все готово
Почему мастер-компонент нельзя так просто разломать? Полагаю, что в этом есть некая задумка разработчиков, чтобы пользователь случайно не разломал мастер-компонент)
Что думаете по этому поводу?
#вебдизайн #вебдизайнер #фигма #figma #разработкасайтов #сайтыподключ