Лекция 1. Основы интерфейсного дизайна в Figma

1. Знакомство с Figma

1.1. Что такое Figma

Figma — это облачный редактор интерфейсной и векторной графики, ставший индустриальным стандартом для UI/UX-дизайна. В отличие от классических графических редакторов (Adobe Photoshop, Sketch), Figma изначально проектировалась для проектирования интерфейсов и совместной работы команд.

Ключевые свойства Figma:

Кроссплатформенность. Figma работает прямо в браузере (Chrome, Safari, Firefox, Edge), а также в виде десктопного приложения для Windows и macOS. Это значит, что вашу операционную систему не имеет значения: один и тот же файл одинаково открывается на любом устройстве.
Облачное хранение. Файлы хранятся на серверах Figma. Не нужно пересылать .psd-файлы по почте и думать о версиях — у проекта всегда есть «единый источник истины» и история изменений.
Бесплатность для учёбы. Базовый (Starter) тариф бесплатен и достаточен для всех учебных задач: до трёх дизайн-файлов, неограниченное число персональных черновиков, совместный просмотр и комментирование. Студентам и преподавателям доступен расширенный образовательный план.
Совместная работа в реальном времени. Несколько человек могут редактировать один макет одновременно, видя курсоры друг друга (как в Google Docs).

1.2. Интерфейс программы

Рабочее окно Figma состоит из нескольких зон:

Зона	Расположение	Назначение
Toolbar (панель инструментов)	Сверху	Инструменты выделения, фрейма, фигур, текста, комментариев
Layers / Assets (слои/ресурсы)	Слева	Дерево слоёв, структура файла, библиотека компонентов и стилей
Canvas (холст)	По центру	Бесконечное рабочее пространство, где размещаются фреймы и объекты
Properties (свойства)	Справа	Параметры выделенного объекта: размеры, заливка, обводка, эффекты, Auto Layout
Design / Prototype / Inspect	Справа сверху	Переключение между режимом дизайна, прототипирования и инспектора кода

Холст (Canvas) — это бесконечная плоскость, на которой вы размещаете экраны (фреймы) приложения. По холсту можно свободно перемещаться (зажатый пробел + перетаскивание) и масштабировать (Ctrl/Cmd + колесо мыши).

1.3. Основные инструменты

Move (V) — выделение и перемещение объектов.
Frame (F) — создание фреймов (экранов, контейнеров).
Rectangle (R), Ellipse (O), Line (L) — базовые геометрические примитивы.
Pen (P) — векторное рисование произвольных контуров.
Text (T) — добавление текста.
Comment (C) — оставление комментариев (для коллаборации).

2. Фрейм (Frame) и группа (Group)

Один из первых вопросов, который возникает у новичка: чем фрейм отличается от группы. Это разные сущности, и путать их нельзя.

2.1. Фрейм (Frame)

Фрейм — это контейнер, который определяет границы и свойства группы элементов. По сути это «окно» с собственными размерами и поведением.

Свойства фрейма:

имеет фиксированные размеры (ширину и высоту), которые можно задать вручную;
может содержать другие фреймы (вложенность) — экран может состоять из фреймов-карточек, фреймов-кнопок и т. д.;
поддерживает типы (Desktop, Mobile, Tablet, Custom);
обрезает содержимое за своими границами (clip content), если эта опция включена;
может иметь собственные заливку, обводку, скругление углов, тень и Layout Grid;
поддерживает Auto Layout и прототипирование.

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

2.2. Группа (Group)

Группа — это временное объединение нескольких объектов для удобства одновременных манипуляций (переместить, повернуть, масштабировать вместе).

Ограничения группы:

не имеет собственных свойств (размеров, заливки, стилей) — её границы определяются содержимым;
не предназначена для самостоятельной структуры экрана;
применяется только для организации и быстрых операций.

2.3. Сравнение

Признак	Фрейм (Frame)	Группа (Group)
Собственные размеры и свойства	Да	Нет (зависит от содержимого)
Заливка, обводка, скругление	Да	Нет
Layout Grid	Да	Нет
Auto Layout	Да	Нет
Прототипирование как экран	Да	Нет
Обрезка содержимого	Да	Нет
Назначение	Экраны, компоненты, контейнеры	Временное объединение объектов

Вывод: для экранов, карточек, кнопок и любых структурных блоков используйте фреймы. Группы оставляйте для редких случаев, когда нужно просто временно «склеить» несколько объектов. Горячая клавиша для фрейма — Ctrl/Cmd + Alt + G (Frame selection), для группы — Ctrl/Cmd + G.

