Основы Figma: Быстрый старт в дизайне интерфейсов

Знакомство с интерфейсом, создание фреймов и базовые фигуры

Добро пожаловать в курс «Основы Figma: Быстрый старт в дизайне интерфейсов»! Если вы читаете эту статью, значит, вы решили освоить один из самых популярных инструментов для дизайна в мире. Figma изменила правила игры в индустрии, позволив дизайнерам, разработчикам и менеджерам работать над проектами вместе в режиме реального времени, прямо в браузере.

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

Что такое Figma и почему она так популярна?

Figma — это графический редактор для создания интерфейсов сайтов, приложений и презентаций. Её главная особенность — облачность. Вам не нужно постоянно нажимать Ctrl + S (хотя привычка может остаться), так как все изменения сохраняются автоматически. Вы можете открыть свой макет с любого компьютера, просто залогинившись в аккаунт.

Обзор интерфейса: Карта местности

Когда вы впервые создаете новый файл (New Design File), перед вами открывается рабочее пространство. На первый взгляд оно может показаться пустым или, наоборот, перегруженным кнопками. Давайте разделим интерфейс на четыре ключевые зоны.

!Схема интерфейса Figma с разделением на основные рабочие зоны.

1. Панель инструментов (Toolbar)

Находится в самом верху экрана. Это ваш пенал с карандашами и линейками. Здесь живут основные инструменты, которыми вы будете пользоваться 90% времени:

* Главное меню (иконка Figma): доступ к настройкам, плагинам и экспорту. * Инструменты выбора (Move/Scale): стрелочка для перемещения объектов. * Инструменты создания (Region tools): здесь прячутся Фреймы (Frames) и Секции. * Фигуры (Shape tools): прямоугольники, круги, линии. * Перо и Карандаш (Pen/Pencil): для рисования векторов. * Текст (Text): буква «T». * Ресурсы (Resources): иконка ромбика, где лежат компоненты и плагины.

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

2. Панель слоев и активов (Left Sidebar)

Левая колонка — это навигатор вашего проекта. У неё есть две вкладки:

* Layers (Слои): Здесь отображается иерархия всего, что есть на холсте. Если вы нарисовали квадрат, он появится здесь. Если квадрат лежит внутри фрейма, он будет отображаться как вложенный элемент (дочерний) внутри фрейма (родительского). * Assets (Активы): Библиотека ваших компонентов (кнопок, иконок), которые вы создадите позже для повторного использования.

3. Панель свойств (Right Sidebar)

Правая колонка — это пульт управления. Её содержимое меняется в зависимости от того, что вы выделили на холсте. Она разделена на три вкладки, но чаще всего вы будете работать в первой — Design.

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

4. Холст (Canvas)

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

> Совет: Чтобы перемещаться по холсту, зажмите Пробел (курсор превратится в «руку») и тяните мышкой. Чтобы приблизить или отдалить, используйте Ctrl + колесико мыши (Windows) или Cmd + колесико мыши (Mac).

Фреймы: Фундамент вашего дизайна

Новички часто путают Фрейм (Frame) с обычным прямоугольником или группой объектов. Это самая важная концепция в Figma.

В графических редакторах прошлого (например, Photoshop) мы часто использовали «Группы», чтобы объединять слои. В Figma мы используем Фреймы. Фрейм — это не просто рамка, это контейнер, который имитирует экран устройства или отдельный блок интерфейса.

Чем Фрейм отличается от Группы?

Свой размер: Фрейм имеет свои независимые размеры. Группа же всегда равна сумме размеров объектов внутри неё.

Обрезка контента (Clip Content): Фрейм может скрывать (обрезать) объекты, которые выходят за его границы. Это полезно, когда нужно показать прокручиваемый список или карту внутри экрана телефона.

Сетки и Layout: Только к фреймам можно применять модульные сетки и автоматическое выравнивание (Auto Layout).

Как создать фрейм?

Выберите инструмент Frame в верхней панели или нажмите горячую клавишу F (от слова Frame). Это самый быстрый способ.

Обратите внимание на правую панель. Там появится список пресетов (готовых размеров): Phone, Tablet, Desktop.

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

Поздравляем, вы создали свой первый «экран»!

!Иллюстрация различий между поведением Группы и Фрейма.

Базовые фигуры: Кирпичики интерфейса

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

Инструменты фигур находятся в выпадающем меню рядом с инструментом Frame (или вызываются горячими клавишами).

Прямоугольник (Rectangle)

* Горячая клавиша: R * Самый используемый инструмент. Им рисуют фоны, карточки, кнопки, поля ввода. * Чтобы нарисовать квадрат, зажмите клавишу Shift во время рисования.

Эллипс (Ellipse)

* Горячая клавиша: O (похожа на круг) * Используется для аватарок, индикаторов статуса, радио-кнопок. * Чтобы нарисовать идеальный круг, также зажмите Shift.

