Figma для веб-дизайна: с нуля до профи

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

Добро пожаловать в курс «Figma для веб-дизайна: с нуля до профи»! Это первая и самая важная статья, с которой начнется ваше погружение в мир современного цифрового дизайна. Figma совершила настоящую революцию в индустрии, превратив процесс создания интерфейсов из одиночной работы в увлекательный коллаборативный процесс.

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

Почему Figma стала стандартом индустрии?

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

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

Командная работа. Несколько дизайнеров, разработчиков и менеджеров могут находиться в одном файле одновременно, наблюдая за курсорами друг друга в реальном времени.

Векторная основа. Все, что вы рисуете в Figma, — это векторная графика, которая не теряет качества при масштабировании.

Обзор интерфейса: где что находится

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

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

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

Находится в самом верху экрана. Это ваш «пенал» с инструментами. Здесь живут:

* Главное меню (иконка Figma слева): доступ к настройкам, плагинам и экспорту. * Инструменты выбора (Move, Scale). * Инструменты создания (Frame, Shape, Pen, Text). * Контекстные инструменты: появляются по центру, когда вы выбираете определенный объект. * Настройки отображения и шеринга: находятся в правой части верхней панели (кнопка Share, масштаб, режим просмотра).

2. Левая боковая панель (Layers & Assets)

Это навигатор вашего проекта. У панели есть две вкладки:

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

3. Правая боковая панель (Properties Panel)

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

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

4. Холст (Canvas)

Бесконечное серое пространство в центре. Здесь происходит вся магия. Вы можете панорамировать (двигать) холст и масштабировать его до бесконечности.

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

Фреймы: больше, чем просто артборды

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

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

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

Выберите инструмент Frame на верхней панели.

Или используйте горячую клавишу F (от слова Frame) или A (от слова Artboard).

Справа на панели свойств появится список пресетов (готовых размеров). Выберите, например, Desktop для дизайна сайта или iPhone 14 для мобильного приложения.

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

Почему нельзя просто рисовать в «пустоте»?

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

!Визуализация принципа вложенности объектов во фрейм.

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

Веб-дизайн на 90% состоит из простых геометрических примитивов: прямоугольников, кругов и линий. Давайте научимся их создавать.

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

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

Эллипс (Ellipse)

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

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

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

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

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

Размеры и координаты (X, Y, W, H):

Здесь можно с точностью до пикселя задать ширину (W — Width) и высоту (H — Height). Значок «цепочки» между ними позволяет сохранять пропорции при изменении размера.

Скругление углов (Corner Radius):

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

Заливка (Fill):

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

Обводка (Stroke):

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

Эффекты (Effects):

Здесь живут тени (Drop Shadow) и размытие (Layer Blur). Тень придает объем и поднимает объект над плоскостью.

Навигация и управление объектами

Мало нарисовать объект, нужно уметь им манипулировать. Для этого существуют два основных инструмента, которые вы будете переключать сотни раз за день.

Move Tool (Перемещение)

* Горячая клавиша: V * Это ваш основной курсор. Им вы выделяете объекты, перетаскиваете их и меняете размеры, потянув за границы рамки.

Scale Tool (Масштабирование)

* Горячая клавиша: K * Важное отличие: Если вы уменьшаете фрейм с текстом и кнопками обычным инструментом Move, объекты могут начать смещаться, а текст останется того же размера, обрезаясь границами. Инструмент Scale пропорционально уменьшает или увеличивает всё содержимое объекта, включая размер шрифта и толщину обводок.

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

Чтобы материал усвоился, попробуйте прямо сейчас выполнить следующие действия в Figma:

Создайте новый файл.

Нажмите F и выберите пресет Desktop.

Нажмите R и нарисуйте прямоугольник внутри фрейма (это будет шапка сайта).

Задайте ему синий цвет в панели Fill.

Нажмите O и, зажав Shift, нарисуйте круг (аватарка) в правом углу шапки.

Попробуйте переместить весь фрейм по холсту.

Заключение

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

Не бойтесь экспериментировать и нажимать на кнопки. Figma — очень дружелюбная программа, и любое действие можно отменить нажатием Ctrl + Z.

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

В предыдущем уроке мы научились создавать «скелет» нашего дизайна — фреймы и геометрические фигуры. Теперь пришло время вдохнуть в этот скелет жизнь. Дизайн — это не просто прямоугольники; это коммуникация. А коммуникация строится на двух китах: тексте и цвете.

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