3. Типы фреймов

Figma предлагает преднастроенные размеры фреймов под распространённые устройства. Это избавляет от необходимости запоминать точные значения.

Тип	Примеры размеров (px)
Mobile	iPhone 13 — 375×812, iPhone SE — 375×667, iPhone 13 Pro Max — 428×926
Tablet	iPad — 768×1024, iPad Pro — 1024×1366
Desktop	1440×900, 1920×1080
Custom	Произвольные размеры под конкретную задачу

Преимущества преднастроенных типов:

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

Чтобы выбрать тип: нажмите F, и в правой панели появится список преднастроенных размеров, сгруппированных по категориям (Phone, Tablet, Desktop и т. д.).

4. Layout Grid — сетка макета

Layout Grid (сетка макета) — это система направляющих линий, наложенная на фрейм. Она помогает выравнивать элементы и поддерживать визуальный порядок. Сетка — вспомогательный слой: она видна дизайнеру, но не экспортируется в финальное изображение.

4.1. Типы сеток

Columns (колонки) — вертикальные полосы. Главный инструмент для мобильных и веб-интерфейсов: контент выравнивается по колонкам.
Rows (ряды) — горизонтальные полосы. Используются реже, для вертикального ритма.
Grid (сетка) — равномерная клетчатая сетка (например, 8×8 px). Удобна для иконок и мелких выравниваний.

4.2. Сетка для мобильного интерфейса

Типичная настройка для iPhone 13 (375 px ширины):

Тип: Columns;
Count (количество колонок): 4;
Margin (внешние отступы): 16 px слева и справа;
Gutter (расстояние между колонками): 8 px.

При такой настройке остаётся «рабочая ширина» 375 − 16 − 16 = 343 px, разбитая на 4 колонки. Именно поэтому в практике поля ввода и кнопки имеют ширину 343 px — они занимают всю ширину контента между внешними отступами.

4.3. Зачем нужна сетка

обеспечивает визуальную структуру и порядок;
задаёт консистентные отступы по всему макету;
упрощает выравнивание элементов;
помогает создавать адаптивные макеты;
соответствует гайдлайнам Material Design (Google) и iOS Human Interface Guidelines (Apple).

Горячая клавиша для показа/скрытия сетки: Ctrl/Cmd + Shift + 4 (или Shift + G для всех направляющих).

5. Мобильный фрейм: параметры iPhone 13

Создание корректного мобильного фрейма — основа всего макета. Разберём ключевые параметры на примере iPhone 13.

5.1. Размеры и плотность

Логический размер фрейма: 375×812 px (портретная ориентация). Это points (логические точки), в которых мы проектируем интерфейс.
Плотность пикселей. Физический экран iPhone 13 имеет плотность @3x (Retina): одна логическая точка соответствует трём физическим пикселям. Поэтому мы проектируем в логических 375×812, а при экспорте используем коэффициент 2x/3x (см. раздел 14).

Почему мы не проектируем сразу в физических пикселях? Потому что разные устройства имеют разную плотность, а интерфейс описывается в единых логических единицах. Это разделяет «дизайн» и «рендеринг».

5.2. Системные зоны экрана

Зона	Высота (≈)	Что содержит
Status Bar	44 px	Время, индикаторы сети, заряд батареи
Home Indicator	34 px	Нижняя полоса жестовой навигации
Content Area	812 − 44 − 34 = 734 px	Полезная рабочая область для контента

5.3. Safe Area (безопасная область)

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

Что может «отнять» полезное пространство:

Notch / Dynamic Island — вырез в верхней части экрана;
Status Bar — панель состояния;
Home Indicator — нижняя жестовая полоса;
закруглённые углы экрана.

Почему Safe Area важно учитывать:

важный контент (кнопки, заголовки, навигация) не должен попадать под системные элементы;
обеспечивается читаемость и доступность всех элементов;
макет соответствует гайдлайнам iOS и Android;
интерфейс корректно отображается на всех устройствах с разными вырезами.

Практическое правило: размещайте основной контент в пределах Content Area, а кликабельные элементы держите на расстоянии не менее 16 px от краёв экрана.

5.4. Touch Targets

Минимальный размер интерактивного элемента (кнопки, иконки-ссылки) — 44×44 px по iOS HIG (у Material Design — 48×48 dp). Меньшие элементы трудно нажать пальцем, что снижает удобство.

6. Цветовые стили (Color Styles)

