Как делать варианты элементов интерфейса в Figma
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Olyasnow для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.
Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.
Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.
- Выравнивание в Figma: Auto Layout
- Как упростить работу в Figma. Компоненты
9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с вариантами элементов интерфейса, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.
Подготовка компонентов
Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:
Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства
Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:
Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:
Как сделать кнопки с системой названий в Figma
- Сделайте кнопку через Auto Layout и укажите для неё контрастный фон. Подробнее о функции AutoLayout прочитайте в этом материале.
- Дважды кликните на название элемента и напишите Button/Primary. Это будет стиль кнопки по умолчанию.
- Сделайте копию кнопки, добавьте на неё чёрную обводку и уберите фон. При необходимости перекрасьте цвет текста в чёрный, чтобы он читался. Назовите кнопку Button/Secondary — это будет дополнительный стиль.
- Сделайте из каждой кнопки самостоятельные компоненты — нажмите на каждую правой кнопкой мыши и в выпадающем меню выберите Create component. Подробнее о том, что такое компоненты, читайте в этом материале.
Теперь у вас есть два готовых компонента, которые можно превращать в варианты.
Создание вариантов
Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.
Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.
Как воспользоваться вариантом
- Перейдите на панели слоёв во вкладку Assets и перетащите кнопку на макет.
- Выделите появившуюся кнопку и на панели инструментов в блоке Button укажите значение Property 1 — Secondary.
Ваша контрастная кнопка перекрасится в серый:
Добавление новых состояний
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.
Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:
Как добавить новое свойство
- Выделите комбайн с вариантами.
- На панели настроек в блоке Variants нажмите на иконку, затем — Add new property.
- В появившемся поле ввода напишите State (состояние).
- Снова выделите комбайн с компонентами и нажмите на плюсик в правом нижнем углу.
- На панели настроек в блоке Variants напротив слова State напишите Disable. Проверьте значение Property 1 — должно быть Primary.
- Укажите непрозрачность фона вашей кнопки — 50%.
Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:
То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.
С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.
Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:
Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.
Плагин Button Buddy
Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.
Как пользоваться плагином:
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Button Buddy.
- В появившемся меню выберите цвет и радиус скругления кнопок, а затем нажмите на кнопку Create.
У вас на макете появится готовый комбайн с базовыми состояниями кнопки:
Больше о Figma
- 5 полезных плагинов: работа с текстом и шрифтами
- Как рисовать векторные изображения
- Тени в интерфейсах: зачем они нужны и как их рисовать
- Как создать тёмную тему
- Как работать с модульной сеткой
- Как работать с изображениями
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Как в Figma сделать «жидкие» кнопки
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
Иллюстрация: Оля Ежак для SKillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Figma — один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам — интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать «жидкие» кнопки.
В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:
Подготовка компонентов
- Сделайте высокий фрейм, в который должны будут поместиться ваши кнопки. В нашем примере их будет три. Если сразу не угадаете с размером, фрейм можно будет увеличить.
- Добавьте во фрейм круг с чёрной заливкой и размером 90×90 пикселей.
- Добавьте ещё три чёрных круга с размерами 60×60 пикселей и расположите их на одинаковом расстоянии друг от друга.
- Выделите все круги, в боковой панели настроек в блоке Effects нажмите на плюсик и вместо Drop shadow выберите Layer blur. Затем нажмите на и в появившемся окне укажите 10.
- Добавьте поверх всех кругов прямоугольник с цветом заливки #808080. Затем в боковой панели в блоке Layer вместо Pass through укажите Color dodge. Добавьте ещё один поверх предыдущего, измените его цвет заливки на чёрный, а в блоке Layer — Color burn. Для удобства заблокируйте оба квадрата, чтобы в дальнейшем они вам не мешали.
- Добавьте на квадраты любые иконки — они должны стоять над слоями с изменёнными эффектами в Layer, чтобы у них не возникали графические артефакты.
- Чтобы в дальнейшем в анимации не было графических конфликтов, советуем добавить каждую иконку в отдельный фрейм с чёрным фоном. Чтобы это сделать, кликните по иконке правой кнопкой мыши и нажмите Frame selection.
- Проверьте панель слоёв. Иконка самой большой кнопки должна быть в самом верху.
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.
Как в Figma сделать кнопку «читать далее»?
Обращаюсь к тем, кто хорошо разбирается в веб дизайне. Так как я новичок в этом направлении и только начинаю, не все понимаю, поэтому не удивляйтесь, если вам вопросы покажутся глупыми. Как сделать в Figma кнопку читать далее?Или все таки надо какие-то коды использовать.. Есть допустим текст, и потом после него появляется кнопка «читать далее», при нажатии на которую появляется остальной текст. Как сделать такое?
- Вопрос задан более года назад
- 774 просмотра
Комментировать
Решения вопроса 1
Дизайнер внутренних продуктов в KazanExpress
1. Создаешь компонент из 2 элементов — текстовый блок и кнопка, настраиваешь autolayout
2. Добавляешь второй вариант компонента — в раскрытом состоянии
3. Настраиваешь на кнопки анимации, чтобы при нажатии один вариант менялся на другой
Ответ написан более года назад
Дизайн-система в Figma. Часть 2: Кнопки
Продолжаем проектировать нашу дизайн-систему. В прошлой статье мы задали основные стили для текста, цветовую гамму нашего проекта, стили теней, а также создали компонент для плашек. Теперь пришло время поговорить о кнопках.
Проектируя кнопки, следует учесть, что они могут иметь несколько состояний:
- Кнопка в спокойном состоянии,
- Кнопка при наведении,
- Кнопка, подсвеченная при навигации по странице при помощи таба,
- И неактивная кнопка.
Все эти состояния нам необходимо прорисовать.
Мне известны 2 основных способа создания кнопок: кнопки с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с оцентрированным текстом (такую кнопку можно масштабировать, текст при этом всегда будет по центру). В разных ситуациях удобны разные варианты кнопок.
Базовый (родительский) компонент кнопки с использованием Auto Layout
Создайте прямоугольник. Задайте ему необходимый размер и степень скругления углов. Выберите цвет — цвета используйте обязательно из нашей палитры, которую мы создавали в предыдущей статье. В моем примере это будет синий цвет. Если необходимого цвета нет, создайте для него новый стиль. Это позволит в дальнейшем легко менять цветовую гамму всего проекта.
Выберите Text Tool (T) и напишите название кнопки. Задайте стиль текста, который вы определили специально для кнопок (см. предыдущую статью).
Нажмите на иконку с тремя точками в правой панели. Установите настройки, как показано на рисунке. Теперь рамка текста будет масштабироваться вместе с самим текстом по мере набора фразы.
После этого выровняйте слой с текстом по центру относительно нашего прямоугольника. Для этого выделите оба слоя и последовательно нажмите две иконки вверху в правой панели:
Далее нужно выделить оба слоя и в правой панели нажать на создание компонента. Не забудьте дать компоненту членораздельное имя.
Не снимая выделения, в правой панели ищем вкладку Auto Layout и нажимаем плюсик. Теперь, если мы захотим отредактировать текст на кнопке, размер кнопки изменится вместе с этим текстом.
Изменяя два правых параметра на вкладке Auto Layout, можно добиться нужного нам размера отступов по вертикали и горизонтали от границ текста.
Расширяем функционал кнопки
Мы также можем расширить функционал нашего компонента, например, добавить в кнопку иконку каталога или корзины, которые можно будет скрывать или показывать при необходимости.
Рисуем необходимые иконки, задаем им цвет из палитры. запаковываем в компоненты.
Внимание: важно, чтобы размеры компонентов иконок были одинаковыми. В моем случае для кнопок это поле 20×20 пикселей. Иконка внутри необязательно должна занимать все это поле, но сами компоненты должны быть идентичны по размеру.
Сгруппируйте все эти иконки у одну группу и назовите ее членораздельным именем. Чуть позже это нам пригодится.
Теперь копируем одну из иконок (Contrl+d или Comand+d) и помещаем ее внутрь компонента с нашей кнопкой перед текстом).
Остальные иконки пока не трогаем. В конце статьи я покажу, как можно очень быстро манипулировать кнопками.
Теперь нужно на палитре слоев скрыть эту иконку, чтобы наша базовая кнопка была без нее, но при этом иконку всегда можно было отобразить в процессе работы с экземплярами компонента.
Другие состояния кнопки
Наведение
Итак, наш базовый компонент готов. Теперь перейдем к различным состояниям нашей кнопки.
Копируем экземпляр компонента базовой кнопки (Contrl+d или Comand+d). Не снимая выделения с компонента, задаем параметры оформления для этого состояния кнопки: можно поменять, цвет, обводку или даже добавить тень (не забудьте предварительно задать стиль для тени). Можно выделить внутри слой самого текста и поменять его параметры (к, примеру, цвет).
В моем случае было достаточно поменять стиль цвета кнопки, сделать ее немного темнее.
После этого выделяем экземпляр кнопки и снова запаковываем ее в компонент, не забываем дать имя компоненту. Таким образом мы создали компонент, который унаследовал компонент базовой кнопки. Теперь, если мы что-либо поменяем в базовой кнопке (кроме цвета, который мы переопределили, это тут же отразится на состоянии всех других, созданных таким же образом кнопок.
Активность по табу
Вновь создаем экземпляр нашей базовой кнопки.
Придаем кнопке нужный стиль. Я решила, что активные по табу кнопки у меня будут подсвечиваться синим цветом. Как создавать стиль для теней и подсветок я рассказывала в предыдущей статье.
Неактивная кнопка
Для кнопок, на которые еще нельзя нажать (например, не введен код, не заполнены все поля и т.д.), создадим еще один компонент.
Я решила, что такая кнопка будет иметь полупрозрачный фон, чтобы интереснее смотреться не только на белом, но и на на каком-либо неоднородном цветном фоне. Для этого мне пришлось создать новый стиль заливки цвета с прозрачностью в 15%. Также я понизила прозрачность текстового слоя внутри кнопки до 50%. И точно также, как и предыдущие состояния кнопки, запаковала все в новый компонент.
Масштабируемые кнопки
Бывают ситуации, когда необходимо очень четко вписать кнопку в сетку, либо сделать кнопку огромной — по ширине всего контента. В таких случаях Auto Layout не подойдет. Рассмотрим еще один способ создания кнопок.
Начинаем так же, как в предыдущем варианте: создаем прямоугольник, текстовый слой, центрируем их и создаем компонент.
Для текстового слоя задаем Constraints: Center, Center:
Если вы также хотите добавить в такие кнопки иконки, то текст и иконка группируются и на группу настраивается Auto Layout. Сама же группа центрируется при помощи Constraints.
Constraints для фонового прямоугольника: Left+Right, Top+Bottom
Состояния масштабируемой кнопки: Дублируем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем его в новый компонент с настройками Constraints : Left+Right, Top+Bottom.
Auto Layout в данном случае уже не используется.
Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:
Итог
Таким же образом можно создать варианты кнопок другого цвета, кнопки с обводкой и т.д. Главное, все варианты наследовать от одной базовой кнопки, которая будет задавать основные свойства кнопок.
В итоге для своей системы я продумала несколько вариаций кнопок и их состояний. За счет наследования мы можем легко управлять всеми кнопками сразу:
А так можно быстро менять варианты кнопок прямо в макете, отображать дополнительную иконку, которую мы предусмотрели в базовом компоненте, менять ее:
П.С. Наводим порядок
Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.
Если задать грамотные имена нашим кнопкам и иконкам с использованием знака «/», то они сгруппируются на панели компонентов и при выборе instance:
Кстати, чтобы быстро переименовать группу слоев, выделите их и нажмите правую кнопку мыши. в появившемся меню выберите Rename:
Далее в появившемся окне в поле «Rename to» впишите правила переименовывания. Например, выражение «icon/$&» добавит к текущим именам иконок префикс «icon/».
Кнопки под полем «Rename to» подскажут, как построить нужное вам выражение:
После того: как вы переименуете кнопки и в левой панели перейдете со вкладки Laere на вкладку Assets, вы увидите, что все кнопки сгруппировались в одну вкладку Button:
при этом если вам надо заменить одну кнопку на другую, то при изменении Instance компоненты кнопок также сгруппируются:
Задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом �� (кстати, клапснуть можно до 50 раз).
- Часть 3: Поля ввода и выпадающие списки
- Часть 4: Поиск и умный поиск
- Часть 5: Списки и Auto Layout
Behance — мои лучшие работы
Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.