Типография: заставьте текст говорить

Текст составляет около 90% контента в вебе. Умение грамотно работать с ним отличает новичка от профессионала. В Figma за текст отвечает инструмент Type Tool.

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

Выберите инструмент Text на верхней панели или нажмите клавишу T.

Кликните в любом месте холста, чтобы создать строчный текст (для заголовков).

Или зажмите кнопку мыши и потяните, чтобы создать текстовый блок (для абзацев).

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

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

!Панель настроек типографики в Figma

Font (Шрифт): По умолчанию Figma использует шрифт Inter*. Нажав на стрелочку, вы увидите список всех шрифтов, доступных в Google Fonts, а также локальные шрифты вашего компьютера. * Weight (Начертание): Толщина букв (Regular, Bold, Light и т.д.). * Size (Размер): Размер шрифта в пикселях. * Line Height (Межстрочный интервал): Расстояние между строками. В веб-дизайне золотым стандартом считается значение от 120% до 150% от размера шрифта. Вы можете писать здесь значения в пикселях или процентах (например, 140%). * Letter Spacing (Межбуквенное расстояние): Разрядка букв. Обычно используется для заголовков, написанных капсом (прописными).

Поведение текстового контейнера

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

Auto Width (Автоширина): Границы текстового блока расширяются по мере того, как вы печатаете. Текст никогда не переносится на новую строку. Идеально для коротких заголовков и кнопок.

Auto Height (Автовысота): Ширина блока фиксирована, но высота растет по мере добавления текста. Текст переносится на новую строку, когда достигает границы. Используется для абзацев и описаний.

Fixed Size (Фиксированный размер): И ширина, и высота жестко заданы. Если текста слишком много, он просто выйдет за границы или скроется.

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

Цвет в Figma — это свойство Fill (Заливка). Оно применяется к фигурам, фреймам и тексту.

Работа с палитрой

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

