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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Варианты — очень гибкая функция. Они дали нам много возможностей масштабировать дизайн-системы и ускорить рабочий процесс. У вас есть другие советы по использованию вариантов? Дайте мне знать в комментариях, и другие тоже их узнают!

Чтобы облегчить начало работы с вариантами, я приготовил для вас небольшой подарок. Файл включает два элемента управления пользовательского интерфейса: кнопку и переключатель, они объединены как варианты. Не стесняйтесь получить его отсюда: Образец вариантов Figma

Если вы хотите увидеть более расширенное использование вариантов, не стесняйтесь проверить мой 🧰 User Flow Kit . Вы также можете прочитать другие мои ✍️ Учебники по дизайну пользовательского интерфейса. Статья изначально была опубликована в моем блоге.

 Изображение для сообщения

Пааван

3 ноября 2020 г. · чтение 4 мин.

Снимок экрана компонента кнопки, установленного в Figma, который использует новую функцию вариантов.  .

На прошлой неделе Figma выпустила обновление для познакомьте всех с функцией «Варианты». Впервые о вариантах было объявлено еще в сентябре на выставке Config Europe 2020. Теперь они доступны всем, кто использует Figma в браузере или в приложении для ПК.

Давайте посмотрим, как они работают.

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

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

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

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

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

Итак, если ваша система дизайна была настроена так, что кнопка создается следующим образом:

> Кнопка/основной/большой/со значком/наведением

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

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

Панель нового экземпляра на боковой панели Figma, показывающая варианты вариантов.

Все это может звучать как действительно хороший способ управлять состояниями компонентов . Поэтому вы, вероятно, задаетесь вопросом, как и я, почему было использовано название «варианты». Уэйн Нг из команды Figma пролил свет на это в Twitter, поделившись отрывком из теста юзабилити, который Figma провела с командой Fidelity, которая тестировала раннюю бета-версию Variants.

Из этого клипа:

[Называя это] «состояния» ослабляют его силу … Он заставляет вас думать просто о состояниях кнопки или о состояниях объекта, а не о «супер настраиваемом компоненте, с помощью которого вы можете делать все, что захотите, с помощью… функции»

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

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

Однако это может быть что-то, что скоро появится. Еще в сентябре на Config Europe 2020 команда Figma продемонстрировала новую функцию для прототипирования простых взаимодействий компонентов, что означает, что вам не нужно подключать каждую итерацию состояния компонента при создании прототипа. Вы можете посмотреть видео здесь. Он состоится в январе 2021 года, и я очень жду этого.

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

Варианты также приблизят ваш дизайн к коду.

Обновленная панель Inspect позволяет разработчику копировать набор свойств одним щелчком мыши.

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

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

Начать лучше всего просто чтобы попробовать!

Снимок экрана Figma, показывающий, где находится кнопка

Если у вас есть файл Figma с система дизайна или даже система с несколькими схожими компонентами придадут Вариантам шанс. Выберите группу компонентов и нажмите волшебную кнопку Объединить как варианты на боковой панели. Пока они помечены свойствами, разделенными разделителем ‘/’, он будет работать автоматически.

(Я бы, вероятно, сначала продублировал файл, на всякий случай, если вам нужно вернуться .)

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

Скриншот официального файла Figma Variants Playground.

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

Изображение для сообщения

Оцените статью
clickpad.ru
Добавить комментарий