Скачать или смотреть Полное руководство по компоненту «Кнопка» в Figma (текст, логические значения, замена экземпляров)

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

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

Значки

✨ Что вы узнаете из этого видео:

Как использовать функцию Auto Layout для кнопок

Добавление текстовых свойств для настройки подписей
Использование логических значений для включения и выключения значков
Замена экземпляров для гибких значков
Создание состояний наведения, отключения и контура с помощью вариантов
Анимация эффектов наведения с помощью Smart Animate

💡 Скачайте набор иконок, который я использовал в этом уроке: https://tinyurl.com/GrabMyIconSetHere

Если вам было полезно, нажмите 👍 и подпишитесь на другие уроки по Figma.

📌 Временные метки
0:00 Введение
0:18 Создание базовой кнопки с помощью Auto Layout
0:37 Добавление стилей (эффект стекла, градиент, тень)
1:00 Вставка значков и настройка отступов
1:25 Создание компонента кнопки
1:49 Добавление текстового свойства
2:27 Применение логических свойств (значки слева и справа, переключение меток)
3:41 Добавление свойства подкачки экземпляров
5:50 Создание вариантов размера (L, M, S)
6:22 Добавление вариантов состояния наведения
7:09 Создание вариантов состояния отключения
7:19 Создание вариантов состояния с контуром
7:40 Что такое вложенный компонент
8:01 Отображение вложенных экземпляров
8:34 Добавление анимации наведения с помощью Smart Animate
9:13 Финальный просмотр и подведение итогов
#figma #components #tutorial