* Выбрать оттенок на цветовом круге. * Настроить прозрачность (Opacity) от 0% до 100%. * Ввести код цвета. Самый популярный формат — HEX (например, #FF0000 для красного). Также доступны RGB, HSL и HSB. * Использовать «пипетку» (Eyedropper tool, клавиша I), чтобы взять цвет с любого объекта на экране.

Градиенты и изображения

Свойство Fill — это не только сплошной цвет (Solid). В выпадающем меню сверху окна палитры можно выбрать:

* Linear / Radial / Angular / Diamond: Различные виды градиентов. Image: Да, в Figma картинка — это тоже вид заливки! Вы можете залить прямоугольник фотографией. Это позволяет легко менять пропорции фото, не искажая его, используя настройки Fill, Fit, Crop или Tile*.

> Совет: Чтобы быстро вставить изображение, просто перетащите файл с картинкой с рабочего стола прямо на фигуру в Figma.

Обводка (Stroke)

Любому объекту можно добавить контур. В секции Stroke вы настраиваете:

* Цвет обводки. * Толщину (в пикселях). * Положение: Inside:* Обводка внутри границ объекта (рекомендуется для веб-дизайна). Center:* По центру границы. Outside:* Снаружи объекта.

Эффекты (Effects): добавляем глубину

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

Drop Shadow (Падающая тень)

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

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

!Сравнение различных настроек теней для создания объема

Layer Blur и Background Blur

* Layer Blur: Размывает сам объект. Полезно для создания теней вручную или декоративных пятен. Background Blur: Размывает всё, что находится под объектом. Именно так создается эффект матового стекла (Glassmorphism), популярный в интерфейсах iOS и Windows. Важно: чтобы эффект сработал, заливка (Fill) верхнего объекта должна быть полупрозрачной (менее 100%).*

Стили: работаем как профессионалы

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

Как создать стиль?

Стили можно создавать для Цвета (Fill/Stroke), Текста, Эффектов и Сеток.

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

Выберите объект с нужным цветом.

В панели Fill нажмите на иконку с четырьмя точками (Style icon).

Нажмите + в открывшемся меню.

Дайте название стилю (например, Primary Blue или Accent).

Нажмите Create Style.

Теперь, когда вы будете красить другие объекты, выбирайте этот стиль из библиотеки (через иконку четырех точек), а не через палитру.

Создание текстового стиля: Аналогично. Настройте шрифт, размер, интерлиньяж. Нажмите четыре точки в секции Text -> + -> Назовите стиль (например, H1 Heading или Body Text).

> Использование стилей — это главное отличие профессионального макета от любительского. Это гарантирует консистентность (единообразие) дизайна.

Организация слоев: порядок в хаосе

По мере работы количество объектов будет расти. Чтобы не запутаться, нужно поддерживать порядок в панели Layers (слева).

Группировка (Groups)

Выделите несколько объектов и нажмите Ctrl + G (или Cmd + G на Mac). Они объединятся в папку. Это удобно, чтобы перемещать логически связанные элементы (например, иконку и подпись к ней) вместе.

Именование слоев

Figma называет слои автоматически: Rectangle 1, Frame 45, Vector 3. Приучите себя переименовывать ключевые группы. Двойной клик по названию слоя в панели слева (или Ctrl + R) позволит дать ему понятное имя: Header, Button, Footer.

Порядок слоев (Z-index)

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

* Ctrl + [ — опустить слой ниже. * Ctrl + ] — поднять слой выше.

Практическое задание

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

Напишите текст «Купить» (используйте Auto Width).

Создайте стиль текста Button Text.

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

Задайте прямоугольнику яркий цвет и сохраните его как стиль Primary Color.

Скруглите углы прямоугольника (Corner Radius).

Сгруппируйте текст и прямоугольник (Ctrl + G).

Добавьте группе эффект Drop Shadow.

Заключение

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

Мастерство Auto Layout, Constraints и использование модульных сеток

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

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

Constraints: привязываем объекты

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

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

Как это работает?

Когда вы выделяете объект внутри фрейма, в панели свойств справа появляется секция Constraints. Там вы видите схему с синими линиями.

!Интерфейс настройки Constraints и демонстрация поведения объекта при растягивании родителя.

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

Left / Right / Top / Bottom: Объект сохраняет фиксированное расстояние от выбранного края. Например, если выбрать Right, кнопка всегда будет в 20 пикселях от правого края, как бы вы ни тянули фрейм.

Center: Объект всегда остается по центру оси.

Scale (Масштабирование): Самый интересный пункт. Объект меняет свой размер и позицию в процентном соотношении. Если фрейм увеличится в 2 раза, объект тоже станет в 2 раза шире и сдвинется пропорционально.

Left and Right / Top and Bottom: Объект фиксирует отступы с обеих сторон. Это заставляет его растягиваться вместе с фреймом (аналог width: 100% с отступами в CSS).

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

Auto Layout: магия автоматизации

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

Auto Layout позволяет контейнеру автоматически подстраиваться под свое содержимое. Добавили текст? Кнопка расширилась. Удалили пункт меню? Остальные пункты сдвинулись, чтобы закрыть пустоту.

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

Выделите фрейм или группу объектов.

Нажмите сочетание клавиш Shift + A.

Или нажмите + рядом с надписью Auto Layout в правой панели.

Настройки панели Auto Layout

Как только вы применили это свойство, панель справа меняется. Давайте разберем её анатомию:

!Разбор элементов управления панели Auto Layout.

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

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

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

Зазор между объектами внутри (например, расстояние между иконкой и текстом в кнопке).

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

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

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

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

Resizing: Фиксированный, Hug и Fill

Понимание режимов изменения размера (Resizing) — это ключ к профессиональному владению Auto Layout. Эти настройки находятся в верхней части панели свойств (Frame), когда выбран элемент внутри Auto Layout.

Существует три режима:

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

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

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

Фрейм «обнимает» то, что внутри него. Это идеальный режим для кнопок. Пример:* Вы пишете длинное слово «Зарегистрироваться», и кнопка сама становится шире, сохраняя заданные отступы (Padding).

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

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

!Визуальное объяснение разницы между Fixed, Hug и Fill.

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

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

Типы сеток в Figma

Нажмите + в секции Layout Grid на правой панели (выбрав фрейм). Нажмите на иконку сетки, чтобы открыть настройки.

Grid (Клетчатая сетка): Похожа на тетрадь в клеточку. Удобна для рисования иконок или детальной проработки мелких элементов. Обычно шаг сетки — 8px.

Columns (Колонки): Стандарт веб-дизайна. Позволяет делить экран на вертикальные зоны.

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

Настройка колоночной сетки (Columns)

Для десктопных макетов (1440px и выше) стандартом индустрии является 12-колоночная сетка. Почему 12? Потому что это число отлично делится на 2, 3, 4 и 6. Это дает гибкость в компоновке блоков.

Основные параметры:

* Count: Количество колонок (обычно 12 для Desktop, 4-6 для Tablet, 4 для Mobile). * Color: Цвет направляющих (по умолчанию красный полупрозрачный). * Type: Stretch:* Колонки резиновые, растягиваются вместе с фреймом. Ширина задается автоматически. Center:* Колонки фиксированной ширины, собраны в центре. * Margin: Внешние отступы по краям фрейма (например, «уши» сайта по бокам). * Gutter: Расстояние между колонками (межколонник). Стандартные значения: 20px, 24px, 30px.

!Пример использования 12-колоночной сетки в дизайне интерфейса.

Практика: Собираем адаптивную карточку

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

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

Текст: Напишите заголовок и цену. Выделите их оба и нажмите Shift + A. У вас получился Auto Layout для текста. Установите режим Vertical.

Объединение: Выделите картинку и текстовый блок. Снова нажмите Shift + A. Теперь у вас есть общая карточка.

Настройка:

* В панели Auto Layout поставьте отступ (Gap) 16px. * Добавьте Padding (внутренние отступы) 16px со всех сторон. * Добавьте заливку (Fill) белым цветом и скругление углов.

Адаптивность:

* Выберите текстовый блок внутри. Установите ему ширину Fill container. * Теперь попробуйте менять ширину всей карточки. Текст должен переноситься, а карточка — сохранять структуру.

Заключение

Сегодня вы освоили инструменты, которые превращают «рисование» в «проектирование». Constraints держат элементы на местах, Auto Layout позволяет им дышать и изменяться, а Grids создают строгий порядок.

В следующем уроке мы поговорим о том, как не делать одну и ту же работу дважды. Мы изучим Компоненты (Components) и Варианты (Variants) — основу дизайн-систем.

Создание компонентов, вариантов и организация простой дизайн-системы

Поздравляю! Вы уже прошли огромный путь. Вы умеете рисовать интерфейс, работать с типографикой и цветом, а также освоили магию Auto Layout. Но представьте ситуацию: вы создали дизайн интернет-магазина, в котором 50 экранов и сотни кнопок. Внезапно заказчик просит: «Давайте скруглим углы у всех кнопок не на 4 пикселя, а на 10».

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

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

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

Компонент (Component) — это элемент интерфейса, который можно использовать повторно. Это может быть кнопка, иконка, поле ввода или даже целая шапка сайта.

Принцип работы компонентов строится на отношениях «Родитель — Ребенок»:

Главный компонент (Main Component): Это оригинал. «Мастер-шаблон». Любые изменения, которые вы вносите в него, мгновенно применяются ко всем его копиям.

Экземпляр (Instance): Это копия главного компонента. Она зависима. Если вы перекрасите Главный компонент в красный, все Экземпляры станут красными.

> Представьте, что Главный компонент — это печать, а Экземпляры — это оттиски этой печати на бумаге. Если вы измените форму печати, все будущие и существующие (связанные) оттиски изменятся.

!Визуализация принципа наследования свойств от Главного компонента к Экземплярам.

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

Выберите объект (фрейм, группу или фигуру), который хотите превратить в компонент.

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

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

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

Как создать экземпляр?

Есть два способа:

Просто скопируйте Главный компонент (Ctrl + C -> Ctrl + V) или перетащите его с зажатым Alt.

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

Иконка экземпляра в панели слоев выглядит как один пустой ромб.

Переопределения (Overrides): гибкость экземпляров

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

Конечно, нет. Экземпляры в Figma обладают удивительным свойством — Переопределением (Override). Вы можете менять уникальные свойства внутри конкретного экземпляра, не разрывая связь с Главным компонентом.

Что можно менять в экземпляре: * Текст (содержание). * Цвет заливки и обводки. * Эффекты (тени). * Толщину обводки. * Видимость вложенных слоев.

Что нельзя менять (оно наследуется): * Расположение элементов (если не используется Auto Layout). * Саму структуру слоев (нельзя удалить слой из экземпляра, можно только скрыть).

Если вы измените текст в экземпляре, а потом поменяете цвет в Главном компоненте, текст в экземпляре останется вашим (уникальным), а цвет обновится вслед за Главным. Figma умная: она понимает, что вы изменили специально, а что должно обновляться.

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

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

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

Figma решила эту проблему с помощью Вариантов. Варианты позволяют объединить несколько похожих компонентов в одну группу (Component Set).

Представьте, что у вас есть одна супер-кнопка, и вы просто переключаете её настройки в панели справа: «Сделай мне большую, красную и неактивную».

!Набор вариантов кнопки, объединенный в единый Component Set.

Как создать варианты?

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

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

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

Вокруг них появится фиолетовая пунктирная рамка. Это Component Set.

Настройка свойств (Properties)

Теперь самое интересное. Выделите рамку Component Set. В правой панели вы увидите раздел Properties. Здесь мы задаем логику.

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

Type (Тип): Primary, Secondary.

State (Состояние): Default, Hover, Disabled.

Size (Размер): Large, Small.

Icon (Иконка): True/False (есть или нет).

Чтобы присвоить значения конкретным кнопкам внутри сета, выделите кнопку и в панели справа введите значения для этих свойств. Например: Type: Primary, State: Hover.

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

Свойства компонентов (Component Properties)

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

1. Boolean Property (Логическое свойство)

Позволяет скрывать или показывать слои с помощью переключателя (тумблера). Пример:* У кнопки есть иконка. Вы можете назначить ей свойство «Show Icon». Теперь в экземпляре вы просто щелкаете тумблером, чтобы убрать или вернуть иконку.

2. Text Property (Текстовое свойство)

Позволяет менять текст прямо из панели свойств, не прокликивая слои до самого текстового блока. Пример:* Выделите текстовый слой в Главном компоненте. В секции Content (справа) нажмите иконку привязки. Назовите свойство «Label». Теперь текст кнопки меняется из меню справа.

3. Instance Swap (Замена экземпляра)

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

Организация дизайн-системы

Дизайн-система — это не просто набор кнопок. Это правила и структура. Даже в небольшом проекте важен порядок.

Правильный нейминг (именование)

Figma использует слэш / для создания папок в структуре ассетов. Это критически важно для навигации.

Называйте компоненты по логике: Категория / Тип / Состояние.

Плохо:* ButtonRed, BigInput, IconHome. Хорошо:* * Button / Primary / Default * Button / Primary / Hover * Inputs / Text Field / Active * Icons / Navigation / Home

Когда вы так назовете компоненты, в панели Assets они автоматически разложатся по папкам: папка Button, внутри папка Primary и т.д.

Локальные стили vs Компоненты

Важно не путать: * Стили (Styles): Это атомы. Цвета, шрифты, тени. (Мы проходили это во 2-м уроке). * Компоненты (Components): Это молекулы и организмы. Кнопки, карточки, меню.

Хорошая дизайн-система строится так: вы создаете цветовые стили (например, Blue 500), а затем используете этот стиль для покраски Компонента Кнопки. Если вы измените стиль Blue 500, кнопка обновится.

Практическое задание: Собираем систему кнопок

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

База: Напишите текст «Button», добавьте Auto Layout (Shift + A). Настройте отступы и заливку.

Компонент: Превратите фрейм в компонент (Ctrl + Alt + K). Назовите его Button.

Свойства: Выделите текст внутри. В панели справа в разделе Content нажмите иконку стрелочки (Create text property). Назовите «Label».

Варианты:

* Нажмите Add Variant на верхней панели. * Измените цвет второй кнопки (сделайте её темнее для состояния Hover). * В свойствах варианта назовите Property 1 как «State». * Первой кнопке задайте значение Default, второй — Hover.

Тест: Зайдите в панель Assets, перетащите кнопку на холст. Попробуйте поменять её текст и переключить State через выпадающий список.

Заключение

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

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

Прототипирование, настройка анимаций и передача макета разработчикам

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

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

Основы прототипирования: связываем экраны

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

Чтобы начать, переключитесь из режима Design в режим Prototype в правой верхней части панели свойств (или нажмите Shift + E).

Логика связей (Connections)

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

Нажмите на плюсик и, не отпуская кнопку мыши, потяните «ниточку» (синюю стрелку) к другому фрейму.

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

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

!Визуализация создания связи между двумя экранами в режиме прототипирования.

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

Как только вы создали связь, открывается меню настроек. Оно состоит из трех ключевых блоков:

Trigger (Триггер): Когда должно произойти действие?

* On click / On tap: При клике или нажатии пальцем (самый частый вариант). * While hovering: Пока курсор находится над объектом (для ховеров кнопок). * While pressing: Пока кнопка мыши зажата. * After delay: Автоматически через заданное время (полезно для появления всплывающих окон или смены слайдов).

Action (Действие): Что должно произойти?

* Navigate to: Переход на другой фрейм. * Open overlay: Открытие объекта поверх текущего экрана (модальные окна, бургер-меню). * Scroll to: Прокрутка к определенному месту на той же странице (якорные ссылки). * Back: Возврат на предыдущий экран.

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

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

Магия Smart Animate

Smart Animate — это функция, которая делает Figma мощнейшим инструментом для моушн-дизайна. Она автоматически анализирует начальный и конечный фреймы, находит одинаковые объекты и плавно анимирует изменения между ними.

Как это работает?

Представьте, что на Экране 1 у вас есть маленькая карточка товара, а на Экране 2 эта же карточка развернута на весь экран. Если вы соедините эти экраны и выберете Smart Animate, Figma плавно увеличит карточку, переместит картинку и перестроит текст.

Главное правило Smart Animate: Чтобы анимация сработала, объекты на обоих фреймах должны иметь одинаковые названия в панели слоев и одинаковую иерархию.

Если на первом экране слой называется Card_BG, а на втором — Rectangle 54, Figma посчитает их разными объектами и просто сделает эффект растворения (Dissolve). Если же названия совпадают, Figma поймет: «Ага, это один и тот же объект, просто он изменил размер и цвет».

!Демонстрация принципа работы Smart Animate: изменение свойств объекта при сохранении имени слоя.

Настройка плавности (Easing)

В настройках анимации вы увидите график кривой скорости. Это определяет характер движения:

* Linear: Равномерная скорость. Выглядит механически и неестественно. * Ease in: Медленный старт, ускорение в конце. * Ease out: Быстрый старт, замедление в конце (самый приятный для интерфейсов). * Ease in and out: Медленный старт и медленный финиш. * Bouncy / Gentle: Готовые пресеты для пружинистых анимаций.

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

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

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

Включите режим Prototype.

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

В триггере выберите While hovering.

В анимации выберите Smart Animate (обычно 150-200ms).

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

Просмотр результата

Чтобы увидеть плоды своих трудов, нажмите кнопку Present (иконка треугольника «Play») в правом верхнем углу.

* Откроется новая вкладка с вашим прототипом. * Вы можете поделиться ссылкой на этот прототип с заказчиком или коллегами (кнопка Share Prototype). * Figma Mirror: Скачайте приложение Figma на телефон. Если вы выберете фрейм на компьютере, он мгновенно отобразится на экране вашего смартфона. Это лучший способ проверить, удобны ли размеры кнопок для пальца.

Передача макета разработчикам (Handoff)

Дизайн готов, утвержден и анимирован. Теперь его нужно передать верстальщику. Раньше дизайнеры готовили огромные PDF-гайдлайны, описывая каждый отступ. Figma автоматизировала этот процесс.

Dev Mode (Режим разработчика)

В 2023 году Figma представила специальный режим Dev Mode. Он включается переключателем </> в правом верхнем углу (или сочетанием Shift + D).

Что видит разработчик в этом режиме:

Инспекция (Inspect): При клике на любой объект показываются его точные размеры, отступы до соседних элементов (Padding/Margin), цвета в HEX/RGB и параметры шрифта.

Готовый код: Figma генерирует CSS (для веба), SwiftUI (для iOS) или Compose (для Android). Разработчик может просто скопировать стили: border-radius: 10px; background: #F5F5F5;.

Box Model: Визуализация блочной модели, понятная верстальщикам.

!Интерфейс режима разработчика (Dev Mode) с отображением CSS-кода и параметров выбранного элемента.

Экспорт активов (Export)

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

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

В правой панели в самом низу найдите секцию Export.

Нажмите +.

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

* PNG/JPG: Для фотографий. * SVG: Для иконок и логотипов (векторный формат, который не теряет качества). * PDF: Для документов.

> Совет: Для растровых изображений (PNG) на экраны с высокой плотностью пикселей (Retina) добавляйте экспорт в масштабе 2x и 3x.

Коммуникация

Не молчите. Используйте инструмент Comments (клавиша C), чтобы оставить пояснения для разработчика прямо на макете. Например: «Здесь анимация должна длиться 300мс» или «Этот блок должен быть зафиксирован при скролле».

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

Мы прошли путь от пустого холста до готового интерактивного прототипа, готового к верстке. Вы освоили:

* Интерфейс и базовые фигуры. * Типографику, цвета и стили. * Auto Layout и модульные сетки. * Компоненты, варианты и дизайн-системы. * Прототипирование и передачу в разработку.

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