Варианты (Variants) — Figma — Aduca

Variants объединяют состояния компонента: Size=SM/MD/LG, State=Default/Hover/Disabled. Свойства вариантов задают оси в панели компонента.

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

Планируйте свойства заранее: не создавайте лишние комбинации, которые не используются в продукте.

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

Component set Button
Properties:
- Size: S, M, L
- State: Default, Hover, Disabled

Переключение

Панель Properties справа
Size=M, State=Hover

На заметку: Согласуйте названия свойств с разработчиками (props в коде).

Игра Упражнение

Содержание книги

Всего: 15 глав

Книга, игра и упражнения доступны без регистрации. Видеоуроки — после оплаты курса.

Figma — облачный редактор интерфейсов для веба, мобильных приложений и дизайн-систем. Работа идёт в браузере или десктоп-приложении, файлы синхронизируются в реальном времени.Основные зоны: панель слоёв слева, холст по ц...

Читать главу

Игра Упражнение

Frame — основной контейнер макета: экран приложения, секция лендинга, модальное окно. В одном файле может быть несколько Pages (например, «Черновики», «UI Kit», «Прототип»).Фреймы можно вкладывать друг в друга, задавать...

Читать главу

Игра Упражнение

Базовые фигуры (Rectangle, Ellipse, Line, Polygon) — основа UI. У прямоугольников настраивают corner radius, обводку и заливку. Pen tool (P) рисует произвольные векторные контуры.Boolean operations (Union, Subtract, Inte...

Читать главу

Игра Упражнение

Текст в Figma настраивается через шрифт, размер, межстрочный интервал (line height), межбуквенный интервал и выравнивание. Для заголовков и body-текста задают иерархию: H1, H2, Body, Caption.Text styles сохраняют типогра...

Читать главу

Игра Упражнение

Цвета задают заливку (Fill) и обводку (Stroke). Для бренда создают Color styles: Primary, Secondary, Background, Error и оттенки нейтралей.Используйте семантические имена (bg/surface/text-primary), а не «красный-3». Для...

Читать главу

Игра Упражнение

Component — переиспользуемый элемент UI: кнопка, поле ввода, карточка. Создаётся через Create component (Ctrl+Alt+K). Экземпляры (instances) наследуют мастер; изменения в мастере распространяются на инстансы.Overrides по...

Читать главу

Игра Упражнение

Variants объединяют состояния компонента: Size=SM/MD/LG, State=Default/Hover/Disabled. Свойства вариантов задают оси в панели компонента.Это заменяет десятки отдельных компонентов одной группой с переключателями. В прото...

Читать главу

Игра Упражнение

Auto Layout автоматически расставляет дочерние элементы в ряд или колонку с заданными отступами и выравниванием — аналог flexbox в CSS.Shift+A включает Auto Layout для выделения. Настраивают direction, gap, padding, alig...

Читать главу

Игра Упражнение

Layout grid на фрейме помогает выстраивать колонки (12 col для веба), строки и модульные сетки. Baseline grid выравнивает текст.Constraints определяют поведение объекта при изменении размера родителя: привязка к left/rig...

Читать главу

Игра Упражнение

В режиме Prototype связывают фреймы переходами: On click, On drag, After delay. Настраивают анимацию: Instant, Dissolve, Smart animate, Move in.Flows задают точку входа в прототип (flow starting point). Презентация (Pres...

Читать главу

Игра Упражнение

Дизайн-система в Figma: библиотека компонентов, стили цветов и типографики, правила отступов и документация на отдельной странице.Team library позволяет публиковать компоненты и подключать их в другие файлы. При обновлен...

Читать главу

Игра Упражнение

Figma изначально мультиплеер: несколько дизайнеров в одном файле, курсоры с именами, live-редактирование. Комментарии (C) ставят на элементы, можно тегать коллег @имя.Ветки (branches) и версии (version history) помогают...

Читать главу

Игра Упражнение

Плагины расширяют Figma: иконки, доступность, генерация контента, синхронизация с Jira, Unsplash, удаление дубликатов. Community содержит тысячи бесплатных ресурсов.Популярные категории: Iconify, Content Reel (текст-рыба...

Читать главу

Игра Упражнение

Handoff: разработчик получает размеры, цвета, шрифты, отступы. В Dev Mode копируют CSS, iOS SwiftUI, Android Compose. Экспорт ассетов: SVG для иконок, PNG/WebP @1x/@2x/@3x.Подготовьте спецификацию: имена слоёв = имена в...

Читать главу

Игра Упражнение

Мобильный UI: safe areas, нижняя навигация, жесты, состояния клавиатуры. Веб: шапка, сетка 12 колонок, адаптив breakpoints (mobile/tablet/desktop).Собирайте типовые экраны из компонентов библиотеки. Проверяйте длинные те...

Читать главу

Игра Упражнение

Предыдущий урок

К содержанию курса

Следующий урок

Курс

Книга бесплатно

Все главы Интерактивная игра