UX/UI для новичков: пошаговый старт в Figma

Что такое UX и UI: основы и роли в продукте

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

Что такое UX

UX (User Experience) — это пользовательский опыт: как человек чувствует себя и насколько успешно решает задачу в продукте.

UX отвечает на вопросы:

Зачем пользователь приходит в продукт и какую задачу решает

Какой путь он проходит от намерения до результата

Где возникают сложности, ошибки, сомнения, ожидания

Насколько быстро и уверенно человек достигает цели

> "User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products." — Nielsen Norman Group, Definition of User Experience (UX) (Nielsen Norman Group — Definition of User Experience (UX))

Важно: UX — это не только про удобство кнопок. Это также про логику, понятность, доверие, предсказуемость, скорость выполнения задач и ощущение контроля.

Что такое UI

UI (User Interface) — это пользовательский интерфейс: то, что человек видит и с чем взаимодействует.

UI включает:

Экраны, блоки и расположение элементов

Кнопки, поля ввода, переключатели, иконки

Цвета, типографику, отступы, сетки

Состояния элементов (обычное, наведение, нажатие, ошибка, отключено)

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

UX и UI: в чем разница

UX и UI работают вместе, но решают разные задачи.

!Инфографика показывает различие между UX (опыт и логика) и UI (визуал и элементы интерфейса)

Ниже — краткое сравнение.

| Критерий | UX | UI | |---|---|---| | Главный фокус | Удобство и результат для пользователя | Визуальная форма и взаимодействие с элементами | | Типичные вопросы | Как человек решит задачу? | Как это будет выглядеть и читаться? | | Итог работы | Сценарии, структура, логика, прототипы | Макеты экранов, стили, компоненты, состояния | | Пример | Упростить оформление заказа с 6 шагов до 3 | Сделать кнопку заметнее, улучшить контраст и отступы |

Как UX и UI проявляются на примере

Представим задачу: пользователь хочет заказать доставку.

UX-часть:

Определить минимальные шаги до заказа

Сгруппировать поля так, чтобы они заполнялись быстро

Предусмотреть ошибки (например, неверный телефон) и подсказки

Продумать, что будет после оформления (статус, подтверждение)

UI-часть:

Выбрать размер полей и кнопок, чтобы было удобно нажимать

Настроить визуальную иерархию (что главное, что второстепенное)

Подобрать типографику, цвета, иконки

Оформить состояния: ошибка, фокус в поле, успешное заполнение

Если UX слабый — пользователь не сможет оформить заказ или будет нервничать. Если UI слабый — пользователь будет ошибаться, медленнее ориентироваться или не доверять продукту.

Роли в продукте: кто делает UX и UI

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

Продуктовый менеджер

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

UX-исследователь

UX-исследователь изучает пользователей: их задачи, боли и поведение.

Примеры методов:

Интервью (поговорить и понять мотивацию)

Тестирование прототипа (посмотреть, где человек путается)

Аналитика (оценить, на каком шаге чаще уходят)

UX-дизайнер

UX-дизайнер проектирует структуру и сценарии: как пользователь пройдет путь к цели.

Результаты могут включать:

Сценарии использования (что человек делает шаг за шагом)

Информационную архитектуру (как устроены разделы)

Каркасные схемы (wireframes) — черновые макеты без красивого оформления

Прототип — модель поведения экранов, чтобы проверить логику

UI-дизайнер

UI-дизайнер оформляет интерфейс: делает экраны понятными визуально и едиными по стилю.

Результаты часто включают:

Визуальные макеты экранов

Стили (цвета, шрифты, эффекты)

Компоненты (кнопки, поля, карточки) и их состояния

Продуктовый дизайнер

Иногда есть роль продуктового дизайнера: это специалист, который совмещает UX и UI и ведет задачу от исследования до финального макета.

Разработчик

Разработчик реализует интерфейс в коде. Чем понятнее дизайн (логика, состояния, спецификация), тем быстрее и точнее будет реализация.

Какие артефакты вы будете делать в Figma

Figma — инструмент, где удобно собрать и UX-часть, и UI-часть в одном месте.

Что вы будете создавать по ходу курса:

Wireframe (каркас) — быстрые черновые экраны для проверки структуры

UI-макет — детально оформленный экран со стилями

Компоненты — переиспользуемые элементы интерфейса

Прототип — кликабельная схема переходов для тестирования сценария

Важно: Figma не делает дизайн “правильным” автоматически. Она помогает быстро проверять идеи, поддерживать единый стиль и собирать интерфейс как конструктор.

Частые заблуждения новичков

“UX — это когда красиво”: красиво — это чаще UI; UX — про то, как работает.

“UI — это просто выбрать цвета”: UI — это еще и читаемость, иерархия, состояния, доступность.

“Сделаю макет, и UX будет готов”: UX требует проверки на пользователях и итераций.

Как эта тема пригодится дальше в курсе

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

Это решение помогает пользователю быстрее и увереннее? (UX)

Это решение выглядит понятно, единообразно и аккуратно? (UI)

Эта связка и есть основа работы UX/UI-дизайнера.

Первые шаги в Figma: аккаунт, файлы и рабочее пространство

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

Что такое Figma и как вы будете ей пользоваться

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

В браузере вы начинаете работу сразу, без установки.

В приложении часто удобнее работать с большими файлами и несколькими окнами.

Официальные страницы Figma:

Figma — Sign up

Figma — Downloads

Figma Community

Figma Help Center

Создание аккаунта и базовые настройки

Регистрация

Чтобы начать:

Откройте страницу Figma — Sign up.

Зарегистрируйтесь через email или через аккаунт Google.

Подтвердите почту, если Figma попросит.