Линия (Line) и Стрелка (Arrow)

* Горячие клавиши: L (Line) и Shift + L (Arrow) * Используются для разделителей или указателей.

Работа со свойствами фигур

Давайте нарисуем прямоугольник и посмотрим на правую панель (Design). Что мы можем изменить?

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

Координаты и размеры:

* X и Y — положение объекта. * W (Width) — ширина. * H (Height) — высота. * Иконка «цепочки» между W и H связывает пропорции. Если она включена, при изменении ширины высота изменится автоматически. * Угол поворота (иконка угла) и скругление углов (Corner Radius — иконка дуги).

Fill (Заливка): Цвет фигуры. Нажмите на цветной квадрат, чтобы открыть палитру. Вы можете выбрать сплошной цвет, градиент или даже вставить изображение как заливку.

Stroke (Обводка): Граница фигуры. Можно задать толщину, цвет и положение (внутри, снаружи или по центру линии).

Effects (Эффекты): Тени (Drop Shadow), размытие (Blur).

Манипуляции с объектами

Научиться быстро управлять объектами — залог высокой скорости работы.

Выделение

Используйте инструмент Move (V). Кликните по объекту, чтобы выделить его. Чтобы выделить группу объектов, растяните рамку курсором вокруг них или зажмите Shift и кликайте по объектам по очереди.

Перемещение

Просто перетаскивайте объекты мышкой. Figma будет показывать красные направляющие (Smart Guides), помогая выравнивать объекты относительно друг друга. Это очень удобно для создания аккуратных макетов.

Дублирование

Секретный прием профи: выделите объект, зажмите клавишу Alt (Windows) или Option (Mac) и потяните объект в сторону. Вы создадите копию. Это намного быстрее, чем Ctrl+C / Ctrl+V.

Изменение размера (Scale vs Resize)

Это тонкий момент. Обычно мы меняем размер, просто потянув за край рамки (инструмент Move, V). Но если у вас сложная группа с текстом и обводками, простое изменение размера может всё сломать (текст не увеличится, обводка останется тонкой).

Для пропорционального масштабирования всего содержимого используйте инструмент Scale (клавиша K).

Организация слоев

Посмотрите на левую панель (Layers). По мере добавления фигур там появляется список: Rectangle 1, Ellipse 1, Frame 1.

Золотое правило дизайнера: Называйте слои осмысленно. Вместо Rectangle 45 напишите Button Background. Вместо Frame 2 — Login Screen.

* Чтобы переименовать слой, дважды кликните по его названию в панели слоев или нажмите Ctrl + R (Cmd + R). * Чтобы сгруппировать объекты (например, иконку и текст кнопки), выделите их и нажмите Ctrl + G (Cmd + G). Но помните, что часто лучше использовать Фреймы, а не Группы. * Замочек рядом со слоем блокирует его (нельзя случайно сдвинуть), а глазик — скрывает.

Заключение

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

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

Работа с типографикой, цветом, эффектами и стилями

В предыдущей статье мы научились создавать «скелет» нашего интерфейса: разобрались с фреймами, прямоугольниками и базовой навигацией. Но пока наши макеты выглядят как серые чертежи. Чтобы превратить чертеж в живой, привлекательный продукт, нам нужно добавить «душу» и «кожу» — текст, цвет и визуальные эффекты.

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

Типографика: Голос вашего интерфейса

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

Создание текстового слоя

Инструмент Text активируется клавишей T. У вас есть два способа создать текстовый блок, и они кардинально отличаются по поведению:

Клик (Point Text): Если вы просто кликнете инструментом текста в любом месте холста и начнете печатать, текстовый контейнер будет расширяться по горизонтали бесконечно. Это идеально подходит для заголовков или коротких надписей (например, текст на кнопке).

Перетаскивание (Paragraph Text): Если вы зажмете кнопку мыши и растянете область (как прямоугольник), вы создадите текстовый блок с фиксированной шириной. Текст, доходя до границы, будет автоматически переноситься на новую строку. Это нужно для абзацев и длинных описаний.

!Различие поведения текстового контейнера при клике и при растягивании области.

Панель настройки текста

Когда текстовый слой выделен, в правой панели свойств (Design) появляется секция Text. Давайте разберем самые важные настройки:

