Figma как сделать кнопку

Как в Figma сделать кнопку «читать далее»?

Обращаюсь к тем, кто хорошо разбирается в веб дизайне. Так как я новичок в этом направлении и только начинаю, не все понимаю, поэтому не удивляйтесь, если вам вопросы покажутся глупыми. Как сделать в Figma кнопку читать далее?Или все таки надо какие-то коды использовать.. Есть допустим текст, и потом после него появляется кнопка «читать далее», при нажатии на которую появляется остальной текст. Как сделать такое?

• Вопрос задан более года назад
• 750 просмотров

Комментировать

Решения вопроса 1

Дизайнер внутренних продуктов в KazanExpress

1. Создаешь компонент из 2 элементов — текстовый блок и кнопка, настраиваешь autolayout
2. Добавляешь второй вариант компонента — в раскрытом состоянии
3. Настраиваешь на кнопки анимации, чтобы при нажатии один вариант менялся на другой

Ответ написан более года назад

Как сделать простые интерактивные кнопки в Figma за 2 шага

Як зробити прості інтерактивні кнопки в Figma за 2 кроки

Редакція ・ Серп 1

Я полностью перешел на Figma всего несколько месяцев назад. Знаю, что припозднился, но это не помешало мне с удовольствием освоить приложение. Подобно многим продуктовым дизайнерам, последние несколько лет я использовал Sketch. Его легко изучить и понять. Кроме того, мне нравилась интеграция с InVision для создания прототипов, а функция auto-stacking с помощью Anima, упростила работу с более динамичным контентом. Затем я присоединился к Y Media Labs, команде, которая полностью перешла на Figma. Я пробовал этот инструмент раньше, но никогда не использовал его в качестве основного. Мне пришлось полностью перестроить свой рабочий процесс. И тогда я понял, что Figma проста, легка и функциональна. Всего за пару недель я обнаружил, что не только понимаю, как проектировать в привычном стиле, но и обнаружил «хаки Figma», помогающие вдохнуть в прототипы жизнь. Сейчас я работаю над этим:

Оживите свой прототип

В YML есть мантра «прототипы важнее презентаций». Прототип делает ваши дизайн-решения реальными и сообщает клиентам или заинтересованным сторонам гораздо больше, чем статичный дизайн. Он также помогает во время проектирования не попасть в «ловушку Dribbble» (быть может, этот дизайн хорошо смотрится на небольшом скриншоте, но как он на самом деле работает?). Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили. Давайте рассмотрим этот момент подробнее.

Простые кнопки

То, что я называю «простой кнопкой» – это пример, который вы можете видеть на gif-файле выше. Это кнопка по умолчанию (default button), кнопка в состоянии наведения курсора (hover state) и в состоянии нажатия (pressed state). Это поможет понять концепцию прототипирования кнопок в Figma.

Основные правила, прототипирования кнопки:

• Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
• Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.
• Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).

Это простой двухэтапный процесс

Шаг 1 — Состояние наведения курсора

1. Состояние «Наведение курсора»

Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.

Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.

Шаг 2 — Нажатая кнопка

2. Кнопка в нажатом состоянии

Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в ​​нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.

Этап 3 — «По нажатию» (On Click)

3. Сделайте кнопку функциональной (необязательно)

Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?

Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:

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

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

Как сделать анимацию в Figma

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

освойте профессию
веб-дизайнер с нуля

Содержание

1. Создание прототипа
2. Анимация прототипа
3. Виды взаимодействий
4. Создание кнопки
5. Настройка действий кнопки
6. Анимация кнопки
7. Создание слайдера

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

профессия веб-дизайнер

Станьте опытным повелителем веб-пространства

Инструментом для создания анимации в Figma является прототип. Перейдя во вкладку Prototype, вы увидите основные настройки:

• Device — выбор устройства, на котором будет отображаться прототип.
• Background — цвет фона.

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

профессия веб-дизайнер

Станьте опытным повелителем веб-пространства

Триггеры активируются в разные временные промежутки:

• On click / On tap — нажатие на точку доступа в прототипе.
• On drag — перетаскивание элемента на экран.
• While hovering — наведение курсора мыши на точку доступа.
• Keyboard / Gamepad shortcuts — считывание нажатий клавиатуры, в том числе сочетаний.
• Mouse enter — показывает фрейм назначения, если мышь наведена в специальную область.
• Mouse leave — показывает целевой кадр, когда курсор покидает специальную область.
• Mouse down (Touch down) — запускает целевой фрейм при первом нажатии мыши или сенсорной панели.
• Mouse up (Touch up) — запускает целевой кадр, когда вы отпускаете мышь или сенсорную панель.
• After delay — позволяет запускать событие спустя указанное время.

Анимация прототипа

Помимо триггеров, мы можем выбирать разную анимацию:

• Instant — мгновенно отображает фрейм назначения.
• Dissolve — фрейм назначения будет плавно показан поверх исходного (Fade in).
• Smart animate — ищет совпадающие слои, распознает различия и анимирует слои между кадрами в прототипе.
• Move in / Move out — фрейм назначения будет выезжать и перекрывать исходный фрейм.
• Push — фрейм назначения будет выталкивать исходный фрейм.
• Slide in / Slide out — перемещение с растворением.

