Основы веб-дизайна и проектирования интерфейсов в Figma

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

Добро пожаловать в курс «Основы веб-дизайна и проектирования интерфейсов в Figma». Вы сделали отличный выбор, решив освоить этот инструмент. За последние несколько лет Figma стала индустриальным стандартом для дизайнеров интерфейсов (UI), специалистов по пользовательскому опыту (UX) и даже разработчиков.

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

Почему именно Figma?

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

Работа в браузере. Вам не обязательно устанавливать тяжелое программное обеспечение. Figma работает прямо в Chrome, Safari или Firefox (хотя десктопное приложение тоже существует и оно очень удобное).

Мультиплеер. Это, пожалуй, главная киллер-фича. Несколько дизайнеров могут работать в одном файле одновременно, видя курсоры друг друга в реальном времени. Это похоже на работу в Google Docs, но для графики.

Автосохранение. Забудьте о привычке постоянно нажимать Ctrl + S. Figma сохраняет каждое ваше действие в облаке автоматически.

Шаг 1: Создание аккаунта

Начать работу очень просто. Figma предлагает щедрый бесплатный тарифный план (Starter), которого более чем достаточно для обучения и даже для работы фрилансером на начальных этапах.

Алгоритм регистрации:

Перейдите на официальный сайт Figma.

Нажмите кнопку Get started или Sign up в правом верхнем углу.

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

После входа Figma может задать вам несколько вопросов о вашей роли (выбирайте Design) и целях использования (выбирайте Personal use или Teaching/Taking a class).

> Figma — это условно-бесплатный инструмент. На тарифе Starter вы можете создавать неограниченное количество личных файлов в черновиках (Drafts), что идеально подходит для обучения.

Шаг 2: Обзор интерфейса (File Browser)

После регистрации вы попадаете в File Browser (Файловый менеджер). Это ваш «домашний экран». Здесь хранятся все ваши проекты.

Слева находится боковая панель навигации: * Recents (Недавние): файлы, которые вы открывали последними. * Drafts (Черновики): здесь будут жить все ваши учебные проекты. * Community (Сообщество): огромная библиотека бесплатных ресурсов, плагинов и шаблонов от других дизайнеров.

Чтобы создать свой первый файл, нажмите на большую синюю кнопку + Design file в правом верхнем углу или на плитку New design file.

Шаг 3: Анатомия редактора

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

!Схема расположения основных зон интерфейса Figma: инструменты, слои, свойства и холст.

1. Холст (Canvas)

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

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

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

3. Панель слоев (Left Sidebar)

Расположена слева. Здесь отображается иерархия всего, что вы добавляете на холст. * Вкладка Layers (Слои): список всех объектов. * Вкладка Assets (Ассеты): библиотека компонентов (об этом мы поговорим в следующих статьях).

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

Расположена справа. Это контекстная панель. Её содержимое меняется в зависимости от того, что вы выделили. * Вкладка Design: настройки цвета, размера, шрифтов, теней. * Вкладка Prototype: настройки анимации и переходов.

Шаг 4: Базовые инструменты и горячие клавиши

Профессиональный дизайнер отличается от новичка скоростью работы. Секрет скорости — в использовании горячих клавиш (Hotkeys). Я буду указывать их в скобках рядом с названием инструмента. Постарайтесь запоминать их сразу.

Move Tool (V) и Scale Tool (K)

Самый первый инструмент в панели. * Move (V): Основной инструмент. Позволяет выделять и перемещать объекты. * Scale (K): Инструмент масштабирования. В отличие от простого изменения размера, Scale меняет размер объекта пропорционально, включая толщину обводок и размер шрифта.

Frame (F)

Это, пожалуй, самый важный концепт в Figma. Новички часто путают Фрейм (Frame) с Прямоугольником (Rectangle), но это разные вещи.

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

> Представьте, что Фрейм — это холст картины, а Прямоугольник — это просто краска, нанесенная на холст.

Чтобы создать фрейм:

Нажмите F.

Справа в панели свойств появится список готовых размеров (iPhone, Desktop, Social Media).

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

