Figma с нуля: от интерфейса до интерактивного прототипа

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

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

Структура интерфейса

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

!Основные зоны интерфейса Figma

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

Расположена в самом верху экрана. Здесь находятся основные инструменты для создания и редактирования объектов. Слева направо:

* Главное меню (иконка Figma): доступ к настройкам, плагинам и экспорту. * Инструменты выбора (Move, Scale): перемещение и масштабирование объектов. * Инструменты создания (Frame, Shape tools): создание фреймов и геометрических фигур. * Векторные инструменты (Pen, Pencil): рисование произвольных форм. * Текст (Text): добавление текстовых блоков. * Ресурсы (Resources): доступ к компонентам и плагинам. * Hand tool: перемещение по холсту без выделения объектов. * Комментарии: инструмент для обратной связи.

В центре панели отображается название файла и проект, в котором он находится. Справа — настройки публикации, профили пользователей, находящихся в файле, и кнопка запуска презентации (Play).

2. Левая панель: Слои и Ассеты

Эта панель управляет иерархией вашего макета. Она имеет две вкладки:

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

3. Холст (Canvas)

Бесконечное серое пространство в центре, где происходит вся работа. Вы можете панорамировать его, зажав Space (Пробел) и двигая мышью, или масштабировать, удерживая Ctrl (или Cmd на Mac) и прокручивая колесико мыши.

4. Правая панель: Свойства (Properties Panel)

Контекстно-зависимая панель. Ее содержимое меняется в зависимости от того, что именно выделено на холсте. Она разделена на три вкладки:

* Design: Настройки внешнего вида (размер, цвет, шрифт, эффекты). * Prototype: Настройка переходов и анимации между экранами. * Inspect (ранее Code): Информация для разработчиков (CSS-код, отступы, цвета).

Фреймы: Фундамент макета

Новички часто путают фреймы (Frames) с группами (Groups) или артбордами из других редакторов. Понимание фреймов — ключ к профессиональной работе в Figma.

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

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

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

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

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

!Поведение объектов при изменении размера Группы и Фрейма

Чтобы создать фрейм, выберите инструмент Frame (горячая клавиша F) и либо нарисуйте прямоугольник на холсте, либо выберите готовый пресет (iPhone, Desktop, A4) в правой панели.

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

Любой интерфейс состоит из примитивов: прямоугольников, кругов и линий. Figma предоставляет удобный набор инструментов для работы с ними.

Геометрические фигуры

Доступ к ним открывается через стрелку рядом с иконкой квадрата на панели инструментов или через горячие клавиши:

* Rectangle (R): Прямоугольник. Основа для кнопок, карточек, фонов. * Ellipse (O): Эллипс. Используется для аватарок, индикаторов. * Line (L): Линия. Разделители, подчеркивания. * Arrow (Shift + L): Стрелка. * Polygon: Многоугольник (треугольники и т.д.). * Star: Звезда.

> Чтобы сохранить пропорции фигуры (нарисовать идеальный квадрат или круг), удерживайте клавишу Shift в процессе рисования.

Свойства фигур

После создания фигуры вы можете управлять её параметрами в правой панели Design:

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

Координаты и размеры: Поля X, Y (положение) и W, H (ширина и высота). Цепочка между W и H связывает пропорции.

Corner Radius (Скругление углов): Позволяет сделать прямоугольник мягче. Можно скруглить все углы сразу или каждый по отдельности.

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

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

Effects (Эффекты): Тени (Drop Shadow), внутренние тени (Inner Shadow), размытие слоя (Layer Blur) и размытие фона (Background Blur).

Векторные сети (Vector Networks)

Figma использует уникальный подход к векторам, называемый Vector Networks. В традиционных редакторах (например, Illustrator) векторный путь — это последовательность точек, где каждая точка соединена максимум с двумя линиями (входящей и исходящей). Это создает замкнутый контур.

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

Инструмент Pen Tool (P) позволяет ставить точки и соединять их. Если вы нажмете на существующую точку и потянете, появятся направляющие Безье для создания кривых линий.