Color Styles — это сохранённые именованные цвета, которые можно переиспользовать во всём проекте.

6.1. Как создать

Создайте объект с нужным цветом (например, прямоугольник).
Выделите его.
В панели свойств найдите блок Fill (заливка).
Нажмите на иконку с четырьмя точками рядом с цветом (Style).
Выберите «+» → «Create style».
Введите имя стиля (например, Primary/500).
Подтвердите создание.

6.2. Структура названий

Рекомендуется группировать цвета через слэш — Figma автоматически выстроит вложенную структуру:

Primary/500 — основной цвет, оттенок 500;
Text/Primary — основной цвет текста;
Background/Surface — цвет поверхности.

6.3. Пример палитры мобильного приложения

Стиль	HEX	Назначение
`Primary`	`#007AFF`	Основной синий (кнопки, акценты)
`Secondary`	`#5856D6`	Фиолетовый акцент
`Background`	`#FFFFFF`	Белый фон
`Surface`	`#F8F9FA`	Светло-серые поверхности, поля ввода
`Text/Primary`	`#1C1C1E`	Основной текст
`Text/Secondary`	`#8E8E93`	Второстепенный текст, подписи
`Border`	`#E9ECEF`	Границы и разделители
`Error`	`#FF3B30`	Ошибки и предупреждения

6.4. Преимущества

Консистентность — единообразные цвета по всему проекту;
Брендинг — соблюдение корпоративной палитры;
Доступность — контроль контрастности под стандарты;
Централизованное управление — изменили стиль в одном месте, обновились все элементы;
Экономия времени — клик вместо ручного ввода HEX.

7. Текстовые стили (Text Styles)

Text Styles — предустановленные наборы параметров текста (шрифт, размер, начертание, межстрочный интервал), которые можно применить одним кликом.

7.1. Как создать

Создайте текстовый объект с нужными параметрами.
Выделите его.
В блоке Text справа нажмите на иконку с четырьмя точками (Style).
Выберите «Create text style».
Введите имя (например, Heading/H1).
Подтвердите.

7.2. Пример типографической шкалы

Стиль	Размер	Начертание	Применение
`Heading/Large`	24 px	Bold	Главные заголовки экранов
`Heading/Medium`	20 px	SemiBold	Подзаголовки, секции
`Body/Large`	16 px	Regular	Основной текст
`Body/Medium`	14 px	Regular	Вспомогательный текст
`Caption`	12 px	Regular	Подписи, мелкие пометки
`Button`	16 px	Medium	Текст на кнопках

7.3. Преимущества

Консистентность оформления текста;
Экономия времени — не нужно настраивать каждый блок вручную;
Лёгкость правок — изменение стиля обновляет все связанные тексты;
Масштабируемость — легко добавлять новые варианты;
Стандартизация — соответствие дизайн-системе.

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

Текст — основной носитель информации в интерфейсе. Несколько базовых правил для мобильных экранов:

Размер шрифта. Основной текст — не менее 16 px (комфортная читаемость на телефоне). Заголовки — 20–32 px в зависимости от уровня, текст кнопок — 16 px Medium.
Межстрочный интервал (Line Height). Для основного текста — 1.5–1.6× от размера шрифта, для заголовков — 1.2–1.3×. Например, для текста 16 px разумная высота строки — 24 px.
Иерархия. Чёткое визуальное различие между уровнями: заголовок крупнее и жирнее текста, подписи мельче и светлее.
Контрастность. Минимум 4.5:1 между текстом и фоном для обычного текста (стандарт WCAG AA). Это обеспечивает читаемость и доступность.
Длина строки. Оптимально 50–75 символов; на узком мобильном экране это естественным образом ограничивается шириной контента.
Вес шрифта. Используйте Regular, Medium, SemiBold, Bold для построения иерархии, а не множество разных шрифтов.
Отступы. Между блоками текста — не менее 16 px, чтобы экран «дышал».
Адаптивность. Текст должен оставаться читаемым на всех размерах экранов.

9. Компонент, экземпляр и варианты

9.1. Компонент (Component) и экземпляр (Instance)

Компонент — это мастер-шаблон, «источник истины». От него создаются копии.

Экземпляр (Instance) — это копия компонента, связанная с оригиналом. Когда вы меняете мастер-компонент, изменения автоматически распространяются на все экземпляры.

Компонент	Экземпляр
Оригинальный шаблон	Копия компонента
Изменения влияют на все экземпляры	Изменения локальны (кроме унаследованных свойств)
Создаётся один раз	Создаётся многократно
Можно редактировать все свойства	Часть свойств зафиксирована