Shapes (Фигуры)

Рядом с инструментом Frame находится выпадающий список фигур.

| Инструмент | Горячая клавиша | Описание | | :--- | :---: | :--- | | Rectangle (Прямоугольник) | R | Базовый блок для кнопок, фонов, карточек. | | Ellipse (Эллипс/Круг) | O | Для аватарок, иконок, декоративных элементов. | | Line (Линия) | L | Разделители, подчеркивания. | | Arrow (Стрелка) | Shift + L | Указатели. |

Совет: Чтобы нарисовать идеально ровный квадрат или круг, удерживайте клавишу Shift во время рисования.

!Удержание клавиши Shift позволяет сохранять пропорции при создании фигур.

Pen (P) и Pencil

* Pen (Перо): Мощный векторный инструмент для рисования сложных иконок и иллюстраций по точкам (кривые Безье). * Pencil (Карандаш): Для свободного рисования от руки (используется редко).

Text (T)

Нажмите T и кликните в любом месте, чтобы начать печатать. Справа в панели свойств вы сможете выбрать шрифт (например, популярный Inter или Roboto), начертание (Bold, Regular) и размер.

Hand Tool (H)

Инструмент «Рука» позволяет перемещаться по холсту, не сдвигая объекты. Однако профессионалы редко нажимают H. Гораздо удобнее зажать Пробел (Space) — пока он нажат, курсор превращается в руку, и вы можете «таскать» холст мышкой.

Навигация в пространстве

Умение быстро летать по макету критически важно.

* Зум (Zoom): Удерживайте Ctrl (Windows) или Cmd (Mac) и крутите колесико мыши. Либо используйте + и - на клавиатуре. * Панорамирование: Зажмите Пробел и тяните мышкой. * Показать всё: Нажмите Shift + 1, чтобы увидеть все объекты на холсте сразу. * Фокус на объекте: Выделите объект и нажмите Shift + 2, чтобы приблизить камеру именно к нему.

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

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

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

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

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

Нажмите T и напишите заголовок поверх прямоугольника.

Попробуйте сгруппировать эти два объекта, выделив их и нажав Ctrl + G (или Cmd + G). Посмотрите, как изменилась структура в панели слоев слева.

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

Удачи в освоении Figma!

Работа с фреймами, векторными фигурами, сетками и настройка типографики

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

В этой статье мы разберем четыре фундаментальных столпа работы в Figma:

Глубокое понимание Фреймов (и чем они отличаются от Групп).

Создание сложных форм с помощью Векторных операций.

Использование Модульных сеток для идеального выравнивания.

Профессиональная работа с Текстом.

Фреймы против Групп: вечная битва

Один из самых частых вопросов новичков: «В чем разница между Фреймом (Frame) и Группой (Group)?». Визуально они могут выглядеть одинаково — как контейнер для объектов. Но технически это совершенно разные сущности.

Группы (Groups)

Создаются сочетанием клавиш Ctrl + G (Windows) или Cmd + G (Mac).

Группа — это просто папка, которая объединяет слои, чтобы их было удобно перемещать вместе. У группы нет собственных свойств фона или размера. Границы группы всегда плотно облегают содержимое. Если вы удалите объекты из группы, группа исчезнет.

Фреймы (Frames)

Создаются инструментом Frame F или сочетанием Ctrl + Alt + G (Cmd + Option + G) для оборачивания выделенного.

Фрейм — это «умный» контейнер. Он имитирует окно браузера или экран телефона. В отличие от группы, фрейм: * Имеет собственный размер, независимый от содержимого. * Может иметь собственный фон (Fill), обводку (Stroke) и эффекты. * Может обрезать содержимое, выходящее за его границы (Clip content). * Поддерживает сетки (Layout Grids) и ограничения (Constraints).

!Визуальное сравнение поведения границ Группы и Фрейма при размещении объектов.

> Золотое правило Figma: Старайтесь всегда использовать Фреймы для структурных элементов (экраны, карточки, кнопки, меню). Группы используйте только для временного объединения мелких деталей, например, частей иллюстрации.