После входа вы попадаете в домашнее пространство Figma, где хранятся ваши файлы и команды.

Важное для новичка

Figma сохраняет изменения автоматически, вам не нужно нажимать Save.

Один аккаунт можно использовать и в браузере, и в приложении.

Для старта бесплатного тарифа обычно достаточно.

Как устроены файлы в Figma: самая важная логика

Figma — это не папки на компьютере. Здесь важна структура внутри рабочего пространства.

Главные сущности: команда, проект, файл

Team (команда) — место, где обычно работает группа людей.

Project (проект) — контейнер для файлов внутри команды (например, Мобильное приложение).

File (файл) — то, где вы рисуете экраны, создаете компоненты и прототипы.

Если вы учитесь один, у вас чаще всего будет:

Drafts (черновики) — личная зона, где можно хранить учебные файлы.

!Схема, как в Figma связаны команда, проект, файл и черновики

Как создать и назвать первый учебный файл

В домашнем экране найдите Drafts.

Нажмите New design file.

Сразу переименуйте файл, чтобы не потеряться (например, Учеба — экраны и сетки).

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

Рабочее пространство Figma: что где находится

Когда вы открываете файл, вы видите редактор. Условно его можно разделить на 4 зоны.

| Зона | Где находится | Зачем нужна | |---|---|---| | Верхняя панель | сверху | инструменты, переключение режимов, настройки | | Левая панель | слева | слои и страницы | | Холст | по центру | место, где находятся ваши макеты | | Правая панель | справа | свойства выбранного объекта |

Холст

Холст — это рабочее поле, на котором вы размещаете фреймы (экраны), элементы интерфейса и заметки.

Можно приближать и отдалять.

Можно перемещаться по холсту.

Можно держать несколько экранов рядом, чтобы сравнивать.

Левая панель: Pages и Layers

Слева обычно два ключевых раздела:

Pages (страницы) — логические разделы внутри файла.

Layers (слои) — список всех объектов на текущей странице.

Практичный совет для учебы:

Делайте отдельные страницы под этапы работы.

Например: Wireframe, UI, Components.

Правая панель: свойства

Справа вы настраиваете выбранный объект:

размер и положение

заливки (цвета)

обводки

эффекты (тени)

текстовые параметры

Новичку важно запомнить принцип:

Слева вы находите объект в структуре.

По центру вы видите объект на холсте.

Справа вы меняете свойства.

Верхняя панель: режимы и инструменты

На верхней панели обычно находятся:

инструменты (выбор, фрейм, фигуры, текст)

переключение вкладок редактора: Design, Prototype, Inspect

доступ к комментариям и шарингу

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

Навигация по холсту: без этого сложно учиться

Эти действия вы будете делать постоянно.

Перемещение по холсту: зажмите Space и тяните мышью.

Масштаб: Ctrl + колесо мыши (Windows) или Cmd + колесо (macOS).

Быстро найти и показать выбранный объект на холсте: Shift + 2.

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

Как Figma сохраняет изменения и что такое версии

Автосохранение

Figma сохраняет изменения автоматически. Это удобно, но важно понимать, что:

изменения появляются у других пользователей почти сразу, если вы работаете вместе

не нужно создавать копии файла каждый час из-за страха что-то потерять

История версий

В файле есть история изменений: вы можете посмотреть прошлые состояния и при необходимости вернуться назад.

Это особенно полезно, когда:

вы экспериментировали и хотите откатиться

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

Если вы хотите закреплять важные этапы, используйте именованные точки в истории версий.

Как делиться файлом: ссылки и права доступа

В Figma распространенный сценарий работы такой:

вы отправляете ссылку на файл

человек открывает ее и смотрит или комментирует

вы правите макет по обратной связи

Ключевые варианты доступа:

Can view — человек может только смотреть.

Can comment — человек может оставлять комментарии.

Can edit — человек может редактировать файл.

Новичку важно правило безопасности:

если вы просто показываете работу, обычно достаточно просмотра или комментариев

Где брать готовые файлы и примеры для обучения

Чтобы ускорять обучение, полезно смотреть, как устроены чужие макеты.

Figma Community — шаблоны, UI-киты, примеры компонентов

Смысл не в том, чтобы копировать дизайн, а в том, чтобы замечать:

как названы слои и страницы

как выстроена структура

как повторяются элементы

Мини-глоссарий для уверенного старта

Файл — документ, где вы создаете дизайн, компоненты и прототип.

Страница — раздел внутри файла (например, Wireframe и UI).

Слой — любой объект: текст, прямоугольник, иконка, группа.

Холст — пространство, где вы размещаете макеты.

Как эта тема связана с UX/UI

UX требует структуры: сценарии, состояния, логика экранов. UI требует порядка: единый стиль, повторяемые элементы, аккуратные отступы. Поэтому уверенная ориентация в файлах, страницах и слоях — это не “техническая мелочь”, а основа для дальнейших тем.

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

Интерфейс Figma: панели, слои, страницы и навигация

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

Цель этой темы простая: чтобы вы уверенно отвечали себе на вопросы:

Где найти нужный элемент, если на холсте их много?

Почему я не могу выделить объект?

Как не потеряться в файле через неделю обучения?

!Схема-памятка: где находятся основные зоны редактора Figma

Четыре главные зоны редактора

Почти всё, что вы делаете в Figma, укладывается в четыре области:

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

Левая панель: Pages (страницы) и Layers (слои) — структура вашего файла.

Холст: рабочее поле, где лежат экраны и элементы.

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

Главный принцип ориентации:

Слева вы находите что это за объект.

В центре вы видите где он на холсте.

Справа вы меняете как он выглядит и ведет себя.

Левая панель: Pages и зачем они новичку

