Статическое электричество заявило: Новые свойства компонентов Figma были опубликованы уже некоторое время, и я могу только сказать, что ими действительно легко пользоваться. Но есть еще много студентов, у которых есть вопросы. Сегодня Статическое электричество перевело полное руководство по свойствам новых компонентов Figma для всех. Приходите и учитесь вместе, друзья! Сначала собери его, а потом прочитай~

В мае 2022 года Figma представила несколько новых функций во время Config 2022 (ежегодной конференции Figma), но есть одна, которая, на мой взгляд, является самой мощной: свойства компонентов. Я экспериментировал с этой функцией последние два месяца, и вот руководство, охватывающее все, что нужно знать о свойствах компонентов.

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

Что такое свойства компонента?

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

Зачем использовать свойства компонента?

Основная причина использования свойств компонента заключается в том, что это уменьшает количество вариантов, которые нам нужно создать для каждого компонента, чтобы охватить все возможности. Например, я создал кнопку трех типов: основную, дополнительную и дополнительную. У каждого есть 4 состояния: включено, при наведении, в фокусе и отключено. Кроме того, каждый из них имеет два значка, один слева и один справа, а также текстовую метку. До свойств компонента мне нужно было сгенерировать 48 вариантов, но для свойств компонента я сделал это только с 12 вариантами.

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

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

Тип недвижимости

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

Свойства обмена экземпляров

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

Когда использовать Свойства обмена экземпляров？

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

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

текстовый атрибут

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

Когда использоватьтекстовый атрибут？

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

Логические свойства

На мой взгляд, это самый мощный атрибут. Логическое значение — это термин, используемый в коде для обозначения истинного или ложного значения. Используя это свойство, вы можете скрывать или показывать элементы в компоненте. Например, давайте посмотрим на кнопку, содержащую значок. Если вы хотите, чтобы значок отображался внутри кнопки, включите его (true). Если нет, переключите его в положение OFF (ложь).

Когда использовать Логические свойства？

Логические свойства отлично подходят для отображения и скрытия слоев. Например, для кнопок со значками и без них.

Варианты

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

Когда использовать Варианты?

Если вы хотите сделать разные размеры и/или цвета,Пожалуйста, используйте Варианты. Например,Создайте кнопку с разными состояниями, например включенной, наведенной и отключенной.

еще одна вещь,Если вы хотите использовать интерактивные компоненты,Вы должны использовать Варианты.

Как добавить свойства в Figma?

В качестве первого шага вам необходимо создать компонент. Например, если вы хотите создать компонент кнопки, сначала необходимо завершить создание кнопки, а затем щелкнуть значок вверху.

Свойства обмена экземпляров

Добавить Свойства обмена экземпляров,Выберите слой и щелкните значок рядом с именем слоя в меню справа. Назовите это свойство,Например «значок»,и установите значение по умолчанию.

текстовый атрибут

Чтобы установитьтекстовый атрибут,Пожалуйста, выберите текстовый слой,Затем существовать в разделе контента правого меню,Нажмите на значок. Укажите имя слоя,Затем укажите значение в поле ввода существующего значения.,Например: «кнопка»

Логические свойства

Выберите слой,Тогда существуют части слоя,Нажмите на иконку, чтобы добавить Логистика свойства. Дайте ему имя, например «Показать значок», и установите для него значение true или ЛОЖЬ. Когда вы установите его на true Он отображается по умолчанию, когда false, оно не будет отображаться по умолчанию.

Варианты

Вы можете добавить Варианты из правого меню.

первый,Создадим группу Варианты. Выберите компоненты,Нажмите значок плюса в разделе свойств.,Затем выберите «Варианты».

Затем,существуют в правом меню,Назовите свойство «Государство».,Название Варианты «Включить». Выберите компонент «Варианты» и нажмите значок «плюс», чтобы создать новый вариант. Теперь у вас есть новый вариант существования. Например,Если вы хотите создать кнопку наведения,Пожалуйста, измените его цвет со включенного на наведение,И назовите это наведением. Теперь у вас есть набор компонентов Варианты, который содержит два Варианта.

Как редактировать свойства в Figma?

Организация свойств

Вы можете отсортировать список свойств, выбрав набор компонентов и перетащив элементы в список из меню справа.

Изменить название свойства

Изменить название свойства можно двумя способами:

1. Дважды щелкните имя свойства компонента в правом меню.

2. Нажмите значок сведений и измените имя в окне.

Изменить порядок Вариантов в списке

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

существовать Варианты На линии,Нажмите значок сведений. существовать в открытом окне,Параметры перетаскивания устанавливаются здесь в порядке Figma, в котором они будут отображаться в списке.

Добавьте описание и ссылку

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

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

Совет для профессионалов: присвоение имен свойствам

У нас не может быть свойств с одинаковым именем. Например,для кнопки,мы не можем Логические Свойствам и свойствам обмена присвоено одно и то же имя, то есть «значок». Преодолеть это можно существовать Логические Добавьте слово «Показать» перед словом «Значок» в свойствах.

Старый трюк — добавить пробел после слова «значок» в одном из свойств. Следовательно, логические и обменные значения будут иметь одно и то же имя свойства.

Быстрая замена компонентов

Если хочешь Быстрая замена компоненты, вы можете разместить их все на одной странице и одной чертежной доске. Поскольку все они будут находиться на одной странице, они появятся прямо в окне обмена, и вам не придется перемещаться по ним, чтобы найти их. By View Me существует Figma Гибкие шаблоны с компонентами с прорезями, доступные сообществу. Figma файл, чтобы узнать, как это работает.

Список недвижимости

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

Исходный текст: https://uxplanet.org/figma-comComponent-properties-548728f25392.

Автор: Эдвард Чечик Перевод: Статическое электричество