!Принцип работы векторных сетей: одна точка соединяет множество линий

Работа с цветом и стилями

Цвет в Figma задается в шестнадцатеричном формате (HEX), RGB, HSL или HSB. Чтобы изменить цвет, кликните на квадрат цвета в секции Fill.

Инструмент Пипетка (Eyedropper) вызывается клавишей I. Он позволяет быстро скопировать цвет с любого пикселя на экране (даже за пределами окна Figma в некоторых браузерах или десктопном приложении).

Навигация и горячие клавиши

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

* Ctrl + C / Ctrl + V — Копировать / Вставить. * Ctrl + D — Дублировать объект (быстрее, чем копировать-вставить). * Ctrl + G — Сгруппировать выделенные объекты. * Ctrl + Alt + G (Mac: Cmd + Option + G) — Обернуть во Фрейм (Frame selection). * Ctrl + R — Переименовать слой. * Shift + H / Shift + V — Отразить по горизонтали / вертикали. * Ctrl + + / Ctrl + - — Масштаб интерфейса. * Shift + 0 — Показать макет в 100% масштабе. * Shift + 2 — Приблизить к выделенному объекту.

Итоги

Интерфейс Figma состоит из четырех основных зон: Панель инструментов, Панель слоев, Холст и Панель свойств.

Фрейм (Frame) — это главный строительный блок в Figma, отличающийся от простой группы наличием собственных свойств (размер, фон, обрезка контента).

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

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

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

Мастерство Auto Layout, работа с сетками и ограничениями

Создание статического макета — это лишь половина работы дизайнера интерфейсов. Реальные продукты динамичны: тексты меняются, экраны имеют разную ширину, а новые элементы могут добавляться в любой момент. Чтобы макет не «рассыпался» при малейшем изменении, в Figma существуют три фундаментальных инструмента: Constraints (Ограничения), Layout Grids (Сетки) и Auto Layout (Автоматическая компоновка).

Constraints: Привязки и адаптивность

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

!Интерфейс настройки ограничений

Горизонтальные и вертикальные привязки

По умолчанию объекты привязаны к Left (Лево) и Top (Верх). Это значит, что при растягивании фрейма объект останется на том же расстоянии от левого верхнего угла.

Основные варианты поведения:

* Left / Right / Top / Bottom: Объект сохраняет фиксированное расстояние от выбранного края. * Center: Объект сохраняет позицию относительно центра фрейма. * Left and Right / Top and Bottom: Объект растягивается вместе с фреймом, сохраняя фиксированные отступы от обоих краев. Это полезно для кнопок, которые должны занимать всю ширину карточки. * Scale: Объект меняет размер и позицию пропорционально изменению размера фрейма (в процентах).

> Если вы хотите, чтобы иконка всегда оставалась в правом верхнем углу экрана, установите для нее Constraints: Right и Top.

Layout Grids: Модульные сетки

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

Типы сеток

Grid (Клетчатая сетка): Напоминает миллиметровку. Используется для рисования иконок или детальной проработки логотипов (часто с шагом 8px или 10px).

Columns (Колонки): Стандарт для веб-дизайна. Позволяет делить экран на вертикальные зоны (обычно 12 колонок для десктопа, 4–6 для мобильных).

Rows (Строки): Горизонтальные полосы. Используются реже, в основном для выстраивания вертикального ритма типографики.

Анатомия колоночной сетки

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

* Count: Количество колонок. * Margin: Внешний отступ от краев фрейма до начала сетки. * Gutter: Расстояние между колонками (межколонник).

!Анатомия колоночной сетки

Ширина одной колонки в «резиновой» (Stretch) сетке рассчитывается автоматически. Если представить это математически, то формула ширины одной колонки выглядит так:

где — итоговая ширина одной колонки, — общая ширина фрейма, — значение Margin (отступ слева и справа), — количество колонок (Count), — значение Gutter (промежуток между колонками).