Векторные фигуры и булевы операции

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

Булевы операции (Boolean Operations)

Наверху, в центре панели инструментов, появляется специальная иконка (два квадрата), когда вы выделяете две и более фигуры. Это меню булевых операций. Они позволяют комбинировать фигуры неразрушающим способом.

Union selection (Объединение): Сливает фигуры в одну общую форму.

Subtract selection (Вычитание): Верхняя фигура «вырезает» кусок из нижней.

Intersect selection (Пересечение): Оставляет только ту часть, где фигуры накладываются друг на друга.

Exclude selection (Исключение): Оставляет всё, кроме места пересечения фигур.

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

!Наглядная демонстрация работы Union, Subtract, Intersect и Exclude.

Flatten (Сплющивание)

Если вы закончили редактировать сложную форму и хотите превратить её в единый векторный контур (чтобы упростить структуру слоев), используйте команду Flatten (Ctrl + E или Cmd + E). После этого булевы свойства пропадут, и фигура станет обычным вектором.

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

Вы когда-нибудь замечали, что на хороших сайтах всё стоит ровно? Заголовки выровнены по одной линии, карточки товаров имеют одинаковую ширину. Это заслуга сеток.

Сетка — это невидимый скелет вашего дизайна. В Figma сетки добавляются только к Фреймам. Чтобы создать сетку:

Выделите Фрейм.

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

Нажмите +.

По умолчанию создается сетка 10px (клеточки, как в тетради). Но для веб-дизайна чаще используются колонки.

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

Нажмите на иконку сетки (многоточие) в панели свойств и смените тип с Grid на Columns.

Стандартные настройки для десктопного дизайна (ширина макета 1440px): * Count (Количество): 12. Это число удобно делится на 2, 3, 4 и 6, что позволяет гибко компоновать блоки. * Margin (Поля): Отступ от левого и правого края фрейма. Обычно 60px, 80px или больше, чтобы контент не прилипал к краям экрана. * Gutter (Межколонник): Расстояние между колонками. Стандарт — 20px или 24px.

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

Сетка помогает вам принимать решения: какой ширины должна быть кнопка? Пусть она занимает ровно 2 колонки. Где разместить фото? Пусть занимает 6 колонок (половину экрана).

> Чтобы быстро скрыть или показать сетки, используйте горячую клавишу Shift + G.

Типографика: искусство работы с текстом

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

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

Все настройки находятся в правой панели в секции Text.

Font Family (Шрифт): Выбор гарнитуры (например, Inter, Roboto, Open Sans). Старайтесь не использовать более 2 разных шрифтов в одном проекте.

Font Weight (Начертание): Толщина букв (Regular, Medium, Bold). Используйте жирное начертание для заголовков и акцентов.

Font Size (Размер): Размер шрифта в пикселях. Для основного текста в вебе стандартом считается 16px или 18px.

Line Height (Межстрочный интервал): Расстояние между строками. Это критически важный параметр для читаемости.

* Для заголовков: 110–120% (или 1.1–1.2). * Для основного текста: 140–160% (или 1.4–1.6). * В Figma можно писать значения в процентах или пикселях. Если размер шрифта 16px, то хороший интерлиньяж будет 24px (150%).

Letter Spacing (Межбуквенное расстояние): Иногда требуется для заголовков, набранных ЗАГЛАВНЫМИ (тогда его стоит увеличить на 3-5%). Для строчного текста обычно оставляют 0%.

Режимы текстового контейнера

Когда вы пишете текст, контейнер может вести себя по-разному. Обратите внимание на три иконки в настройках текста:

* Auto Width (Автоширина): Контейнер растет вправо бесконечно, пока вы печатаете. Подходит для коротких заголовков или кнопок. * Auto Height (Автовысота): Ширина фиксирована, но контейнер растет вниз при добавлении текста. Идеально для абзацев текста в статьях. * Fixed Size (Фиксированный размер): И ширина, и высота заданы жестко. Если текста много, он просто вылезет за границы или скроется.

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