Page (страница) в Figma — это раздел внутри файла. Это не экран приложения и не артборд, а именно “папка-уровень” для логической организации работы.

Зачем страницы нужны в UX/UI:

Разделять этапы: Wireframe (каркас) и UI (визуальный макет).

Разделять большие части продукта: Авторизация, Каталог, Профиль.

Отделять библиотеку: Components — компоненты и стили.

Практичная структура учебного файла:

00 Notes (заметки и ссылки)

01 Wireframe (черновые экраны)

02 UI (чистовые экраны)

03 Components (кнопки, поля, карточки)

Совет: если вы не уверены, куда положить что-то “временно”, создайте страницу Sandbox и складывайте эксперименты туда.

Левая панель: Layers и как “читать” макет

Layers (слои) — это список всех объектов на текущей странице. Слои показывают, из чего состоит ваш экран: фреймы, группы, фигуры, текст, изображения.

Как устроена вложенность

В Figma слои обычно вложены друг в друга:

Экран чаще всего сделан как Frame (фрейм).

Внутри фрейма — блоки (например, шапка, карточки).

Внутри блоков — конкретные элементы (иконка, текст, кнопка).

Если вы научитесь читать слои, вы сможете:

быстро находить нужный объект, даже если на холсте “каша”

понимать, почему элемент перекрыт другим

управлять порядком наложения

Самые частые действия со слоями

Переименовать слой: двойной клик по названию.

Спрятать слой: иконка “глаз” рядом со слоем.

Заблокировать слой: иконка “замок”, чтобы случайно не сдвинуть.

Перетащить слой выше или ниже: меняется порядок наложения.

Выделить объект через список: клик по слою выделит объект на холсте.

Полезная привычка: не оставляйте названия вроде Rectangle 12. Названия слоев — это ваш будущий “словарь” макета и основа для понятной передачи в разработку.

Frame, Group и что выбирать новичку

В Figma есть разные способы “собрать” элементы вместе.

Frame (фрейм) — контейнер. Обычно это экран или крупный блок. Фрейм удобно масштабировать, выравнивать, и он лучше подходит для структуры интерфейса.

Group (группа) — быстро объединить несколько объектов. Подходит для временной сборки, но как основа интерфейса используется реже.

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

Правая панель: свойства выделенного объекта

Справа вы настраиваете выделенное: размеры, позицию, внешний вид и текст.

Что новичок будет менять чаще всего:

Position: координаты и выравнивание относительно других элементов.

Size: ширина и высота.

Fill: заливка (цвет).

Stroke: обводка.

Text: шрифт, размер, насыщенность, межстрочные интервалы.

Простой способ не путаться:

Если “ничего не меняется” — проверьте, тот ли слой выделен.

Если меняется “не то” — проверьте, нет ли выделения группы вместо конкретного элемента.

Верхняя панель: инструменты и режимы

Самые востребованные инструменты для новичка

Move/Select: чтобы выделять и перемещать.

Frame: чтобы создавать экраны.

Shapes (например, прямоугольник): чтобы собирать интерфейс из блоков.

Text: чтобы добавлять надписи.

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

Design, Prototype, Inspect

Сверху справа (или в верхней части интерфейса) есть вкладки:

Design — основной режим создания макетов.

Prototype — настройка переходов между экранами для кликабельного прототипа.

Inspect — просмотр параметров для разработки.

На старте почти всё время вы будете в Design. В Prototype вы перейдете позже, когда начнете собирать пользовательский сценарий.

Официальная справка: Figma Help Center

Навигация по холсту: как не теряться

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

Перемещение и масштаб

Перемещение по холсту: зажмите Space и тяните мышью.

Масштаб: Ctrl + колесо (Windows) или Cmd + колесо (macOS).

Быстро найти выделенный объект

Показать выделенный объект на холсте: Shift + 2.

Как применять:

Если вы выделили слой слева, но не понимаете, где он на холсте, нажмите Shift + 2.

Как понять, почему объект не выделяется

Чаще всего причины такие:

Объект заблокирован (снимите замок у слоя).

Объект спрятан (включите “глаз”).

Сверху лежит другой объект и перекрывает (временно спрячьте верхний слой или выберите нужный через Layers).

Мини-памятка: что запомнить сегодня

Pages помогают поддерживать порядок в файле: разделяйте этапы и разделы.

Layers — это карта вашего макета: по ней проще искать, выделять и исправлять.

Frame — базовый контейнер для экранов и крупных блоков.

Правая панель показывает свойства выделенного объекта.

Space для перемещения по холсту и Shift + 2 для поиска выделенного — обязательные привычки.

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

Самые нужные инструменты новичка: Frame, Shape, Text, Move

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

Move — выделять, перемещать, аккуратно выравнивать.

Frame — создавать экраны и контейнеры.

Shape — строить блоки интерфейса (карточки, кнопки, поля) из простых форм.

Text — подписывать элементы и создавать контент.

!Памятка, как эти четыре инструмента вместе собирают интерфейс

Быстрая карта инструментов и шорткатов

| Инструмент | Зачем нужен | Что вы делаете чаще всего | Шорткат (по умолчанию) | |---|---|---|---| | Move | Управлять объектами | выделять слой, двигать, копировать, менять порядок | V | | Frame | Делать экраны и контейнеры | создать экран телефона, сделать секцию, включить клиппинг | F | | Shape | Быстро собрать UI из блоков | прямоугольники для кнопок и карточек, линии-разделители | R (прямоугольник) | | Text | Добавить содержимое | заголовки, подписи, текст в кнопках | T |

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

Справка: Keyboard shortcuts in Figma

Move: выделение, перемещение и порядок слоев