* Font Family (Семейство шрифта): По умолчанию стоит Inter или Roboto. Figma подтягивает все шрифты с вашего компьютера (если у вас установлено десктопное приложение) и огромную библиотеку Google Fonts. Вам не нужно скачивать Google-шрифты вручную, они уже там. * Font Weight (Начертание): Толщина букв (Regular, Medium, Bold). Для интерфейсов обычно используют 2–3 начертания, не больше. * Font Size (Размер): Размер шрифта в пикселях. Стандартный размер основного текста для веба — 16px. * Line Height (Межстрочный интервал): Расстояние между строками. Это критически важный параметр для читаемости. Если строки слиплись, текст читать трудно. > Совет: Для основного текста хорошим тоном считается интервал от 130% до 150% от размера шрифта. В Figma можно писать значение в процентах (например, 140%) или оставить Auto. * Letter Spacing (Межбуквенное расстояние): В типографике это называется трекинг. Для заголовков, набранных ЗАГЛАВНЫМИ (All Caps), имеет смысл немного увеличить это значение (например, 3%). Для обычного текста лучше оставить 0. * Paragraph Spacing: Отступы между абзацами. Позволяет не делать пустую строку Enter-ом, а настроить автоматический отступ.

Выравнивание и настройки контейнера

Внизу секции Text есть три иконки, управляющие поведением контейнера (Resizing):

Auto Width: Ширина контейнера подстраивается под текст (как при простом клике).

Auto Height: Ширина фиксирована, но высота растет по мере добавления текста.

Fixed Size: И ширина, и высота фиксированы. Если текста слишком много, он просто вылезет за границы или скроется.

Цвет и Заливка (Fill)

Цвет в Figma — это не просто краска, это свойство Fill (Заливка). Один объект может иметь несколько заливок одновременно, словно слоеный пирог.

Палитра цветов

Нажмите на цветной квадрат в секции Fill на правой панели, чтобы открыть Color Picker (Выбор цвета).

