Советы и хитрости о вариантах в Figma

Советы и хитрости о вариантах в Figma
На чтение
22 мин.
Просмотров
16
Дата обновления
11.11.2024

Талион

7 декабря 2020 г. · чтение за 5 минут

 Featured Image

Образец варианта

Когда вы используете компонент Variant, вы можете настроить его ( выберите другие варианты) из раздела на панели справа.

Создать варианты очень просто. Выберите группу компонентов и нажмите на правой панели параметр «Объединить как варианты».

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

Создание варианта кнопки

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

Если у вас есть компоненты, названные в соответствии со следующим соглашением (пример на скриншоте выше):

  • Button/Default/Primary
  • Кнопка/По умолчанию + Значок/Основной
  • Кнопка/По умолчанию/Дополнительный
  • Кнопка/По умолчанию + Значок/Дополнительный

После создания градиентов у вас будет возможность настроить следующие это в компоненте «Кнопка»: наличие значка и стиля.

Я обновил свой User Flow Kit, чтобы получить большинство вариантов. Это дало мне возможность узнать много нового о самой функции. Ниже я хотел бы представить вам несколько советов по практическому использованию..

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

  1. Вы должны сохранить только два значения в свойстве Variant.
  2. Значения свойств должны быть названы «Да , Нет »,« Вкл., Выкл. »Или« Истина, Ложь ».

Итак, из приведенного выше примера мы можем переименовать свойство в« Значок »и значения« Истина » , «Ложь».

 Вариант ярлыка

Свойства варианта

Конфигурация варианта кнопки

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

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

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

Назовите компоненты так, чтобы они имели стиль — Основной, Дополнительный, Нейтральный, Ошибка, Успех и т. Д. Благодаря этому вы сможете настраивать их на лету с вариантами.

Конфигурация варианта блока

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

Варианты кнопок

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

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

Хотя эта функция очень полезна, есть некоторые вещи, которые можно улучшить.

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

Было бы здорово, если бы прототипы могли получить больше возможностей вариантов.

0 Комментариев
Комментариев на модерации: 0
Оставьте комментарий