Move — это “режим по умолчанию”, в котором вы проводите большую часть времени. Он нужен не только чтобы двигать объекты, но и чтобы точно управлять тем, что именно вы редактируете.

Что важно понять новичку

Вы редактируете то, что выделено: смотрите название слоя слева и рамку выделения на холсте.

Если выделяется “не то”, чаще всего вы попадаете в контейнер (фрейм) вместо элемента внутри.

Если элемент “не кликается”, возможно он заблокирован, спрятан или перекрыт другим слоем.

Самые частые действия в Move

Выделить объект кликом на холсте.

Выделить объект через Layers слева.

Передвинуть объект мышью.

Передвинуть объект на небольшое расстояние стрелками на клавиатуре.

Дублировать объект (обычно быстрее, чем рисовать заново).

Практичное правило: если вы часто “роняете” элементы мимо, сначала научитесь уверенно выделять слой через левую панель — это быстрее и точнее, чем “вылавливать” на холсте.

Frame: экран и контейнер, на котором держится дизайн

Frame (фрейм) — базовый контейнер в Figma. В UX/UI чаще всего фрейм — это:

экран (например, мобильный экран 390×844);

секция внутри экрана (например, шапка, список карточек);

блок, который должен вести себя как самостоятельная область.

Справка: Frames in Figma

Почему для интерфейсов важны именно фреймы

Фрейм помогает держать структуру: элементы лежат внутри экрана, а не “где-то рядом”.

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

По слоям сразу видно, где “экран” и где “элементы экрана”.

Как создать первый экран

Выберите Frame (F).

В правой панели выберите готовый пресет устройства (например, iPhone) или задайте размер вручную.

Переименуйте фрейм в Layers (например, Home, Login), чтобы не получить “Frame 1, Frame 2, Frame 3”.

Две настройки фрейма, которые новичку встречаются постоянно

Clip content (обрезать содержимое): если элемент вылез за границы фрейма, он визуально не будет торчать наружу.

Fill (заливка фрейма): обычно это фон экрана (часто белый или светло-серый).

Важно: когда вы двигаете элементы, следите, чтобы они были вложены в правильный фрейм (это видно по отступу и вложенности в Layers).

Shape: из простых форм собирается 80% интерфейса

Shape (фигуры) — это быстрый способ “построить” интерфейс из блоков, даже если вы пока не рисуете сложную графику.

Что чаще всего делают фигурами:

фон кнопок и карточек (прямоугольники);

поля ввода (прямоугольник + обводка);

разделители (линия);

бейджи, иконные подложки (круг/скругленный прямоугольник).

Прямоугольник — главный shape для новичка

Прямоугольник обычно используется для UI-элементов, потому что его легко превратить в знакомые паттерны:

кнопка: прямоугольник со скруглением + текст;

карточка: прямоугольник + тень/обводка + контент внутри;

инпут: прямоугольник + обводка + текст-плейсхолдер.

Ключевые свойства прямоугольника справа:

Fill (заливка): цвет фона элемента.

Stroke (обводка): граница (часто у инпутов и карточек).

Corner radius (скругление): чтобы получить “кнопочный” вид.

Новичковая ошибка: нарисовать прямоугольник “поверх текста” и потом не понимать, почему текст не выделяется. Проверяйте порядок слоев в Layers: фон обычно лежит ниже, текст — выше.

Text: читаемость и иерархия важнее “красивого шрифта”

Инструмент Text добавляет текстовый слой. В UX/UI текст — это не декор, а часть сценария: пользователь читает, сравнивает и принимает решение.

Что вы будете делать текстом чаще всего

Заголовки экрана.

Подписи к полям.

Текст в кнопках.

Служебные сообщения (ошибка, подсказка).

База, которую стоит держать в голове

Лучше 2–3 размера текста, чем 10: так появляется визуальная система.

Контраст и размер важнее редкого “модного” шрифта.

Выравнивание и отступы делают текст “профессиональным” даже в самом простом макете.

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

Мини-процесс: собрать первый “каркасный” экран только этими инструментами

Этот порядок помогает не путаться и связывает тему с UX-логикой из первой статьи (сначала структура, потом оформление).

Frame: создайте экран устройства и задайте фон.

Shape: накидайте крупные блоки (шапка, карточки, кнопка) простыми прямоугольниками.

Text: подпишите блоки и добавьте реальный смысл (заголовки, CTA на кнопке).

Move: выровняйте, проверьте вложенность слоев, наведите порядок в названиях.

Если вы делаете так, вы одновременно тренируете:

UX-структуру (понятная компоновка и смысловые блоки);

UI-аккуратность (ровные отступы, читаемый текст, порядок в слоях).

Частые проблемы новичка и быстрые решения

| Проблема | Почему так бывает | Что сделать | |---|---|---| | Не могу выделить нужный элемент | он перекрыт/заблокирован/спрятан | выделите через Layers, проверьте “глаз” и “замок” | | Элемент “улетел” не туда | вы двигали не тот слой или не в том фрейме | проверьте вложенность в Layers и используйте Shift + 2 для поиска выделенного | | Экран выглядит “криво” | случайные отступы и разные размеры | двигайте стрелками, выравнивайте блоки относительно друг друга | | Текст выглядит непрофессионально | нет иерархии размеров и высоты строк | ограничьтесь 2–3 размерами и держите одинаковые отступы |

Дальше, когда эти четыре инструмента станут привычными, вы сможете перейти к более “дизайнерским” возможностям Figma (выравнивание, сетки, Auto Layout, компоненты). Но фундамент — всегда один: контейнер (Frame) → блоки (Shapes) → смысл (Text) → точное управление (Move).

Выравнивание и сетки: Auto Layout, Constraints и Layout Grid