Создать компонент: выделить объект → Ctrl/Cmd + Alt + K (или иконка ромба на верхней панели).

Преимущества: единый источник истины, обновление в одном месте, консистентность, экономия времени при множестве похожих элементов (кнопки, поля ввода, карточки).

9.2. Варианты (Variants)

Варианты — это способ собрать несколько версий одного компонента в единый набор со свойствами (Properties) и значениями (Values).

Примеры свойств кнопки:

Variant: Primary, Secondary, Ghost;
Size: Small, Medium, Large;
State: Default, Hover, Pressed, Disabled.

Когда использовать варианты: разные стили, размеры, состояния и типы одного элемента (например, поле ввода Text / Password / Search). Это основа дизайн-систем: все версии лежат рядом, между ними легко переключаться через правую панель.

10. Auto Layout — основы

Auto Layout (автолэйаут) — механизм, при котором контейнер автоматически меняет размеры и распределяет элементы в зависимости от содержимого. Это аналог flexbox в вёрстке.

10.1. Ключевые параметры

Direction (направление): Vertical (вертикально), Horizontal (горизонтально) или Wrap (с переносом).
Gap / Spacing (расстояние между элементами): например, 16 px между полями формы.
Padding (внутренние отступы): отступ содержимого от краёв контейнера. Может быть задан отдельно сверху/снизу/слева/справа.
Alignment (выравнивание): распределение элементов внутри (по началу, центру, концу; распределение по ширине).

10.2. Пример: форма авторизации

Выделяем поля Email, Password и кнопку «Войти», применяем Auto Layout (Shift + A) и настраиваем:

Direction: Vertical;
Gap: 16 px;
Padding: 0 px;
Alignment: Center.

Теперь, если добавить ещё одно поле, остальные элементы сдвинутся автоматически с сохранением отступа 16 px.

10.3. Преимущества

Адаптивность — элементы подстраиваются под содержимое (например, под длину текста);
Экономия времени — не нужно вручную выравнивать;
Консистентность — единообразные отступы;
Responsive-дизайн — проще делать адаптивные блоки;
Лёгкость правок — изменения распространяются автоматически.

11. Прототипирование в Figma

Прототип — это интерактивная модель приложения: экраны связаны переходами, и макет можно «потыкать», как настоящее приложение. Прототипирование встроено в Figma — отдельный инструмент не нужен.

11.1. Процесс создания

Подготовьте экраны — все нужные фреймы.
Перейдите в режим Prototype (правая верхняя панель).
Выделите триггер — элемент, по которому происходит действие (кнопка, ссылка).
Создайте связь — потяните стрелку от элемента к целевому фрейму (или нажмите «+»).
Настройте параметры:
- Trigger (триггер): On Click, On Drag, While Hovering, While Pressing;
- Action (действие): Navigate to, Open Overlay, Change to, Back;
- Animation: Smart Animate, Slide, Dissolve, Push, Instant;
- Duration: обычно 200–300 ms;
- Easing: Ease In, Ease Out, Ease In Out, Linear.
Тестируйте — нажмите Present (Ctrl/Cmd + Alt + Enter).

Пример: кнопка «Войти» → On Click → Navigate to «Home Screen» → Smart Animate, 300 ms, Ease Out.

11.2. Типы анимаций переходов

Анимация	Поведение	Когда применять
Smart Animate	Плавно анимирует одноимённые элементы между экранами	Переходы с сохранением контекста
Instant	Мгновенная смена без анимации	Модальные окна, быстрые действия
Slide In	Экран «въезжает» с края (Left/Right/Up/Down)	Навигация, боковые меню
Dissolve	Плавное растворение	Мягкая смена контента
Push	Один экран «выталкивает» другой	Навигация с эффектом глубины

12. Smart Animate

Smart Animate — «умная» анимация: Figma находит на исходном и целевом экранах элементы с одинаковыми именами и автоматически анимирует изменения их свойств (позиция, размер, цвет, прозрачность). Получается плавный, естественный переход.

Как работает:

Figma сопоставляет одноимённые слои на двух фреймах;
вычисляет разницу их свойств;
интерполирует переход за заданную длительность.

Отличие от других анимаций:

Smart Animate	Slide / Instant
Анимирует изменения свойств отдельных элементов	Просто переключает целый экран
Сохраняет контекст и позиции	Полная замена экрана
Требует одинаковые имена слоёв	Имена не важны
Микроанимации, плавность	Резкая смена кадра