Например, если ширина экрана 1440px, отступы 100px, 12 колонок и промежуток 20px, Figma автоматически рассчитает ширину колонки, избавив вас от калькулятора.

Auto Layout: Автоматическая компоновка

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

Чтобы добавить Auto Layout к выделенным объектам или фрейму, нажмите Shift + A или кнопку «+» в секции Auto Layout на правой панели.

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

Когда вы применяете Auto Layout, фрейм превращается в «умный» контейнер. Обычные Constraints перестают работать внутри него, уступая место правилам потока.

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

* Вертикальное (стрелка вниз): объекты выстраиваются в столбик. * Горизонтальное (стрелка вправо): объекты выстраиваются в строку. * Wrap (перенос): объекты переносятся на новую строку, если не помещаются в ширину контейнера.

Spacing between items (Расстояние между элементами): Зазор между объектами внутри (аналог Gap).

Padding (Внутренние отступы): Расстояние от границы контейнера до контента внутри. Можно задать одинаковое значение для всех сторон или настроить отдельно (слева, справа, сверху, снизу).

!Структура кнопки в Auto Layout

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

Внутри панели Auto Layout есть квадрат с 9 точками. Он определяет, как контент будет располагаться внутри контейнера, если контейнер больше, чем сам контент. Например, выбрав центральную точку, вы отцентрируете содержимое и по вертикали, и по горизонтали.

Режимы изменения размера (Resizing)

Это самый сложный, но важный аспект. Для каждого объекта внутри Auto Layout (и для самого контейнера) можно задать один из трех режимов по ширине и высоте:

Fixed width / height (Фиксированный): Объект сохраняет точные размеры (например, иконка 24x24), независимо от размера родителя или длины текста.

Hug contents (Обнять содержимое): Контейнер подстраивается под размер того, что внутри.

Пример:* Кнопка расширяется, если вы пишете длинный текст.

Fill container (Заполнить контейнер): Объект растягивается, занимая всё доступное свободное пространство внутри родителя.

Пример:* Текстовый блок в карточке товара растягивается на всю ширину карточки, даже если сама карточка меняет размер.

!Режимы изменения размеров

Absolute Position в Auto Layout

Иногда нужно нарушить правила сетки, например, добавить бейдж «New» поверх угла карточки. Для этого внутри Auto Layout фрейма выделите объект и нажмите кнопку Absolute position (иконка квадрата с крестиком в углах) в правой панели.

Теперь этот объект игнорирует поток Auto Layout и позиционируется с помощью классических Constraints относительно границ фрейма.

Практический пример: Карточка товара

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

Контент: Создайте текстовый слой с заголовком и текстовый слой с ценой.

Первый уровень: Выделите оба слоя и нажмите Shift + A. Установите направление «Горизонтально», режим Fill container для заголовка (чтобы он толкал цену вправо) и Hug contents для цены.

Второй уровень: Добавьте описание под заголовком. Выделите фрейм с заголовком/ценой и описание. Нажмите Shift + A. Направление «Вертикально».

Картинка: Добавьте прямоугольник (изображение) над всем этим. Снова Shift + A для объединения картинки и текстового блока.

Финальная настройка: Установите Padding (например, 16px) для общего контейнера. Для картинки поставьте Fill container по ширине, чтобы она всегда занимала всю ширину карточки.

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

Итоги

Constraints управляют поведением объектов при изменении размера родительского фрейма (прилипание к краям, масштабирование или центрирование).

Layout Grids (особенно колонки) необходимы для создания ровных, структурированных макетов, соответствующих веб-стандартам.

Auto Layout (Shift + A) позволяет создавать адаптивные интерфейсы, где отступы и размеры элементов автоматически подстраиваются под контент.

Три режима Resizing (Fixed, Hug, Fill) — это ключ к полному контролю над адаптивностью компонентов.

Использование Absolute Position внутри Auto Layout позволяет размещать декоративные элементы или статусы поверх основного потока контента.