Давайте объединим полученные знания.

Создайте Фрейм (F) размером 300x400 px.

Добавьте внутрь Прямоугольник (R) для фото товара (сверху).

Ниже напишите название товара, используя инструмент Текст (T). Сделайте шрифт жирным (Bold) и размером 20px.

Под названием добавьте описание обычным шрифтом (Regular, 14px). Установите для текстового блока режим Auto Height, чтобы он переносился на новые строки.

Нарисуйте кнопку внизу: создайте Фрейм (не прямоугольник!), залейте его цветом, добавьте скругление углов (Corner Radius) в правой панели. Внутри напишите «Купить».

Выровняйте все элементы, используя «умные направляющие» (красные линии, которые появляются при перетаскивании).

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

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

Магия автоматизации: освоение Auto Layout, создание компонентов и вариантов

В предыдущих статьях мы научились создавать статические макеты: рисовали прямоугольники, писали текст и выравнивали всё это по сетке. Но что произойдет, если вы захотите изменить текст в кнопке с короткого «Купить» на длинное «Добавить в корзину»? В обычном фрейме текст вылезет за границы кнопки, и вам придется вручную растягивать прямоугольник и двигать соседние элементы.

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

Сегодня мы изучим инструменты, которые превращают Figma из простого графического редактора в мощную систему для проектирования интерфейсов: Auto Layout (Автолейаут), Components (Компоненты) и Variants (Варианты).

Часть 1: Auto Layout — ваш лучший друг

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

Как включить Auto Layout?

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

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

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

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

!Панель настроек Auto Layout с основными параметрами.

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

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

* Direction (Направление): Стрелки вниз (вертикально) или вправо (горизонтально). Определяет, как будут выстраиваться объекты: в столбик или в строку. * Spacing between items (Расстояние между элементами): Зазор между объектами внутри (например, расстояние между иконкой и текстом в кнопке). * Padding (Внутренние отступы): Отступы от границ фрейма до контента внутри. Можно задать отдельно горизонтальные и вертикальные отступы.

Магия изменения размеров (Resizing)

Это самая важная концепция. У каждого объекта внутри Auto Layout (и у самого фрейма) есть настройки поведения размеров. Они находятся в панели свойств вверху раздела Frame.

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

Hug contents (Обнять содержимое): Фрейм сжимается ровно настолько, чтобы обернуть контент внутри. Если вы добавите текст, фрейм расширится. Это идеально для кнопок.

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

> Представьте, что Hug — это одежда из спандекса, которая облегает тело, а Fill — это вода, которая заполняет форму сосуда.

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

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

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

Напишите текст «Купить».

Нажмите Shift + A. Вокруг текста создастся фрейм с Auto Layout.

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

Настройте отступы (Padding): например, 16px по горизонтали и 12px по вертикали.

Убедитесь, что для фрейма кнопки стоят настройки Hug contents по ширине и высоте.

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

Часть 2: Компоненты (Components)

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

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

Терминология

* Main Component (Главный компонент): Исходник. Обозначается иконкой из четырех ромбиков ❖. Любые изменения в нем влияют на все копии. * Instance (Экземпляр): Копия главного компонента. Обозначается пустым ромбом ◇. Она зависима от главного компонента.

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

Выделите объект (например, нашу «умную» кнопку).

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

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

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

Что можно менять в Экземпляре?

Вы можете менять в экземплярах текст, картинки и цвета (это называется Overrides — переопределения). Но вы не можете перемещать элементы внутри экземпляра или менять их структуру — это можно делать только в Главном компоненте.

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

Часть 3: Варианты (Variants)

В реальном интерфейсе кнопка — это не один объект. У неё есть состояния: * Default (Обычная) * Hover (При наведении) * Pressed (Нажатая) * Disabled (Неактивная)

Раньше дизайнеры создавали 4 разных компонента: Button/Default, Button/Hover и т.д. Это засоряло библиотеку. Variants позволяют объединить эти состояния в один компонент с настройками.

Создание вариантов

Создайте компонент кнопки.