Где особенно полезно: переход «список → детали товара», изменение состояния кнопки (Default → Pressed), плавное появление модального окна. Главное требование — одноимённые слои; если имена различаются, Smart Animate не найдёт связь и переход будет выглядеть как обычная смена.

13. Форматы экспорта

Когда макет готов, его нужно выгрузить — для презентации, разработчиков или печати. Экспорт настраивается в блоке Export правой панели.

Формат	Тип	Прозрачность	Когда использовать
PNG	Растр	Да	Экраны, превью, скриншоты, изображения с прозрачностью
JPG	Растр	Нет	Фотографии, фоны без прозрачности (меньший вес)
SVG	Вектор	Да	Иконки, логотипы, простые иллюстрации (масштабируются без потерь)
PDF	Документ	—	Документация, печать, передача клиенту

13.1. Разрешения 1x / 2x / 3x

Для растровых форматов (PNG, JPG) указывается множитель плотности:

1x — базовое разрешение (например, экран 375×812 → файл 375×812 px). Подходит для устройств без Retina и быстрых превью.
2x — удвоенное (375×812 → 750×1624 px). Стандарт для большинства Retina-дисплеев.
3x — утроенное (375×812 → 1125×2436 px). Для экранов высокой плотности, таких как iPhone 13 (@3x).

13.2. Практические рекомендации

Что экспортируем	Рекомендация
Экраны приложений	PNG, 2x или 3x
Иконки	SVG
Фотографии	JPG
Документация	PDF
Для разработчиков	SVG + PNG @2x/@3x, плюс CSS через Inspect

14. Плагины Figma

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

Как использовать:

Установка: Menu → Plugins → Browse all plugins (или через Figma Community), найти нужный → Install.
Запуск: Menu → Plugins → [название] либо Right-click → Plugins → [название].

Полезные плагины:

Content Reel — заполнение макетов реалистичным контентом (имена, аватары, тексты);
Unsplash — бесплатные качественные фотографии прямо в макет;
Iconify — обширная библиотека иконок с поиском;
Figma to Code — генерация CSS/React-кода для передачи разработчикам;
Autoflow — автоматическая визуализация связей между экранами (пользовательские потоки);
Stark — проверка контрастности и доступности (accessibility);
Rename It — массовое переименование слоёв по шаблону.

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

Краткие итоги

Figma — бесплатный кроссплатформенный облачный редактор интерфейсов с совместной работой в реальном времени; стандарт индустрии UI/UX.
Фрейм — контейнер со своими размерами, стилями и поведением (для экранов и компонентов); группа — лишь временное объединение объектов без собственных свойств.
Для мобильного интерфейса используют фрейм iPhone 13 (375×812) с сеткой из 4 колонок, отступами 16 px и учётом Safe Area (Status Bar 44 px, Home Indicator 34 px).
Color Styles и Text Styles обеспечивают консистентность и централизованное управление цветами и типографикой; правки в одном месте обновляют весь проект.
Компоненты, экземпляры и варианты — основа дизайн-систем: единый источник истины и масштабируемость.
Auto Layout делает блоки адаптивными (направление, padding, gap, выравнивание), экономя время на ручном выравнивании.
Прототипирование встроено в Figma; Smart Animate плавно анимирует одноимённые слои между экранами, сохраняя контекст.
При экспорте выбирают формат под задачу (PNG/JPG/SVG/PDF) и множитель плотности (1x/2x/3x); плагины автоматизируют рутину.

Контрольные вопросы

Для самопроверки по материалу лекции ответьте на экзаменационные вопросы 1–15 из файла exam_questions.md:

Что такое фрейм (Frame) и чем он отличается от группы (Group)?
Перечислите основные преимущества Auto Layout.
Какие типы фреймов поддерживает Figma? Приведите примеры.
Что такое Layout Grid и зачем он нужен для мобильных интерфейсов?
Какие параметры учитывают при создании фрейма iPhone 13?
Что такое Safe Area и почему её важно учитывать?
Как создаются Color Styles и каковы их преимущества?
Для чего нужны Text Styles?
Основные принципы типографики мобильного интерфейса.
Чем компонент (Component) отличается от экземпляра (Instance)?
Что такое варианты (Variants) и когда их применять?
Опишите процесс создания интерактивного прототипа.
Какие типы анимаций переходов доступны в Figma?
Что такое Smart Animate и чем он отличается от других анимаций?
Какие форматы экспорта поддерживает Figma и когда использовать каждый?