Виды взаимодействий

Вид взаимодействия определяет, что именно произойдет после события, вызванного одним из триггеров:

• Navigate to — переход от одного фрейма к другому.
• Change to — смена одного элемента на другой.
• Back — переход назад.
• Set variable — установка переменной.
• Conditional — добавление условия.
• Scroll to — пролистывает текущую страницу до вложенного элемента или фрейма.
• Open link — открытие ссылки.

Open / Swap / Close overlay — открывает/меняет/закрывает целевой фрейм, который был открыт поверх исходного.

Разберем пример анимации наведения курсора на кнопку и последующее нажатие на нее (Hover effect).

как сделать кнопку в Figma

Создание кнопки

Начнем с создания кнопки и одного эллипса размером 1×1 px. У эллипса будет белая заливка Fill, а у кнопки — белая обводка Stroke с закругленными углами. Эллипс мы поместим в центре кнопки таким образом, чтобы его не было видно.

Далее нужно обернуть нашу кнопку и эллипс во фрейм. Для этого выделяем кнопку и эллипс, нажимаем правой кнопкой мыши в левой области слоев и выбираем из списка Frame selection или нажимаем Ctrl + Alt + G.

Закругляем углы у фрейма, как и у самой кнопки. Поставим галочку Clip content для того, чтобы содержимое фрейма не выходило за его границы.
Первое состояние кнопки готово; переименуем фрейм на Default и сделаем копию этой кнопки с помощью сочетания горячих клавиш Ctrl + D.

Копию переименуем в Hover и переместим эллипс в слоях под кнопку. Размер эллипса увеличиваем до тех пор, пока он не заполнит все пространство фрейма — в нашем случае это значение 270×270 px. Выравниваем его по центру по вертикали и горизонтали.

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

Снова делаем копию кнопки с помощью сочетания горячих клавиш Ctrl + D. Назовем ее Pressed и поменяем цвет заливки (Fill) у эллипса на более темный оттенок, чтобы при нажатии на кнопку она немного потемнела. Это будет подсказывать пользователю то, что он действительно на нее нажал.

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

профессия | 6 месяцев

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

Настройка действий кнопки

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

Выделяем три кнопки вместе и нажимаем на иконку компонента. Из меню выбираем функцию Component set для создания библиотеки с вариантами кнопок.

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

У вас появится окно с настройками перехода. По умолчанию установлено значение On click — переход через клик. Нам нужно поменять это значение на While hovering — переход при наведении курсора.

Выделяем вторую кнопку Hover и тянем от нее связь до третьей кнопки Pressed. Значение On click меняем на While pressing — это переход при удержании нажатия курсором. Мы настроили связь между кнопками. Осталось только посмотреть, что у нас получилось, в режиме анимации.

Анимация кнопки

Для этого с помощью инструмента Frame создадим фрейм любого размера — мы выбрали размер 1280 x 832 px. Также важно добавить кнопку Default внутрь этого фрейма.

Во вкладке Prototype выбираем в Device такой же пресет.

Выделяем фрейм и запускаем прототип, нажав на иконку Present.

Открывается дополнительное окно прототипа, где мы сможем посмотреть анимацию кнопки.

Создание слайдера

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

Начнем с первого состояния слайдера — активная светлая тема.

Состоять слайдер будет из:

• векторной иконки полумесяца;
• векторной иконки солнца;
• эллипса;
• прямоугольника с закругленными углами.

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

Поменяем цвет заливки фонового прямоугольника на более светлый оттенок.

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

Снова копируем фрейм и показываем второе состояние слайдера.

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

Ранее мы делали Component set для кнопок, сейчас сделаем библиотеку вариантов для наших фреймов.

Остается только настроить связи — тянем связь от первого фрейма ко второму, триггер выстраиваем по нажатию (On click).

Далее тянем связь от второго фрейма к четвертому, но триггер будет уже не по нажатию, а спустя время — After delay 1 ms.

На этом этапе при нажатии слайдер начнет движение и переходит во второе состояние.

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

А от третьего фрейма снова возвращаемся к первому через триггер спустя время — After delay 1 ms. Связи для слайдера настроены.

Теперь поработаем с примером, на котором покажем анимацию. У нас есть макет главной страницы мобильного приложения, она оформлена в светлой и темной темах.

Давайте внедрим в этот макет наш получившийся слайдер. В светлую тему вставим первый фрейм, а в темную — четвертый.

Теперь привяжем переходы от слайдера к соседнему фрейму и обратно.Триггер будет On drag — при перетаскивании.

Теперь посмотрим что у нас получилось, но перед этим поставим девайс в прототипе на iPhone 13 mini и перейдем в презентацию.

Вот такая анимация у нас получилась.

Научитесь придумывать крутые сайты, отличающиеся от однотипных конструкторов — от стильных иконок до продуманного UX/UI. И получите опыт, который поможет начать карьеру.

Как делать варианты элементов интерфейса в 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 полезных плагинов: работа с текстом и шрифтами
• Как рисовать векторные изображения
• Тени в интерфейсах: зачем они нужны и как их рисовать
• Как создать тёмную тему
• Как работать с модульной сеткой
• Как работать с изображениями

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!