В панели свойств справа, в разделе Properties, нажмите + и выберите Variant.

Figma обернет ваш компонент в фиолетовую пунктирную рамку — Component Set (Набор компонентов).

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

Измените дизайн копии (например, сделайте цвет темнее для состояния Hover).

Настройка свойств

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

По умолчанию свойство называется Property 1. Переименуйте его в State (Состояние). Затем выделите первую кнопку и назовите её значение Default, а вторую — Hover.

Теперь, когда вы возьмете экземпляр этой кнопки из панели Assets (слева, рядом со слоями), вы увидите выпадающий список, где можно переключать состояния одной кнопкой мыши!

!Набор вариантов кнопки с различными состояниями.

Практическое задание: Карточка товара 2.0

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

Подготовка атомов:

* Создайте текстовый слой для цены. * Создайте кнопку «Купить» с Auto Layout (Shift + A). Превратите её в компонент (Ctrl + Alt + K).

Сборка контента:

* Нарисуйте прямоугольник для фото. * Напишите название товара. * Выделите название, цену и кнопку. Нажмите Shift + A, чтобы создать Auto Layout для контентной части. Установите направление Vertical. * Поставьте расстояние между элементами (Gap) 8px.

Финальная сборка:

* Выделите фото и контентный блок. Снова нажмите Shift + A. Это будет сама карточка. * Добавьте карточке заливку (Fill) белым цветом и скругление углов. * Установите Padding (например, 16px).

Настройка адаптивности:

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

Заключение

Использование Auto Layout и Компонентов — это то, что отличает новичка от профессионала. Сначала это может показаться сложным, но как только вы привыкнете, вы уже не сможете работать по-старому. Это инвестиция времени, которая окупается сторицей при первых же правках макета.

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

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

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

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

Что такое прототип и зачем он нужен?

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

Зачем тратить на это время?

Проверка гипотез. Удобно ли нажимать на эту кнопку? Понятно ли, куда ведет эта ссылка? Прототип позволяет найти ошибки в логике (UX) еще до начала разработки.

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

Передача разработчикам. Программисту проще понять анимацию, увидев её, чем читая текстовое описание вроде «кнопка плавно выезжает слева за 0.3 секунды».

Шаг 1: Знакомство с панелью Prototype

До сих пор мы работали только во вкладке Design в правой панели свойств. Теперь пришло время переключиться на соседнюю вкладку — Prototype.

Как только вы нажмете на неё, интерфейс изменится: * При наведении на любой Фрейм или объект, на его границах появятся синие кружки с плюсиком. Это узлы для создания связей. * В правой панели исчезнут настройки цвета и шрифта, а вместо них появятся настройки взаимодействий (Interactions).

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

Шаг 2: Создание связей (Connections)

Основа прототипа — это связи. Связь говорит Figma: «Если пользователь нажмет сюда, перейди туда».

Как создать переход:

Убедитесь, что вы находитесь во вкладке Prototype.

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

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

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

После этого справа откроется меню Interaction details (Детали взаимодействия). Здесь настраивается логика перехода.

Анатомия взаимодействия

Настройка состоит из трех главных частей:

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

* On click / On tap: При клике или касании (самый частый вариант). * On drag: При перетаскивании (например, для слайдеров). * While hovering: При наведении курсора (для десктопа). * After delay: Автоматически через заданное время (работает только для фреймов верхнего уровня).

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

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

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

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

Шаг 3: Магия Smart Animate

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

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

Главное правило Smart Animate

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

Пример: У вас есть переключатель (Toggle). * На Фрейме А: серый овал и белый круг слева. Название слоя круга: Knob. * На Фрейме Б: зеленый овал и белый круг справа. Название слоя круга: Knob.

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

!Иллюстрация принципа работы Smart Animate: трансформация объекта при совпадении имен слоев.

Шаг 4: Интерактивные компоненты (Interactive Components)

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

Теперь у нас есть Interactive Components. Вы можете настроить прототипирование прямо внутри набора компонентов (Component Set).

Как это сделать:

Перейдите к вашему главному компоненту с вариантами (фиолетовая пунктирная рамка).

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

Соедините вариант Default с вариантом Hover.

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

В настройках анимации выберите Smart Animate (чтобы цвет менялся плавно).

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

Шаг 5: Скроллинг и фиксация элементов

Часто страница не помещается на один экран. Чтобы прототип можно было прокручивать, нужно выполнить два условия:

Содержимое фрейма должно быть больше самого фрейма.

Во вкладке Prototype в разделе Scroll behavior (Поведение прокрутки) должно быть выбрано Vertical.

Фиксация шапки (Sticky Header)

Чтобы меню или шапка сайта оставались на месте при прокрутке:

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

Во вкладке Prototype в разделе Scroll behavior выберите Fixed (Зафиксировать).

Теперь контент будет проплывать под шапкой, как на настоящем сайте.

Шаг 6: Запуск и просмотр (Presentation View)

Вы все настроили. Как посмотреть результат?

Нажмите кнопку Present (иконка треугольника Play) в правом верхнем углу интерфейса.

Откроется новая вкладка с вашим прототипом.

Вы можете делиться ссылкой на этот прототип с заказчиками или друзьями (кнопка Share prototype).

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

Практическое задание: Создание микро-взаимодействия

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

Нарисуйте квадрат 24x24 px с обводкой (это будет выключенный чекбокс).

Превратите его в компонент и добавьте вариант.

Во втором варианте залейте квадрат цветом и добавьте иконку галочки (это будет включенный чекбокс).

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

Перейдите в режим Prototype.

Протяните стрелку от первого варианта ко второму. Триггер: On click. Анимация: Smart Animate, Ease out, 150ms.

Протяните стрелку обратно от второго к первому с теми же настройками.

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

Теперь у вас есть полностью рабочий интерактивный элемент!

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

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

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

Но дизайн — это не конечный продукт. Конечный продукт — это работающий сайт или приложение. Чтобы ваш макет превратился в реальность, его нужно передать разработчикам. И сделать это нужно так, чтобы они не проклинали тот день, когда вы открыли Figma.

В этой заключительной статье курса мы разберем три важнейшие темы:

Плагины: как ускорить работу и добавить функционал, которого нет в стандартной Figma.

Экспорт: как правильно сохранять иконки и картинки.

Handoff (Передача): как подготовить макет для верстки и взаимодействовать с командой.

Часть 1: Плагины — суперспособности для дизайнера

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

Представьте, что Figma — это смартфон, а плагины — это приложения из App Store. Они могут генерировать текст, искать фотографии, проверять контрастность цветов и даже создавать 3D-объекты.

Как найти и установить плагин?

Нажмите на иконку Resources (значок ромба с квадратом) в верхней панели инструментов или используйте горячую клавишу Shift + I.

Перейдите на вкладку Plugins.

В строке поиска введите название или ключевое слово (например, "Photo" или "Icons").

Нажмите Run (Запустить), чтобы использовать плагин немедленно.

!Меню поиска и запуска плагинов в интерфейсе Figma.

Топ-5 плагинов для новичка

Я рекомендую установить эти плагины сразу же, они понадобятся вам в 99% проектов:

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

Iconify: Доступ к тысячам векторных иконок (Material Design, FontAwesome и другие). Позволяет в один клик добавить иконку "домика" или "лупы" в макет.

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

Stark: Инструмент для проверки доступности (accessibility). Он подскажет, достаточно ли контрастен текст на фоне, чтобы его могли прочитать люди с плохим зрением.

Remove BG: Удаляет фон с фотографий за одну секунду. Магия в чистом виде.

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

Часть 2: Экспорт ресурсов

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

Панель Export

Настройки экспорта находятся в самом низу правой панели свойств (вкладка Design). Чтобы активировать их, выделите любой объект, фрейм или группу и нажмите + напротив заголовка Export.

Форматы файлов: что и когда выбирать?

Это самый частый вопрос новичков. Давайте раз и навсегда запомним стандарты веб-разработки:

| Формат | Расшифровка | Для чего использовать | Особенности | | :--- | :--- | :--- | :--- | | SVG | Scalable Vector Graphics | Иконки, логотипы, простые иллюстрации | Это вектор. Можно растягивать до бесконечности без потери качества. Мало весит. | | PNG | Portable Network Graphics | Изображения с прозрачным фоном | Растровый формат. Поддерживает прозрачность. Идеально для вырезанных объектов. | | JPG | Joint Photographic Experts Group | Фотографии, сложные фоны | Растровый формат. Не поддерживает прозрачность. Весит меньше, чем PNG, но сжимает качество. | | PDF | Portable Document Format | Документы, презентации | Используется для экспорта макетов целиком для печати или просмотра. |

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

В настройках экспорта вы увидите выпадающий список с надписью 1x. Это множитель размера.

* 1x: Экспортирует в оригинальном размере. * 2x: Экспортирует изображение в два раза больше (по ширине и высоте).

Зачем нужно 2x? Современные экраны (Retina, 4K) имеют высокую плотность пикселей. Если вы сохраните иконку в 1x и откроете её на iPhone, она будет выглядеть размытой. Поэтому растровые изображения (PNG, JPG) часто экспортируют в 2x или даже 3x.

> Важно: SVG (вектор) не нужно экспортировать в 2x, так как он идеально масштабируется программно.

!Настройка параметров экспорта: выбор формата и масштаба.

Часть 3: Передача макета (Handoff)

Вы закончили дизайн. Что дальше? Отправить файл .fig по почте? Нет, так уже никто не делает. Figma — это облачный инструмент, и вся работа происходит по ссылке.

Подготовка файла: гигиена макета

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

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

Назовите слои. Разработчик будет ориентироваться по вашим названиям. Frame 1452 ни о чем ему не говорит. Product_Card — говорит о многом. Особенно важно называть группы и компоненты.

Создайте обложку. Сделайте отдельную страницу (Page) с названием "Cover", создайте там фрейм и напишите название проекта и статус (например, "В разработке"). Кликните правой кнопкой по фрейму и выберите Set as thumbnail. Теперь в файловом менеджере ваш проект будет выглядеть опрятно.

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

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

Когда разработчик включает этот режим и кликает на элемент (например, кнопку), он видит:

* CSS-код: цвет, шрифт, тени, скругления в формате кода, который можно просто скопировать. * Размеры и отступы: при наведении курсора на соседние объекты Figma показывает точное расстояние в пикселях. * Ассеты: возможность скачать выбранную иконку или картинку.

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

Sharing (Поделиться)

Чтобы дать доступ к макету:

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

Введите email разработчика или нажмите Copy link.

Права доступа:

can view: Пользователь может смотреть, измерять расстояния, копировать код и оставлять комментарии. Он не может* двигать объекты или удалять их. Это идеальный вариант для разработчиков. * can edit: Полный доступ к редактированию. Давайте его только другим дизайнерам, с которыми вы работаете в паре.

!Настройка прав доступа при шеринге проекта.

Коммуникация через комментарии

Даже идеальный макет вызывает вопросы. "Что происходит при клике сюда?", "Где ссылка на этот шрифт?".

Для общения используйте инструмент Comment (клавиша C).

Нажмите C.

Кликните в любое место макета (прямо на спорный элемент).

Напишите вопрос или пояснение.

Разработчик получит уведомление и сможет ответить там же. Это гораздо удобнее, чем пересылать скриншоты в Telegram или Slack, потому что переписка привязана к конкретной точке на макете.

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

Мы подошли к концу нашего курса "Основы веб-дизайна и проектирования интерфейсов в Figma". Давайте оглянемся назад.

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

Что делать дальше?

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

Смотрите Community. Изучайте, как устроены файлы других дизайнеров. Разбирайте их на части.

Следите за обновлениями. Figma обновляется постоянно. Появляются новые функции (как Variables или Dev Mode), которые меняют правила игры.

Вы получили мощный фундамент. Теперь всё зависит только от вашего желания творить и учиться. Удачи в мире веб-дизайна!