После инструментов Frame, Shape, Text, Move следующий шаг — научиться делать интерфейсы ровными и предсказуемыми. Новички часто собирают экран «на глаз», и он выглядит нормально… пока не нужно:

поменять текст на более длинный

добавить еще одну карточку

адаптировать под другой размер экрана

быстро выровнять десятки элементов

В Figma за это отвечают три ключевые механики:

Alignment и равные отступы (база аккуратного UI)

Constraints (как элементы “держатся” внутри фрейма при изменении размера)

Layout Grid (сетка для системных отступов и колонок)

Auto Layout (автоматические отступы и «резиновая» верстка блоков)

!Памятка: как сетка, constraints и auto layout решают разные задачи

Зачем дизайнеру выравнивание

UI кажется профессиональным, когда в нем стабильны три вещи:

Ось: элементы выстроены по линиям (левый край, центр, базовая линия текста)

Отступы: расстояния повторяются (например, всегда 16 между блоками)

Размеры: похожие элементы имеют одинаковую высоту/ширину

В Figma это достигается не «идеальным глазом», а настройками и инструментами.

Быстрое выравнивание без магии

В режиме Move (V) вы чаще всего делаете четыре действия:

выравниваете элементы по левому/правому краю или по центру

распределяете расстояние между элементами равномерно

проверяете расстояния (визуально и через позиционирование справа)

используете одинаковые значения отступов

Полезное правило: если вы постоянно вручную двигаете элементы, чтобы «попасть в одинаковый отступ», скорее всего пора использовать Auto Layout.

Constraints: как элементы ведут себя при изменении размера фрейма

Constraints (ограничения) — это правила, которые говорят Figma, к какой стороне фрейма “приклеен” элемент и растягивается ли он при изменении размера контейнера.

Constraints применяются, когда вы:

тянете фрейм (экран или блок) шире/уже

делаете адаптивные варианты макета

готовите прототип, где элементы должны оставаться на месте

Простое объяснение на примерах

Представьте фрейм как коробку.

Кнопка с Left + Top останется в левом верхнем углу.

Иконка с Right + Top будет держаться правого верхнего угла.

Поле поиска с Left + Right растянется по ширине вместе с фреймом.

Нижняя панель с Left + Right + Bottom будет тянуться по ширине и оставаться у низа.

Как быстро настроить constraints

Выделите элемент внутри фрейма.

Справа найдите блок Constraints.

Выберите по горизонтали и вертикали нужное поведение (например, Left и Top).

Потяните фрейм за край и проверьте, как ведет себя элемент.

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

Layout Grid: сетка для системных отступов

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

Сетка особенно полезна, когда вы делаете:

экраны мобильного приложения с одинаковыми полями

веб-страницы с колонками

списки карточек, где важно «попадать» в одну систему

Виды сеток в Figma

Grid: равномерная сетка (реже для интерфейсов новичка)

Columns: колонки (самый частый вариант для веба)

Rows: строки (полезно для модулей по вертикали)

Как добавить layout grid на фрейм

Выделите фрейм (экран).

В правой панели найдите Layout grid.

Нажмите +.

Выберите тип (часто Columns).

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

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

Сетка не выравнивает за вас

Layout grid — это «линейка», а не автопилот. Она помогает видеть, где элементы стоят неровно, но сами элементы вы выравниваете выравниванием, отступами и Auto Layout.

Auto Layout: автоматические отступы, выравнивание и «резиновая» логика

Auto Layout — это режим для фрейма, в котором внутренние элементы:

автоматически раскладываются по вертикали или горизонтали

сохраняют одинаковые расстояния (gap) между собой

имеют внутренние поля (padding)

могут растягиваться по ширине/высоте контейнера

Auto Layout — главный инструмент, который превращает «нарисованный интерфейс» в «собранный как конструктор».

Когда Auto Layout нужен почти всегда

кнопка: фон + текст, где текст может быть разной длины

список: элементы идут один за другим с одинаковым отступом

карточка: заголовок, описание, цена, кнопка — и всё должно двигаться согласованно

верхняя панель: слева название, справа иконки, между ними гибкое пространство

Основные параметры Auto Layout простыми словами

Direction: вертикально или горизонтально складывать элементы

Gap: расстояние между элементами

Padding: внутренние отступы контейнера со всех сторон

Alignment: куда прижимаются элементы внутри контейнера

Hug / Fill:

- Hug contents: размер подстраивается под содержимое - Fill container: элемент растягивается, чтобы заполнить контейнер

Важно: Auto Layout применяется к Frame, поэтому часто вы превращаете группу или обычный фрейм в «контейнер», который сам управляет раскладкой.

Мини-процесс: собрать кнопку правильно

Нарисуйте прямоугольник и текст (или только текст).

Поместите текст и фон в один фрейм.

Включите Auto Layout для фрейма.

Задайте padding (например, сверху/снизу и слева/справа).

Поставьте тексту режим Hug contents.

Проверьте: поменяйте текст на длинный — кнопка должна увеличиться сама.

Если кнопка не “растет”, чаще всего проблема в том, что включен неправильный режим размера (например, фиксированная ширина вместо Hug).

Как связать Auto Layout, Constraints и Layout Grid в одном экране

Удобная логика работы для новичка:

Frame: создайте экран (как вы делали в прошлой теме).

Layout Grid: настройте поля и колонки, чтобы сразу держать систему.

Крупные блоки: шапка, список, нижняя панель.

Auto Layout внутри блоков:

- список карточек — вертикальный auto layout - карточка — вертикальный auto layout - кнопки в карточке — горизонтальный auto layout

Constraints для элементов, которые должны держаться краев:

- нижняя панель — Bottom и растяжение по ширине - хедер — Top и растяжение по ширине

