Для чего нужны компоненты в фигме

ЗАЧЕМ НУЖНЫ КОМПОНЕНТЫ В ФИГМЕ

В Figma компоненты – один из важных инструментов для создания современного дизайна интерфейсов. Это объекты, которые могут быть переиспользованы многократно на макете или в разных проектах. У них есть множество преимуществ, благодаря которым компоненты являются неотъемлемой частью рабочего процесса дизайнера.

Первое преимущество компонентов – это экономия времени. Создав один раз компонент, его можно использовать повторно в разных проектах. Также, если понадобится поменять какие-либо настройки в компоненте, не нужно искать его везде, где он используется, достаточно изменить настройки в одном месте.

Второе преимущество – это поддержание единого стиля. Компоненты позволяют держать одинаковые элементы в разных частях макета. Это также может быть полезно, если необходимо быстро поменять стиль приложения.

Третье преимущество – это корректная работа коллег. Если дизайнер пользуется компонентами, другие члены команды будут знать, как использовать определенный элемент. Это может быть пригодится, если разработчикам нужно будет сверстать интерфейс,

Все вместе позволяет ускорить процесс работы над проектом, не отвлекаясь на элементарные детали дизайна.

Основы Figma 25 минут. Дизайн, инструменты, прототип.

Как настроить компоненты у ползунка на сайте через варианты в Фигме. Лайфхаки, фишки, секреты Figma

Автолейауты, компоненты и варианты в фигме — Как работать в фигме быстро

[NEW] �� Компоненты в Figma. Советы, лайфхаки, примеры. Новый нескучный курс по Фигме. Урок 7

Компоненты в Figma за 5 минут — Уроки по Фигма 2022

Компоненты в Фигме. Вложенные компоненты, свойства компонентов в Figma

Figma компоненты

Одним из способов в разы ускорить разработку дизайна сайта – использовать компоненты.

Что такое компоненты в Figma? Компоненты в фигме, как основа блочного дизайна.

Компоненты в Figma – это часть дизайна сайта, которая повторяется на всех или некоторых страницах (шапка, подвал, сайдбар). Когда вы меняете что-то в этой части, то аналогичные изменения происходят на всех страницах. Уточнение! Изменения нужно делать на самой первой странице, где вы только создали компонент.

Теперь нагляднее покажу его работу.

Для того чтобы создать компонент нужно на элемент или группу элементов кликнуть правой кнопкой мыши и выбрать соответствующий пункт меню.

После этого его иконка изменится.

Работа с компонентами в Figma часть 2

Это значит, вы создали родительский компонент.

Если вы скопируете данную группу на другую страницу, то ее иконка станет уже другой.

Данная иконка показывает, что это дочерний компонент.

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

Более подробную работу с компонентами я провожу в своих видео уроках. Подпишитесь на мой канал, чтобы получать знания по веб-дизайну.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

Как использовать свойства компонентов в Figma

Недавно Figma анонсировала новые функции, одно из которых это возможность задавать свойства компонентов (Component Properties). Чтобы разобраться как его правильно использовать, я взяла существующий компонент “текстовое поле” и пересобрала его с использованием свойств.

Кто уже долго пользуется Figma, должно быть помнит что раньше для навигации по компонентам нужно было задавать правильные названия и создавать вложенности (папки). Потом в Figma были добавлены варианты, что еще больше упростило навигацию и позволило с легкостью заменять один компонент на другой. Но несмотря на все преимущества этого подхода, чтобы создать сложный компонент, нужно было прорисовать каждый его вариант отдельно, а это сильно загромождает дизайн систему.

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

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

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

Шаг 1

Для начала нужно определить какие повторяющиеся элементы можно добавить в свойства. Например, для текстового поля это будет:

заголовок (label text);
текст (input text);
ошибка (error text);
префикс;
вспомогательный текст (helper text);
иконка.

Для разных вариантов может использоваться разная комбинация свойств. Например, для состояния “Empty” используется только “Label Text”, для состояния “Filled” — нужен уже “Label Text” и “Input Text”, для для состояния “Error” к предыдущим свойствам еще добавится “Error Text” и т.п.

Шаг 2

Далее зададим каждому элементу конктеное свойство. Например чтобы добавить иконку в свойства, нужно ее выделить, и боковом меню выбрать “Apply instance swap property”. После в появившемся окне задать название и выбрать отображение.

Чтобы добавить возможность включать/выключать видимость иконки, для слоя необходимо задать свойство True/False. Для этого нужно снова выделить слой с иконкой и в боковой панели в блоке “Layers” выбрать “Apply instance swap property”, далее в появившемся окне задать свойства видимости этого слоя.

Теперь через свойства можно включать/выключать видимость иконки и заменять ее на другую.

Далее добавим в свойства текст. Для этого нужно его выделить и в боковой панели в блоке “Content” задать название для этого текста. Все эти манипуляции необходимо проделать для каждого текcтового элемента.

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

Как итог с помощью свойств сами компоненты стали выглядеть намного чище, а навигация по ним стала проще.

Спасибо, что прочитали эту статью, если было полезно, дайте знать клапсом ��. Вы можете клапсануть до 50 РАЗ.

Разбираемся в 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 решили проблему больших матриц компонентов, в каком-то смысле вернул нас к управлению состояниями видимостью и сделал это удобнее. Но — были полностью переосмыслены варианты.

Мне кажется впереди нас будут ждать больше новых свойств, но и варианты никуда не денутся, так как без них не будут работать интерактивные компоненты. Спасибо за внимание.

20 показов
16K открытий
3 комментария

вспоминается панель работы с символами в Sketch.

Развернуть ветку

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