* Solid (Сплошной): Обычный однотонный цвет. Вы можете выбрать его на спектре или ввести HEX-код (например, #FF0000 для красного). * Linear / Radial / Angular / Diamond: Градиенты. Figma позволяет создавать очень плавные переходы. У градиента есть точки (ползунки), для каждой из которых можно задать свой цвет и прозрачность. * Image (Изображение): Да, в Figma картинка — это тоже вид заливки! Это значит, что вы можете наложить поверх картинки полупрозрачный цветной слой прямо внутри настроек одного объекта, просто добавив еще один Fill через плюс +.

Пипетка (Eyedropper)

Самый быстрый способ взять цвет с другого объекта или даже с картинки — инструмент «Пипетка».

* Горячая клавиша: I (от слова Ink). * Выберите объект, нажмите I и кликните по любому пикселю на экране. Ваш объект окрасится в этот цвет.

!Окно выбора цвета с основными инструментами.

Обводка (Stroke)

Секция Stroke отвечает за границы объекта. Она работает похоже на Fill, но имеет свои особенности:

* Толщина: Задается цифрой рядом с иконкой линий. * Позиция: Это важно. Обводка может быть: * Inside (Внутри): Граница растет внутрь объекта. Это стандарт для веб-дизайна, так как не меняет внешние габариты блока. * Outside (Снаружи): Граница растет наружу. * Center (По центру): Половина внутри, половина снаружи. * Advanced strokes: Нажав на три точки ... в меню Stroke, вы можете сделать линию пунктирной (Dashed) или настроить концы линий (сделать их скругленными).

Эффекты (Effects): Тени и Блюр

Эффекты добавляют глубину и акценты. Секция Effects позволяет добавлять:

1. Drop Shadow (Внешняя тень)

Самый популярный эффект. Используется для кнопок, карточек и всплывающих окон, чтобы «приподнять» их над фоном.

* X / Y: Смещение тени. * Blur: Размытие. Чем больше значение, тем мягче тень и тем «выше» кажется объект. * Spread: Расширение тени (делает её толще или тоньше).

2. Inner Shadow (Внутренняя тень)

Тень падает внутрь объекта. Часто используется для полей ввода (input) или создания эффекта вдавленности.

3. Layer Blur (Размытие слоя)

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

4. Background Blur (Размытие фона)

Тот самый эффект «матового стекла» (Glassmorphism), популярный в iOS и Windows.

Важное условие: Чтобы Background Blur сработал, слой, к которому вы его применяете, должен быть полупрозрачным (Fill Opacity < 100%). Иначе вы просто не увидите, что размывается под ним.

Стили: Ваша суперсила

Представьте, что вы сделали дизайн приложения из 50 экранов. Везде использовали фирменный синий цвет #0055FF. Вдруг заказчик говорит: «Давайте сделаем синий чуть светлее». Без стилей вам пришлось бы вручную искать и менять цвет на всех 50 экранах. Со стилями вы делаете это за 2 секунды.

Стиль (Style) — это сохраненный набор параметров (цвета, текста или эффектов), который можно применить к любому количеству объектов.

Как создать цветовой стиль?

Выберите объект, покрашенный в нужный цвет.

В панели свойств в секции Fill нажмите на иконку с четырьмя точками (::) — это кнопка библиотек стилей.

В открывшемся меню нажмите плюс (+).

Дайте стилю понятное имя. Например: Primary Blue или Text / Dark.

Нажмите Create Style.

Теперь вместо HEX-кода в панели свойств вы увидите имя вашего стиля. Если вы захотите изменить этот цвет везде, просто нажмите на иконку настроек (слайдеры) рядом с именем стиля, поменяйте цвет, и он обновится во всем макете мгновенно.

!Процесс сохранения цвета в стиль.

Текстовые стили

Работают аналогично. Вы настраиваете шрифт, размер, интерлиньяж, а затем сохраняете это как стиль (например, H1 - Header, Body - Regular).

Почему это важно?

* Скорость: Не нужно каждый раз вспоминать, какой там был размер шрифта у заголовков. * Консистентность: Ваш дизайн будет выглядеть аккуратно и профессионально, потому что везде используются одинаковые правила. * Удобство для разработчиков: Программистам проще видеть H1, чем каждый раз смотреть параметры 24px Bold Inter.

Detach Style (Отвязка стиля)

Если вам нужно изменить один конкретный элемент, не меняя глобальный стиль, вы можете «отвязать» его. Для этого нажмите на иконку разорванной цепи (Detach style) рядом с именем стиля. Объект сохранит свой вид, но потеряет связь с глобальной настройкой.

Организация стилей

Вы можете группировать стили, используя слэш / в названии. Например, если вы назовете цвета: * Blue / Primary * Blue / Secondary * Grey / 100 * Grey / 200

Figma автоматически разложит их по папкам Blue и Grey в меню выбора. Это очень помогает, когда цветов становится много.

Заключение

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

В следующей статье мы перейдем к одной из самых технически интересных тем — Компонентам и Auto Layout. Это то, что отличает новичка от профи, позволяя создавать адаптивные интерфейсы, которые перестраиваются сами при изменении контента.

Домашнее задание: Откройте свой файл с предыдущего урока. Создайте текстовые стили для заголовка и основного текста. Создайте цветовую палитру из 3-4 цветов и сохраните их в стили. Примените всё это к вашим фреймам.

Основы адаптивности: Auto Layout и привязки Constraints

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

Что произойдет с вашим идеально выверенным макетом iPhone 14, если заказчик попросит показать, как это выглядит на iPhone 14 Pro Max или на Android-устройстве? Если вы просто растянете фрейм, скорее всего, ваш дизайн «поедет»: кнопка останется висеть посередине пустоты, а текст не расширится.

Сегодня мы превратим наши «картины» в настоящие живые интерфейсы. Мы изучим два инструмента, которые отвечают за адаптивность в Figma: Constraints (Привязки) и Auto Layout (Автоматическая раскладка).

Constraints: Гвозди и резинки

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

По умолчанию, когда вы кладете объект во фрейм, Figma привязывает его к левому верхнему углу (Left & Top). Именно поэтому при растягивании фрейма вправо или вниз объект остается на месте.

Как работают привязки?

Выделите любой объект внутри фрейма. В правой панели свойств (Design) вы увидите раздел Constraints. Там изображен квадрат с перекрестием линий.

!Интерфейс настройки Constraints в панели свойств

У нас есть две оси настройки:

1. Горизонтальная ось (Horizontal)

* Left (Слева): Объект сохраняет фиксированное расстояние от левого края. Если тянуть правый край фрейма, объект стоит на месте. * Right (Справа): Объект «прилипает» к правому краю. Полезно для иконок меню или кнопок «Закрыть» в модальных окнах. * Left and Right (Слева и Справа): Самый интересный режим. Объект сохраняет отступы и слева, и справа. Это значит, что при расширении фрейма объект будет растягиваться вместе с ним. Идеально для полей поиска или карточек товара. * Center (По центру): Объект всегда остается в центре по горизонтали, независимо от ширины фрейма. * Scale (Масштабирование): Объект меняет размер и позицию в процентном соотношении. Если фрейм увеличился на 50%, объект тоже увеличится на 50% и сдвинется соответственно. Часто используется для иконок или векторной графики.

2. Вертикальная ось (Vertical)

Работает аналогично горизонтальной, но относительно верха и низа (Top, Bottom, Top and Bottom, Center, Scale).

Практический пример: Навигационная панель

Представьте, что вы делаете «шапку» сайта (Header). У вас есть логотип слева и кнопка «Войти» справа.

Поместите их во фрейм-шапку.

Для логотипа установите Constraints: Left и Center (по вертикали).

Для кнопки «Войти» установите: Right и Center.

Теперь попробуйте потянуть край фрейма-шапки. Логотип останется слева, а кнопка будет послушно двигаться вместе с правым краем, всегда оставаясь прижатой к нему. Магия!

Auto Layout: Суперсила дизайнера

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

Auto Layout основан на принципе CSS Flexbox, который используют разработчики. Освоив его, вы начнете «думать как браузер».

Как создать Auto Layout?

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

Нажмите сочетание клавиш Shift + A или нажмите плюс + рядом с надписью Auto layout в правой панели.

Вокруг объектов создастся специальный фрейм. Теперь вы не можете просто так двигать объекты внутри него мышкой — они выстроились в строгий ряд.

!Структура Auto Layout: направление, отступы и промежутки

Основные настройки Auto Layout

В правой панели появятся новые настройки:

Direction (Направление):

* Horizontal (Стрелка вправо): Объекты встают в строку. * Vertical (Стрелка вниз): Объекты встают в столбик. * Wrap (Изогнутая стрелка): Объекты идут строкой, но если места не хватает, переносятся на новую строку (как слова в тексте).

Gap between items (Расстояние между элементами):

Цифра, обозначающая отступ между объектами внутри. Вы можете поменять 10 на 20, и все элементы синхронно раздвинутся.

Padding (Внутренние отступы):

Отступы от границы фрейма до контента внутри. * Horizontal padding: Слева и справа. * Vertical padding: Сверху и снизу.

Выравнивание (Alignment)

В настройках Auto Layout есть квадрат с 9 точками. Это схема выравнивания. Если вы нажмете на центральную точку, весь контент внутри фрейма встанет ровно по центру. Если на левую верхнюю — прижмется к началу.

Resizing: Самое важное в Auto Layout

Новички часто путаются именно здесь. Как объекты внутри Auto Layout реагируют на изменение размера? Есть три режима:

Fixed width / height (Фиксированный):

Размер объекта задан жестко (например, 200px). Сколько бы текста вы ни написали, ширина останется 200px, и текст может вылезти за границы.

Hug contents (Обнять содержимое):

Фрейм подстраивается под то, что внутри. Пример:* Кнопка. Если вы напишете длинное слово «Зарегистрироваться», кнопка сама расширится, чтобы вместить текст и сохранить отступы.

Fill container (Заполнить контейнер):

Объект растягивается, чтобы занять всё свободное место внутри родительского Auto Layout. Пример:* Карточка новости в списке. Если список растянуть, карточка тоже растянется на всю ширину.

!Визуальное сравнение режимов Fixed, Hug contents и Fill container

Практика: Создаем идеальную кнопку

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

Напишите текст Button.

Нажмите Shift + A. Текст обернулся во фрейм Auto Layout.

В панели справа задайте цвет заливки (Fill), например, синий.

Настройте цвет текста на белый.

Установите Horizontal Padding (по бокам) = 24, а Vertical Padding (сверху/снизу) = 12.

Установите скругление углов (Corner Radius) = 8.

Теперь самое интересное. Попробуйте поменять текст на Купить слона. Кнопка сама расширится! Попробуйте удалить текст и оставить одну букву — кнопка сожмется, но отступы 24 и 12 останутся идеальными.

Вложенность (Nesting)

Вся мощь Figma раскрывается, когда вы начинаете вкладывать одни Auto Layout в другие.

Представьте карточку товара:

Кнопка «Купить»: Auto Layout (Текст + фон).

Цена и Кнопка: Auto Layout (Горизонтальный, выравнивание по центру).

Описание, Заголовок и (Цена+Кнопка): Auto Layout (Вертикальный).

Картинка и (Текстовый блок): Общий Auto Layout карточки.

Такая структура позволяет менять контент, удалять блоки, менять местами цену и кнопку, и при этом макет никогда не сломается. Отступы всегда будут ровными.

Absolute Position в Auto Layout

Иногда нам нужно нарушить правила. Например, поставить красный кружок-уведомление (Badge) поверх иконки, которая находится внутри Auto Layout.

Для этого существует кнопка Absolute Position (иконка с плюсиком в уголках рамки в правой панели, появляется при выделении объекта внутри Auto Layout).

Когда вы включаете этот режим для объекта, он перестает участвовать в общем потоке (не расталкивает соседей) и может быть размещен где угодно внутри фрейма, используя классические Constraints.

Заключение

Constraints и Auto Layout — это фундамент современной верстки в Figma. Constraints помогают простым объектам не теряться при ресайзе, а Auto Layout позволяет создавать сложные, живые компоненты, которые ведут себя как настоящий сайт или приложение.

Поначалу Auto Layout может показаться сложным и ограничивающим, но как только вы поймете принцип «коробок внутри коробок», вы уже не сможете работать по-старому. В следующей статье мы поговорим о том, как превратить наши кнопки и карточки в Компоненты, чтобы использовать их во всем проекте и управлять дизайном глобально.

Эффективная работа: компоненты, варианты и библиотеки

Мы прошли большой путь. Вы уже умеете создавать макеты, работать с типографикой и цветом, и даже заставили свои интерфейсы адаптироваться с помощью Auto Layout. Но представьте ситуацию: вы нарисовали дизайн интернет-магазина. В нём 50 экранов. На каждом экране есть кнопка «Купить». Внезапно заказчик или арт-директор говорит: «Слушай, давай сделаем углы у кнопок не острыми, а круглыми, и цвет поменяем на зеленый».

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

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

Что такое Компонент?

Компонент (Component) — это элемент интерфейса, который можно использовать повторно. Главная его особенность в наследовании: у вас есть один «родитель» (Main Component) и множество его «детей» (Instances).

Работает это так:

Вы создаете кнопку и превращаете её в Главный Компонент.

Вы копируете эту кнопку 50 раз для разных экранов. Эти копии становятся Экземплярами (Instances).

Если вы измените цвет или размер в Главном Компоненте, эти изменения мгновенно применятся ко всем 50 Экземплярам.

Это экономит часы, а иногда и дни работы.

Как создать компонент?

Любой объект, группу или фрейм можно превратить в компонент. Обычно компонентами становятся кнопки, иконки, поля ввода, карточки товаров, шапки и подвалы сайта.

Выделите объект (например, фрейм с кнопкой).

Нажмите на иконку четырех ромбиков в центре верхней панели инструментов.

Или используйте горячие клавиши: Ctrl + Alt + K (Windows) / Cmd + Option + K (Mac).

Как только вы это сделаете, рамка выделения станет фиолетовой, а иконка слоя в левой панели изменится на закрашенный ромб из четырех маленьких ромбиков.

!Визуализация превращения обычного фрейма в компонент.

Главный компонент и Экземпляры

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

Main Component (Главный компонент)

Это исходник. «Мастер-диск». Он определяет, как выглядят все копии. * Как узнать: В панели слоев (Layers) у него иконка четырех ромбиков (❖). * Что можно делать: Менять структуру, добавлять новые слои, менять настройки Auto Layout. Все изменения транслируются на копии.

Instance (Экземпляр)

Это копия, зависимая от главного компонента. * Как узнать: В панели слоев у него иконка пустого ромба (◇). Что можно делать: Вы не можете просто так удалить объект изнутри* экземпляра или передвинуть слои, если это запрещено в главном компоненте. Но вы можете делать Overrides (Переопределения).

Переопределения (Overrides)

Экземпляры не обязаны быть точными клонами. В конкретном экземпляре вы можете изменить: * Текст (например, на одной кнопке «Купить», на другой — «Войти»). * Цвет заливки или обводки. * Эффекты (тени). * Видимость вложенных слоев (скрыть иконку).

Но структура (расположение элементов) остается привязанной к Главному компоненту. Если вы измените размер шрифта в Главном компоненте, он изменится во всех экземплярах, даже если вы меняли в них текст.

> Совет: Если вы «заигрались» с настройками экземпляра и хотите вернуть его к исходному виду, нажмите на иконку ромба со стрелкой (Reset overrides) в верхней панели свойств.

Варианты (Variants): Порядок в хаосе

Представьте, что у вас есть кнопка. Она может быть:

Обычная (Default)

При наведении (Hover)

Нажатая (Pressed)

Неактивная (Disabled)

А еще она может быть большой и маленькой. И с иконкой или без.

Раньше дизайнеры создавали отдельные компоненты для каждого состояния: Button/Primary/Default, Button/Primary/Hover и так далее. Библиотека превращалась в свалку из десятков похожих кнопок.

Variants (Варианты) позволяют объединить все эти состояния в один компонент с настройками.

Как создать набор вариантов (Component Set)?

Создайте несколько компонентов (например, синюю кнопку и серую кнопку).

Выделите их все.

В правой панели нажмите кнопку Combine as Variants.

Вокруг компонентов появится фиолетовая пунктирная рамка. Теперь это один большой Супер-компонент (Component Set).

!Пример организации вариантов кнопки внутри набора компонентов.

Свойства (Properties)

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

В правой панели вы увидите раздел Properties. По умолчанию там будет свойство Property 1. Давайте переименуем его, например, в State (Состояние).

Теперь вы можете назначить каждому варианту внутри рамки свое значение: * Для синей кнопки: State = Default * Для серой кнопки: State = Disabled

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

Типы свойств

Figma предлагает несколько мощных типов свойств для вариантов:

Variant (Вариант): Выпадающий список (как в примере выше).

Boolean (Логическое): Переключатель ВКЛ/ВЫКЛ. Идеально подходит для скрытия/показа элементов. Например, свойство Has Icon. Если включить тумблер — иконка появляется.

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

Text (Текст): Позволяет менять текст на кнопке прямо из панели свойств, не кликая дважды по самому текстовому слою.

Библиотеки (Libraries): Работа в команде

Когда вы работаете над одним файлом, локальные компоненты (Local Components) отлично справляются. Но что, если у вас большой проект, разбитый на несколько файлов? Или вы работаете в команде с другими дизайнерами?

Здесь на сцену выходят Библиотеки.

Библиотека — это файл Figma, компоненты и стили которого опубликованы (Published) и доступны для использования в других файлах.

Как опубликовать библиотеку?

Создайте файл, например, UI Kit, где будут лежать все ваши кнопки, цвета и шрифты.

Зайдите в панель Assets (слева, рядом с Layers).

Нажмите на иконку книжки (Team Library).

Нажмите Publish.

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

Обновление библиотек

Если вы измените кнопку в файле UI Kit и нажмете Publish, во всех файлах, где используется эта кнопка, появится уведомление: Updates available (Доступны обновления). Дизайнер может нажать «Review» и принять изменения. Так поддерживается единство дизайна во всем продукте.

> Важно: Публикация библиотек доступна в полной мере на платных тарифах Figma (Professional и выше) или в рамках команды Education. На бесплатном тарифе Starter вы можете публиковать только стили (цвета, шрифты), но не компоненты.

Атомарный дизайн и вложенность

Чтобы ваши компоненты были гибкими, используйте принцип «матрешки» или Атомарного дизайна.

Не пытайтесь нарисовать сложную карточку товара сразу как один монолитный рисунок. Разбивайте её на части:

Атомы: Иконка, Текстовый стиль, Цвет.

Молекулы: Кнопка (состоит из формы, цвета и текста), Поле ввода.

Организмы: Карточка товара (состоит из Картинки, Заголовка, Цены и Кнопки-молекулы).

Если вы вкладываете компонент «Кнопка» внутрь компонента «Карточка», то при изменении цвета основной кнопки, он изменится и внутри карточки. Это создает надежную и управляемую систему.

Практические советы по организации

Именование: Используйте слэш / для группировки. Если назвать компоненты Icon / Home, Icon / User, Icon / Settings, Figma автоматически сложит их в папку Icon в меню выбора.

Описание: В настройках компонента есть поле Description. Пишите туда подсказки для коллег (или для себя будущего): «Использовать только на темном фоне» или «Размер 48px».

Auto Layout внутри компонентов: Всегда используйте Auto Layout для кнопок и карточек внутри компонентов. Это позволит им корректно растягиваться при смене текста в экземплярах.

Заключение

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

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

Домашнее задание: Откройте свой проект. Превратите все повторяющиеся элементы (кнопки, заголовки, иконки) в компоненты. Создайте вариант кнопки для состояния «Наведение» (Hover), изменив её цвет.

Создание интерактивных прототипов и экспорт макетов

Поздравляем! Вы прошли огромный путь: от знакомства с интерфейсом и базовыми фигурами до создания сложных адаптивных компонентов и библиотек. У вас есть красивые макеты, но пока они статичны. Это просто картинки.

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

В этой финальной статье курса мы «оживим» ваши макеты, превратив их в кликабельный прототип, который можно дать потестировать пользователям или показать заказчику. А в конце разберемся, как правильно передать вашу работу разработчикам.

Режим прототипирования: Соединяем точки

До сих пор мы работали во вкладке Design в правой панели. Пришло время переключиться на вкладку Prototype. Как только вы это сделаете, интерфейс немного изменится: при выделении фреймов и объектов вокруг них появятся синие кружочки с плюсиками.

Создание связей (Connections)

Суть прототипирования в Figma — это создание связей между объектами.

Выделите объект, который должен быть интерактивным (например, кнопку «Войти» на экране логина).

Наведите курсор на границу объекта, пока не появится синий кружок с плюсом.

Зажмите левую кнопку мыши и потяните «ниточку» (стрелку) к тому фрейму, на который должен произойти переход (например, на Главный экран).

Поздравляем, вы создали первую интеракцию! Теперь, если запустить просмотр, клик по кнопке перенесет вас на следующий экран.

!Схематичное изображение процесса создания связи между экранами в режиме прототипирования.

Flow Starting Point (Точка входа)

Когда вы создаете первую связь между фреймами, Figma автоматически добавляет метку Flow 1 (Поток 1) к первому экрану. Это точка старта вашего прототипа. Вы можете переименовать её, например, в «Сценарий регистрации».

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

Настройка взаимодействий (Interactions)

Просто соединить экраны недостаточно. Нужно объяснить системе, как и когда должен произойти переход. Когда вы создаете связь, открывается меню Interaction Details. Давайте разберем его анатомию.

1. Триггер (Trigger): Когда это происходит?

Это событие, которое запускает действие. Самые популярные триггеры:

* On click (По клику): Стандартное нажатие мышкой или тапа пальцем. * On drag (По перетаскиванию): Используется для слайдеров, каруселей или жеста «свайп». * While hovering (При наведении): Курсор находится над объектом. Идеально для подсказок или изменения цвета кнопок на десктопе. * While pressing (При нажатии): Действие происходит, пока кнопка мыши зажата. * After delay (После задержки): Действие происходит само собой через заданное время. Работает только для фреймов верхнего уровня. Используется для автоматического перехода со сплэш-экрана (заставки) на главный экран.

2. Действие (Action): Что происходит?

* Navigate to (Перейти к): Стандартный переход на другой экран. Change to (Сменить на): Самое мощное действие для компонентов. Позволяет менять Вариант* компонента. Например, при наведении (While hovering) сменить кнопку Default на кнопку Hover. * Open Overlay (Открыть наложение): Открывает фрейм поверх текущего экрана. Используется для модальных окон, клавиатур, всплывающих меню. Вы можете настроить затемнение фона (Add background behind overlay). * Scroll to (Прокрутить к): Прокручивает страницу до определенного якоря (например, кнопка «Наверх»). * Back (Назад): Возвращает на предыдущий экран. Очень полезно для стрелок «Назад» в шапке приложения.

3. Анимация (Animation): Как это выглядит?

Это то, что делает интерфейс плавным.

* Instant (Мгновенно): Без анимации. Просто резкая смена кадров. * Dissolve (Растворение): Плавное появление нового экрана через прозрачность. * Move in / Push / Slide in: Различные варианты выезжания экранов (сбоку, снизу). Стандарт для мобильных приложений. * Smart Animate (Умная анимация): Магия Figma, о которой стоит поговорить отдельно.

Smart Animate: Магия движения

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

Пример: У вас есть переключатель (Toggle). * На первом фрейме кружок находится слева и он серый. * На втором фрейме этот же кружок (с тем же названием слоя!) находится справа и он зеленый. * Если настроить переход между ними с использованием Smart Animate, кружок плавно переедет и поменяет цвет.

> Важно: Для корректной работы Smart Animate структура слоев должна быть идентичной. Если на первом экране слой называется Rectangle 1, а на втором Button BG, магии не случится — будет простое растворение.

!Иллюстрация принципа работы умной анимации при изменении свойств объекта.

Интерактивные компоненты

В предыдущей статье мы создавали Варианты кнопок (Default, Hover, Pressed). Раньше, чтобы показать наведение на кнопку, нужно было дублировать целые экраны. Теперь это делается внутри компонента.

Перейдите к вашему набору компонентов (Component Set).

Переключитесь в режим Prototype.

Протяните стрелку от варианта Default к варианту Hover.

В настройках выберите триггер While hovering и действие Change to.

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

Просмотр прототипа

Чтобы увидеть результат своей работы, нажмите кнопку Play (треугольник) в правом верхнем углу интерфейса. Откроется режим презентации (Presentation View).

Figma Mirror

Если вы разрабатываете мобильное приложение, смотреть его на мониторе компьютера — это самообман. Размеры элементов и удобство нажатия нужно проверять пальцами.

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

Экспорт макетов и активов

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

Панель экспорта

Выделите любой объект, группу или фрейм. В самом низу правой панели Design находится секция Export.

Нажмите плюс +.

Выберите масштаб:

* 1x: Исходный размер. * 2x, 3x: Увеличенные версии для экранов с высокой плотностью пикселей (Retina). * 512w или 512h: Экспорт с заданной шириной или высотой.

Выберите формат.

Форматы файлов

Выбор формата критически важен для качества и веса финального продукта.

| Формат | Для чего использовать | | :--- | :--- | | PNG | Растровый формат с поддержкой прозрачности. Идеален для фотографий с прозрачным фоном, сложных иллюстраций и скриншотов интерфейса. | | JPG | Растровый формат без прозрачности. Лучший выбор для прямоугольных фотографий и баннеров, так как весит меньше PNG. | | SVG | Векторный формат. Золотой стандарт для иконок и логотипов. Он масштабируется без потери качества и весит копейки. Всегда экспортируйте иконки в SVG. | | PDF | Документ. Используется для экспорта презентаций, отчетов или отправки макетов заказчику, у которого нет Figma. |

> Совет: Вы можете добавить несколько настроек экспорта для одного объекта. Например, экспортировать иконку одновременно в SVG (для веба) и в PNG @2x, @3x (для iOS). Просто нажмите плюс + в секции Export несколько раз.

!Скриншот панели настроек экспорта.

Передача в разработку (Handoff)

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

Нажмите кнопку Share в правом верхнем углу.

Скопируйте ссылку (Copy link).

Отправьте её разработчику.

Разработчик сможет зайти в файл (даже в режиме can view), кликать по объектам и видеть их CSS-свойства, отступы, размеры шрифтов и скачивать активы, которые вы пометили для экспорта.

Заключение курса

Поздравляем! Вы завершили курс «Основы Figma».

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

Figma — это инструмент с низким порогом входа, но бесконечной глубиной мастерства. Лучший способ закрепить знания — практика. Придумайте свой проект (редизайн любимого приложения или сайт для кота) и пройдите весь путь от идеи до кликабельного прототипа.

Удачи в ваших дизайн-проектах!