Простой ориентир:

Layout Grid отвечает за “куда ставить по системе”.

Auto Layout отвечает за “как блок живет внутри себя”.

Constraints отвечают за “как блок ведет себя при изменении контейнера”.

Частые ошибки новичков и как исправить

| Ошибка | Как выглядит | Что сделать | |---|---|---| | Всё выровнено «на глаз» | отступы разные на 1–3 px | использовать одинаковые значения и auto layout для списков | | Constraints настроены, но не работают | элемент не держится края при ресайзе | проверить: элемент внутри нужного фрейма, выделен именно элемент | | Сетка есть, но элементы не “попадают” | карточки прыгают по колонкам | начать с единых полей и выравнивать по направляющим | | Кнопки разной высоты | текст разный, фон фиксированный | сделать кнопку через auto layout и padding |

Что важно запомнить перед следующими темами

Аккуратность интерфейса — это повторяемые оси и отступы, а не «чуть подвигал и норм».

Constraints нужны, чтобы элементы правильно себя вели при изменении размеров.

Layout Grid помогает держать системные поля и колонки.

Auto Layout — главный инструмент для списков, карточек, кнопок и любых повторяющихся блоков.

Официальная справка по возможностям Figma доступна в Figma Help Center.

Стили и компоненты: цвета, шрифты, Variants и библиотека

До этого вы научились собирать экраны из Frame, Shape, Text и делать их аккуратными с помощью выравнивания, сеток, Constraints и Auto Layout. Следующий шаг — сделать дизайн системным: чтобы кнопки, тексты и цвета были едиными, а изменения вносились быстро и без «передвигать каждый экран вручную».

В Figma за это отвечают две опоры:

Styles (стили) — единые правила для цвета, текста, эффектов и сеток

Components (компоненты) — переиспользуемые элементы интерфейса (кнопка, поле ввода, карточка)

А Variants и библиотека помогают превратить набор элементов в удобный конструктор для всех экранов.

!Карта темы: как стили, компоненты, варианты и библиотека связаны между собой

Что такое стили и зачем они новичку

Стиль в Figma — это сохраненный набор настроек, который можно применить к разным объектам.

Чаще всего используются:

Color styles — цвета (фон, текст, границы)

Text styles — параметры текста (шрифт, размер, межстрочный интервал)

Effect styles — тени и размытия

Layout grid styles — сетки для фреймов

Зачем стили нужны в реальной работе:

чтобы одинаковые элементы выглядели одинаково

чтобы менять дизайн массово (например, один раз поменять цвет бренда)

чтобы быстрее собирать новые экраны

Справка и документация: Figma Help Center

Цветовые стили: как сделать палитру, которая работает

Базовый набор цветов для учебного проекта

Чтобы не утонуть в «миллионе оттенков», начните с небольшого набора:

Primary — основной брендовый цвет (например, для главных кнопок)

Text — основной цвет текста

Background — фон экрана

Surface — фон карточек/панелей

Stroke — цвет границ/разделителей

Error — цвет ошибок

Важно: не пытайтесь сразу «нарисовать идеальную палитру». На старте задача — сделать систему, где повторяемое оформлено повторяемо.

Как создать Color Style

Нарисуйте любой объект (например, прямоугольник) или выберите текст.

В правой панели у свойства Fill (или Text color) задайте нужный цвет.

Откройте меню стиля (иконка выбора стиля рядом с цветом).

Нажмите создать стиль и дайте понятное имя.

Как называть цвета, чтобы не путаться

Хорошая схема именования для новичка:

Color/Primary

Color/Text/Primary

Color/Background

Color/Stroke

Color/Status/Error

Смысл: вы называете цвет по роли, а не по «красивости». Тогда вы легко решаете UX/UI-задачу: где этот цвет должен применяться.

Текстовые стили: единая типографика вместо хаоса

Text styles позволяют закрепить иерархию текста. Даже в маленьком приложении быстро появляются:

заголовок

подзаголовок

основной текст

подписи

текст на кнопках

Минимальный набор текстовых стилей для старта

Text/H1 — заголовок экрана

Text/Body — основной текст

Text/Caption — подписи и вспомогательные тексты

Text/Button — текст на кнопках

Как создать Text Style

Создайте текст (T) и задайте параметры (шрифт, размер, насыщенность, высоту строки).

В правой панели в блоке текста откройте меню стилей.

Создайте стиль и назовите его.

Практичный принцип: если вы используете одинаковый текстовый слой в 3 местах — он уже кандидат на стиль.

Эффекты и сетки как стили

Effect Styles

Частая задача: одинаковая тень у карточек и модальных окон.

Создайте тень у элемента в Effects.

Сохраните её как стиль (например, Effect/Elevation/1).

Так вы избегаете ситуации «у карточек тень почти одинаковая, но везде чуть-чуть разная».

Layout Grid Styles

Если вы используете одинаковую сетку (например, мобильные поля 16 px), её тоже можно сохранить стилем.

Настройте Layout grid у фрейма.

Сохраните как стиль.

Применяйте к другим экранам.

Компоненты: как перестать рисовать одни и те же кнопки

Компонент — это элемент интерфейса, который вы создаете один раз и используете многократно.

Термины, которые нужно понимать:

Main component — главный компонент-источник

Instance — экземпляр компонента, который вы размещаете в макете

Главная польза:

вы меняете главный компонент — обновляются экземпляры

вы собираете интерфейс как конструктор

Что превращать в компоненты в учебном проекте

Начните с того, что встречается почти в каждом продукте:

Button (кнопка)

Input (поле ввода)

Checkbox/Toggle (чекбокс/переключатель)

Card (карточка)

Top bar (шапка)

Как собрать кнопку правильно: стили + Auto Layout + компонент

Кнопка — лучший учебный объект, потому что в ней сразу видно пользу системы.

Рекомендуемый процесс:

Создайте текст кнопки и примените стиль Text/Button.

Оберните текст во фрейм и включите Auto Layout.

Задайте padding и выравнивание.

Добавьте фон (Fill) и привяжите его к Color/Primary.

Превратите фрейм в компонент.

Результат: если текст станет длиннее, кнопка растянется; если поменяется цвет Color/Primary, обновятся все кнопки.

Variants: состояния и типы элементов без дубликатов

Variants (варианты) — это способ хранить несколько версий одного компонента в одном наборе.

Зачем они нужны:

не плодить десятки отдельных компонентов Button/Primary, Button/Secondary, Button/Disabled

быстро переключать состояние/тип у экземпляра

поддерживать порядок в библиотеке

!Пример, как варианты описывают тип и состояние кнопки

Какие свойства вариантов делать новичку

Для кнопки обычно достаточно двух свойств:

Type: Primary, Secondary, Tertiary

State: Default, Hover, Pressed, Disabled

Если хотите усложнить аккуратно:

Icon: Yes/No (кнопка с иконкой и без)

Как мыслить вариантами с точки зрения UX/UI

Type — отвечает за приоритет действия (главное или второстепенное)

State — отвечает за обратную связь и доступность (можно нажать или нельзя)

Это напрямую связано с UX: пользователь должен понимать, что главное и в каком состоянии интерфейс.

Экземпляры, переопределения и дисциплина

Когда вы используете компонент на экране, вы работаете с instance.

Что обычно можно переопределять безопасно:

текст (например, «Войти» → «Продолжить»)

иконку (если она предусмотрена структурой)

Чего лучше избегать новичку:

менять размеры и отступы «как получится»

откреплять экземпляр без причины

Если экземпляр стал «неуправляемым», часто помогает:

вернуть его к исходному виду через сброс переопределений

Смысл дисциплины простой: компоненты экономят время только тогда, когда вы им доверяете и не ломаете их структуру на каждом экране.

Библиотека: как переиспользовать систему между файлами

Когда компоненты и стили сделаны, следующий шаг — использовать их не только в одном файле.

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

Когда библиотека нужна

вы делаете несколько файлов (например, Мобильные экраны и Маркетинговые страницы)

вы работаете в команде

вы хотите, чтобы «источник правды» был один

Практичная структура учебного проекта

Один файл: Design System (стили + компоненты)

Второй файл: App UI (экраны, собранные из библиотеки)

Как не сломать всё обновлениями

Правила безопасности для новичка:

сначала наводите порядок в именах и вариантах

публикуйте изменения небольшими шагами

старайтесь не удалять компоненты без необходимости

Мини-чеклист: что должно получиться после этой темы

Созданы и применяются Color styles и Text styles

Собран компонент Button на Auto Layout

У кнопки есть Variants по Type и State

Экраны собираются из instances, а не из «копий прямоугольников»

Понимаете, зачем нужна библиотека и как она снижает хаос

Дальше, когда стили и компоненты станут привычкой, вы сможете собирать сложные экраны быстрее и увереннее: вы будете думать не «как нарисовать», а «какой компонент и в каком состоянии нужен для сценария».

Прототипирование и экспорт: интерактивность, Preview и Dev handoff

После того как вы научились собирать экраны (Frame, Shape, Text), выравнивать их (сетки, Auto Layout, Constraints) и систематизировать элементы (стили, компоненты и Variants), логичный следующий шаг — показать, как интерфейс работает, и передать результат в разработку.

В этой теме вы разберете:

как сделать кликабельный прототип из ваших экранов

как проверять сценарии через Preview

как подготовить файл, чтобы разработчику было легко забрать размеры, цвета, шрифты и экспортировать ассеты

!Схема показывает, как экраны превращаются в прототип и затем передаются в разработку

Что такое прототип в Figma

Прототип — это интерактивная модель интерфейса: вы нажимаете кнопки, переходите между экранами, открываете модальные окна и проверяете, понятен ли сценарий.

Важно: прототип не заменяет разработку. Его задача — быстро проверить UX-логику и показать поведение UI.

Термины, которые вам понадобятся:

Экран (Frame) — ваш макет экрана приложения или страницы.

Связь (Interaction) — правило “что произойдет при действии”.

Триггер (Trigger) — действие пользователя (например, On click).

Действие (Action) — что сделать (например, Navigate to другой экран).

Переход (Transition) — как именно происходит смена (например, Instant).

Preview — режим просмотра прототипа, где вы кликаете как пользователь.

Официальная документация по возможностям и разделам Figma собрана в Figma Help Center.

Вкладка Prototype: где включается интерактивность

Для прототипирования вы переключаетесь из Design во вкладку Prototype. Там вы настраиваете связи между фреймами и поведение компонентов.

Типичный новичковый подход:

сначала вы делаете несколько ключевых экранов

затем связываете их базовыми переходами

потом тестируете сценарий в Preview и исправляете

Самые нужные взаимодействия новичка

Ниже — набор взаимодействий, который покрывает большинство учебных задач.

| Что нужно показать | Типичное взаимодействие | Когда использовать | |---|---|---| | Переход на другой экран | Navigate to | Кнопка “Далее”, переходы по меню | | Открыть модальное окно/попап | Open overlay | Подтверждение, фильтры, подсказки | | Закрыть модальное | Close overlay | Крестик, кнопка “Закрыть” | | Вернуться назад | Back | “Назад”, стрелка в хедере | | Прокрутка внутри экрана | Scroll в прототипе | Длинные списки, лента |

Мини-процесс: собрать кликабельный сценарий из 3–5 экранов

Чтобы прототип был полезным, собирайте не “все подряд”, а один понятный пользовательский путь.

Пример учебного сценария:

Login → Home → Details → Checkout → Success

Соберите его так:

Подготовьте фреймы-экраны и назовите их понятно: Login, Home, Product, Checkout.

Переключитесь во вкладку Prototype.

Выберите кнопку на экране Login.

Добавьте взаимодействие: триггер On click → действие Navigate to → экран Home.

Повторите для ключевых кнопок на остальных экранах.

Настройте стартовый экран (обычно Login или Home) через параметр стартовой точки прототипа.

Запустите Preview и пройдите сценарий как пользователь.

Практическое правило UX: если в Preview вы сами “теряетесь”, значит пользователю будет еще сложнее — возвращайтесь к структуре и подсказкам в UI.

Оверлеи: как показать модальные окна

Модальные окна (например, “Вы уверены?”) удобно делать через Overlay.

Как мыслить правильно:

модальное окно — это отдельный фрейм

открывается поверх текущего экрана

не “ломает” основной сценарий переходом на новую страницу

Новичку важно не переборщить:

используйте оверлеи для коротких действий

если внутри “модалки” начинается большой сценарий — возможно, это уже отдельный экран

Анимации и Smart Animate: когда уместно

В прототипе часто хочется “красиво анимировать”. Для новичка важнее другое: чтобы переход объяснял, что произошло.

Хорошие случаи для анимации:

появление оверлея (легкое появление сверху/снизу)

переключение табов

раскрытие блока (аккордеон)

Слабые случаи:

сложные анимации без смысла

анимации, которые замедляют проверку сценария

Если вы используете Smart Animate, проверяйте, что состояния элементов действительно логичны: одинаковые слои должны быть сопоставимы (одинаковые названия и структура помогают).

Interactive components: прототип внутри компонента

Когда у вас уже есть компоненты и Variants (например, кнопка Default/Hover/Pressed/Disabled), полезно знать про идею интерактивности внутри компонента.

Зачем это нужно:

вы показываете нажатие/переключение без создания лишних экранов

поведение переиспользуется везде, где стоит экземпляр компонента

Новичку достаточно понимать принцип:

один компонент может “переключаться” между вариантами по действию (например, по клику)

это удобно для демонстрации состояний, но не заменяет полноценные переходы по экрану

Preview: как правильно проверять прототип

Preview — это ваша мини-лаборатория UX.

Проверяйте не только “работают ли ссылки”, а сценарий целиком:

понятно ли, что нажимать дальше

есть ли визуальная обратная связь (состояния кнопок, подсказки)

не теряется ли пользователь, когда закрывает оверлей

логично ли возвращение назад

Полезная привычка:

заведите список найденных проблем прямо в файле (на странице 00 Notes) и правьте прототип итерациями

Экспорт: что и в каком виде отдавать

Экспорт в Figma обычно нужен в двух случаях:

вам нужно показать дизайн вне Figma (картинки, PDF)

нужно отдать графику для продукта (иконки, иллюстрации)

Основные форматы экспорта

PNG — растровая графика, подходит для картинок и простых элементов, где не важна векторность.

JPG — обычно для фотографий (меньше вес, хуже качество на резких границах).

SVG — вектор, лучший вариант для иконок и простой графики.

PDF — удобно для презентации макетов и передачи “как документ”.

Как не ошибиться новичку

Иконки и простая графика: чаще всего SVG.

Скриншоты экранов для презентации: PNG.

Пакет экранов “показать заказчику/преподавателю”: PDF.

Что именно экспортировать

Чтобы разработчику было проще, экспортируйте не “кусок экрана”, а осмысленные элементы:

иконки

иллюстрации

изображения для карточек (если они не берутся из реального контента)

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

Dev handoff: как подготовить файл к передаче в разработку

Dev handoff — это процесс, где дизайнер делает так, чтобы разработчик:

быстро понял структуру

увидел размеры, отступы и стили

получил состояния компонентов

нашел нужные ассеты для экспорта

В Figma это обычно делается через просмотр свойств и инспектирование параметров (часто используют режим Inspect или Dev Mode, в зависимости от вашего тарифа и настроек команды).

Что облегчает жизнь разработчику

Понятные названия фреймов и слоев (не Rectangle 12, а Button/Primary, Card/Product).

Компоненты и стили вместо “ручных копий”.

Auto Layout там, где он логичен (кнопки, списки, карточки).

Аккуратная структура страниц: UI, Components, Notes.

Что стоит зафиксировать перед handoff

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

Убедитесь, что состояния компонентов существуют (например, Disabled у кнопки).

Сохраните понятную точку версии в истории файла (например, Handoff v1), чтобы не было путаницы “а где финал”.

Комментарии и заметки в файле

Если какое-то поведение неочевидно из макета, оставляйте короткие пояснения:

что происходит при ошибке в форме

когда кнопка должна быть отключена

какие поля обязательные

Правило: комментарий должен объяснять логику, а не “сделайте красиво”.

Мини-чеклист перед отправкой ссылки

Прототип проходит основной сценарий без тупиков.

Экраны подписаны и разложены по порядку.

Компоненты и стили применены (кнопки и тексты не “вручную” каждый раз).

Важные ассеты подготовлены и экспортируемы.

Ссылка выдана с правильными правами доступа (просмотр/комментарии — если человеку не нужно редактировать).

Как эта тема связывает весь курс

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

UI из тем про инструменты и выравнивание проявляется как аккуратные состояния, предсказуемые отступы и читабельность.

Стили, компоненты и Variants превращают прототип из “набора картинок” в систему, которую можно поддерживать.

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