Практический веб-дизайн в Figma: от сетки до адаптива

Подготовка фундамента: работа с референсами, настройка модульной сетки и создание вайрфреймов

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

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

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

Этап 1. Насмотренность и работа с референсами

Ни один дизайн не рождается в вакууме. Даже самые опытные арт-директора начинают с исследования. Референсы (или «рефы») — это примеры чужих работ, которые помогают вам понять, как решить вашу задачу.

Зачем нужны референсы?

Понимание стандартов. Если вы делаете интернет-магазин, пользователи ожидают увидеть корзину справа сверху. Референсы подскажут привычные паттерны.

Визуальный стиль. Вы можете найти интересные цветовые сочетания или шрифтовые пары.

Экономия времени. Зачем изобретать велосипед, если можно посмотреть, как другие решили проблему навигации?

> Хорошие художники копируют, великие художники крадут. — Пабло Пикассо. Остин Клеон, Кради как художник

Где искать вдохновение?

Не ограничивайтесь поиском в Google Картинках. Используйте профессиональные площадки:

* Behance — для поиска полноценных кейсов и больших презентаций. * Dribbble — для поиска визуальных приемов (но будьте осторожны, там часто рисуют нереалистичные концепты). * Awwwards — для просмотра лучших реализованных сайтов. * Pinterest — для создания мудбордов (досок настроения).

Практика: Создаем Мудборд в Figma

Не сохраняйте картинки в папку на компьютере. Работайте сразу в Figma.

Создайте новую страницу в вашем файле и назовите её Research.

Найдите 3-5 примеров сайтов, которые вам нравятся по стилистике или структуре.

Сделайте скриншоты и вставьте их в Figma (Ctrl + V или Cmd + V).

Рядом с каждым скриншотом напишите короткий комментарий: что именно вам здесь понравилось? (Например: «Нравится крупный заголовок» или «Удобная сетка карточек»).

!Пример оформления мудборда в Figma с комментариями к референсам

Этап 2. Магия модульной сетки

Сетка (Grid) — это невидимый скелет вашего сайта. Она помогает выравнивать элементы, сохранять отступы и делать дизайн аккуратным. Без сетки элементы будут «плясать», создавая ощущение небрежности.

Почему 12 колонок?

В веб-дизайне стандартом де-факто является 12-колоночная сетка. Почему именно 12? Это число идеально делится на 2, 3, 4 и 6. Это дает огромную гибкость:

* Можно разделить экран пополам (2 блока по 6 колонок). * На три части (3 блока по 4 колонки). * На четыре части (4 блока по 3 колонки).

Настройка сетки в Figma

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

Выберите инструмент Frame (F) и создайте фрейм Desktop (1440px шириной).

На панели справа найдите раздел Layout Grid и нажмите +.

Нажмите на иконку с точками (Grid settings) и переключите режим с Grid на Columns.

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

* Count (Количество): 12 * Type (Тип): Center (сетка будет по центру экрана) * Width (Ширина колонки): 80 или 60 (зависит от желаемой ширины контента) * Gutter (Межколонник): 20 (расстояние между колонками)

Математика сетки

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

Общая ширина контента () складывается из ширины всех колонок и ширины всех межколонных расстояний (гаттеров).

Где: * — итоговая ширина активной области сайта (контейнера). * — количество колонок (обычно 12). * — ширина одной колонки (Column width). * — ширина межколонного интервала (Gutter).

Например, если мы берем 12 колонок по 80px и гаттер 20px, то ширина нашего контента будет:

Это означает, что весь ваш текст и картинки должны помещаться в эти 1180 пикселей по ширине, не вылезая за края.

!Схема строения 12-колоночной сетки с обозначением колонок и отступов

Этап 3. Вайрфреймы (Прототипирование)

Теперь, когда у нас есть идеи (референсы) и структура (сетка), мы начинаем строить «чертеж» сайта. Этот этап называется созданием вайрфреймов (Wireframes).

Вайрфрейм — это низкодетализированная схема страницы. Здесь запрещено использовать: * Цвет (используем только оттенки серого). * Финальные изображения (используем перечеркнутые прямоугольники). * Детальную типографику (достаточно одного шрифта).

Зачем так ограничивать себя?

Если вы начнете сразу подбирать цвета, вы увязнете в «вкусовщине». Вайрфрейм позволяет сосредоточиться на UX (User Experience) — логике и удобстве. Вы решаете, где будет кнопка, чтобы на нее нажали, а не какого она будет цвета.

Процесс создания вайрфрейма

Блочная структура. Нарисуйте прямоугольники, обозначающие основные секции сайта: Шапка (Header), Первый экран (Hero Section), Преимущества, Каталог, Подвал (Footer).

Наполнение контентом. Разместите текстовые блоки и кнопки. Используйте реальный текст, если он есть, или «рыбу» (Lorem Ipsum), если текста пока нет.

Совет:* В Figma есть плагин Lorem Ipsum, который генерирует текст одной кнопкой.

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

Практический пример: Первый экран

Давайте соберем Hero Section (первый экран) для условного сайта архитектурного бюро.

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

Слева размещаем заголовок: «Современная архитектура для жизни». Он занимает 5 левых колонок.

Под заголовком — подзаголовок (текст помельче) и кнопка «Смотреть проекты».

Все элементы выравниваем по сетке. Между левой текстовой частью и правой картинкой остается 1 пустая колонка «воздуха».

!Пример вайрфрейма первого экрана, выровненного по модульной сетке

Итоги

Мы подготовили надежный фундамент. У нас есть:

Мудборд, который задает настроение.

Сетка, которая держит структуру.

Вайрфрейм, который определяет логику.

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

Визуальный стиль: создание UI-кита, работа с типографикой, цветом и стилями слоев

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

Многие новички здесь совершают ошибку: начинают хаотично красить кнопки и менять шрифты на каждом экране отдельно. В итоге получается «винегрет»: на главной странице заголовок синий и жирный, а в каталоге — красный и тонкий. Чтобы этого избежать, профессионалы создают UI-кит (User Interface Kit).

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

Что такое UI-кит и зачем он нужен?

UI-кит — это набор готовых интерфейсных решений и правил для вашего проекта. Это ваша «палитра художника», где заранее смешаны нужные краски и подготовлены кисти.

Представьте, что вы строите дом из LEGO. Если у вас все детали свалены в одну кучу, строить сложно. Если же детали разложены по коробочкам (синие кубики отдельно, красные отдельно, окна отдельно) — процесс ускоряется в разы.

UI-кит решает три задачи:

Скорость. Вы не подбираете цвет каждый раз, а берете готовый стиль.

Единообразие. Все кнопки и заголовки выглядят одинаково на всех страницах.

Легкость правок. Изменив стиль в одном месте, вы обновите его на всем макете мгновенно.

!Пример того, как выглядит базовый UI-кит в Figma

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

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

Подбор шрифтовой пары

Не используйте больше 2 шрифтов на сайте. Это золотое правило. Один шрифт (гротеск) — самый безопасный вариант. Например, Inter или Roboto* для всего. * Два шрифта — один акцентный (для заголовков), второй читабельный (для основного текста).

Настройка текстовых стилей в Figma

В Figma не нужно запоминать размер шрифта. Мы создаем Text Styles. Давайте определим базовый набор:

H1 (Заголовок 1 уровня) — для главных заголовков страниц (например, 48-60px).

H2 (Заголовок 2 уровня) — для названий секций (32-40px).

H3 (Заголовок 3 уровня) — для карточек товаров или статей (20-24px).

Body (Основной текст) — для абзацев (16-18px).

Caption (Подпись) — для мелких деталей (12-14px).

Математика идеального интерлиньяжа

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

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

Где: * (Line Height) — итоговая высота строки в пикселях. * (Font Size) — размер шрифта. * — коэффициент множителя.

Рекомендуемые значения коэффициента : * Для заголовков: * Для основного текста:

Пример: Если у вас основной текст размером 16px, то идеальная высота строки будет:

То есть равен 24 пикселям. В Figma в поле Line Height вы можете писать как проценты (150%), так и пиксели (24).

> Типографика существует, чтобы чтить контент. — Роберт Брингхерст, автор книги Основы стиля в типографике

Цвет: Эмоции и функции

Цвет управляет вниманием. Чтобы не превратить сайт в радугу, используйте правило 60-30-10.

Правило 60-30-10

Это классическая схема распределения цветов в интерьере и веб-дизайне: * 60% — Основной цвет. Обычно это нейтральный фон (белый, светло-серый) или темный фон для темной темы. * 30% — Вторичный цвет. Это цвет бренда, используемый для заголовков, плашек, иконок. * 10% — Акцентный цвет. Самый яркий цвет для призыва к действию (кнопки, ссылки).

!Визуализация правила 60-30-10 в веб-дизайне

Создание Color Styles

Никогда не используйте «пипетку» каждый раз заново. Создайте стили:

Нарисуйте квадраты с вашими цветами.

Выберите квадрат, нажмите на иконку Style (четыре точки) в панели Fill.

Нажмите + и дайте название. Называйте цвета по функции, а не по оттенку: не Red, а Error; не Blue, а Primary.

Стили слоев: Тени и скругления

Плоский дизайн (Flat) хорош, но иногда нужно показать, что элемент «парит» над поверхностью. Для этого используются тени (Drop Shadow).

Система теней (Elevation)

Не делайте одну случайную тень. Создайте систему «высот»: * Level 1 (Карточка): Легкая, почти незаметная тень для выделения блока на фоне. * Level 2 (Ховер): Тень становится чуть больше при наведении мыши. * Level 3 (Модальное окно): Глубокая, размытая тень, показывающая, что окно находится поверх всего контента.

В Figma это настраивается в разделе Effects. Сохраняйте их как стили так же, как текст и цвет.

Практика: Собираем UI-кит и красим вайрфрейм

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

Шаг 1. Организация страницы

Создайте в вашем файле Figma новую страницу и назовите её UI Kit. Нарисуйте там фрейм и соберите в него: * Все варианты типографики (от H1 до Caption). * Палитру цветов. * Примеры кнопок (обычная, при наведении, нажатая). * Примеры полей ввода.

Шаг 2. Привязка стилей

Вернитесь к вашему вайрфрейму.

Выделите все заголовки и примените к ним стиль H1, H2 и т.д.

Выделите кнопки и покрасьте их в стиль Accent.

Выделите фон и задайте ему Neutral цвет.

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

Чек-лист проверки визуального стиля

Перед тем как считать работу готовой, проверьте себя: * Используется не более 2 шрифтовых гарнитур? * Текст читается легко (достаточный контраст и интерлиньяж)? * Акцентный цвет используется только для важных действий (10%)? * Все цвета и шрифты привязаны к стилям Figma (нет «отвязанных» значений)?

Заключение

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

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

Технический дизайн: глубокое погружение в Auto Layout, Constraints и создание сложных компонентов

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

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

Наши главные инструменты сегодня — это «Святая троица» Figma: Constraints (Ограничители), Auto Layout (Автолейаут) и Components (Компоненты).

Часть 1. Constraints: Привязки и поведение при ресайзе

Представьте, что вы повесили картину на стену. Она висит там, где вы вбили гвоздь. Но в веб-дизайне «стена» (размер экрана браузера) постоянно меняется. Пользователь может открыть сайт на огромном мониторе или на маленьком ноутбуке.

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

Основные виды привязок

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

Left / Top (По умолчанию). Элемент приклеен к левому верхнему углу. При растягивании фрейма он остается на месте.

Right / Bottom. Элемент приклеен к правому или нижнему краю. Полезно для кнопок «Далее» или футера.

Center. Элемент всегда остается по центру, независимо от ширины фрейма.

Left and Right / Top and Bottom. Самый интересный режим. Элемент сохраняет фиксированные отступы от краев, растягиваясь вместе с фреймом.

Scale. Элемент масштабируется в процентах относительно родителя (меняет и размер, и позицию).

> Дизайн — это не то, как предмет выглядит, а то, как он работает. — Стив Джобс. Цитата из интервью The New York Times

!Схема работы Constraints при изменении размера родительского фрейма

Часть 2. Auto Layout: Магия автоматических отступов

Если Constraints управляют позицией объекта, то Auto Layout управляет его содержимым. Это аналог Flexbox в CSS верстке. Это, пожалуй, самая важная функция в Figma для современного дизайнера.

Зачем нужен Auto Layout?

Вспомните, как вы делали кнопку раньше: рисовали прямоугольник, писали текст сверху, группировали. Если текст менялся с «ОК» на «Зарегистрироваться», вам приходилось вручную растягивать прямоугольник.

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

Три режима размеров (Resizing)

Понимание этих трех режимов — ключ к созданию адаптивных интерфейсов.

Fixed width / height (Фиксированный). Размеры заданы жестко (например, 200px). Контент внутри может обрезаться или вылезать, если не помещается.

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

Fill container (Заполнить контейнер). Элемент растягивается на всё доступное свободное пространство внутри родителя. Идеально для адаптивных карточек.

Математика Auto Layout

Чтобы понять, как рассчитывается ширина контейнера в режиме Hug contents, рассмотрим формулу. Это поможет вам точно прогнозировать размеры элементов.

Где: * — итоговая ширина контейнера Auto Layout. * — количество элементов внутри контейнера. * — ширина каждого отдельного элемента (текста, иконки). * — величина отступа между элементами (Spacing / Gap). * — внутренний отступ слева (Padding Left). * — внутренний отступ справа (Padding Right).

Например, у нас есть кнопка с иконкой (24px) и текстом (60px). Отступ между ними 8px, а падинги по краям 16px. Считаем:

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

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

Часть 3. Компоненты и Варианты: Системный подход

Мы научились делать адаптивные кнопки. Но что, если у нас 50 экранов, и на каждом есть кнопка? Если мы захотим поменять цвет с синего на зеленый, нам придется менять его 50 раз.

Здесь на сцену выходят Components (Компоненты).

Родитель и Дети (Main & Instance)

Компонент — это главный элемент (Master Component), который задает стиль. Его копии называются экземплярами (Instances).

* Main Component (обозначается иконкой из 4 ромбиков): Здесь вы вносите изменения. * Instance (обозначается пустым ромбом): Полностью повторяет стиль Главного компонента. Вы можете менять в нем текст или картинку, но если вы измените цвет в Главном, он изменится во всех Экземплярах.

Варианты (Variants)

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

Раньше дизайнеры плодили десятки отдельных компонентов: Button/Blue/Default, Button/Blue/Hover. Теперь мы используем Variants.

Вы объединяете несколько компонентов в один набор (Component Set). Теперь, вставив кнопку в макет, вы можете переключать её состояние через выпадающий список на панели справа, как переключатель.

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

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

Text Property: Позволяет менять текст на кнопке прямо из панели свойств, не «проваливаясь» в слои.

Boolean Property: Позволяет включать/выключать элементы (например, скрыть иконку) одним переключателем.

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

Практика: Собираем сложную карточку товара

Давайте объединим все знания и соберем адаптивную карточку товара для интернет-магазина.

Шаг 1. Атомы

Напишите текст цены. Оберните в Auto Layout (Shift + A).

Создайте кнопку «Купить» (тоже Auto Layout).

Сделайте из кнопки Компонент (Ctrl + Alt + K или Cmd + Option + K).

Шаг 2. Молекулы

Поместите фото товара, название, цену и кнопку (экземпляр) в один фрейм.

Примените Auto Layout ко всей карточке (вертикальный).

Настройте отступы (Padding: 16px, Spacing: 12px).

Шаг 3. Адаптивность

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

В настройках Auto Layout измените ширину с Hug на Fill container.

Сделайте то же самое для кнопки.

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

Заключение

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

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

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

Мы проделали огромную работу. У нас есть продуманная структура, стильный UI-кит и технически совершенные компоненты на Auto Layout. Но пока наш дизайн существует только в идеальном мире широкоформатных мониторов.

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

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

Адаптив или Респонсив?

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

* Responsive Design (Резиновый дизайн): Сайт плавно тянется на любую ширину. Это реализуется в верстке (коде). * Adaptive Design (Адаптивный дизайн): Дизайнер рисует несколько фиксированных состояний (макетов) для конкретных ширин экрана.

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

Брейкпоинты (Контрольные точки)

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

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

Desktop (Десктоп): 1440px (или 1920px). Это то, что мы уже сделали.

Tablet (Планшет): 768px (вертикальный iPad) или 834px.

Mobile (Мобильный): 375px (iPhone SE/Mini) или 390px (современные iPhone).

> Дизайн — это не просто создание красивых картинок. Это создание удобства для пользователя в любых условиях. — Итан Маркотт, автор термина Responsive Web Design.

!Иллюстрация основных брейкпоинтов в веб-дизайне

Трансформация сетки

Помните нашу 12-колоночную сетку? На телефоне 12 колонок будут слишком узкими — в них ничего не поместится. Поэтому при уменьшении экрана количество колонок меняется.

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

| Устройство | Ширина фрейма | Колонки (Cols) | Отступы (Margin) | Межколонник (Gutter) | | :--- | :--- | :--- | :--- | :--- | | Desktop | 1440px | 12 | 80-100px | 20-24px | | Tablet | 768px | 6 или 8 | 32-40px | 16-20px | | Mobile | 375-390px | 4 | 16-20px | 16px |

Математика мобильной колонки

Давайте рассчитаем ширину одной колонки для iPhone 14 (ширина экрана 390px), если мы используем 4 колонки, отступы по краям 16px и межколонник 16px.

Формула расчета ширины колонки ():

Где: * — итоговая ширина одной колонки. * — ширина экрана устройства (390px). * — боковой отступ (Margin = 16px). * — количество колонок (4). * — межколонный интервал (Gutter = 16px).

Подставим значения:

Получается, ширина нашей колонки будет 77.5 пикселей. Figma умеет работать с дробными пикселями, но лучше стараться подбирать значения так, чтобы числа были целыми. Например, увеличив Margin до 20px, мы получим более «чистое» число.

Принципы адаптации контента

Когда мы переносим дизайн с большого экрана на маленький, мы не просто уменьшаем всё в 3 раза. Мы меняем структуру.

1. Линеаризация (Из горизонтали в вертикаль)

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

Здесь нам идеально поможет Auto Layout. Достаточно поменять направление стрелки с горизонтальной (→) на вертикальную (↓).

2. Типографика и масштаб

Заголовок размером 60px на десктопе выглядит величественно. На телефоне он займет весь экран и разобьется на 5 строк. Это нечитабельно.

Вам нужно уменьшать шрифты. Для этого в UI-ките создают дублирующие стили: * H1 Desktop: 60px * H1 Mobile: 32-40px

При этом основной текст (Body) уменьшать сильно нельзя! 16px — это стандарт для чтения. Минимум — 14px. Если сделаете 12px, пользователю придется щуриться.

3. Палец вместо курсора

На десктопе у нас есть точный курсор мыши. На телефоне — толстый палец.

Существует правило Touch Target (Область касания). Интерактивный элемент (кнопка, иконка, ссылка) должен иметь размер не менее 44x44 пикселей (по гайдлайнам Apple) или 48x48 пикселей (по гайдлайнам Android).

Даже если сама иконка маленькая (24x24), невидимая область вокруг нее (фрейм) должна быть большой, чтобы по ней было легко попасть.

!Визуализация минимальной области нажатия для мобильных интерфейсов

Практика: Адаптируем карточку товара

Давайте возьмем карточку товара, которую мы создали в прошлом уроке (с Auto Layout), и адаптируем её под мобильный вид.

Шаг 1. Подготовка фрейма

Нажмите F и выберите пресет iPhone 14 (или любой другой актуальный).

Настройте сетку: 4 колонки, Margin 16, Gutter 16.

Шаг 2. Перенос контента

Скопируйте вашу карточку с десктопного макета.

Вставьте её в мобильный фрейм. Она, скорее всего, вылезет за края.

Шаг 3. Настройка ширины

Выберите карточку.

На панели справа в разделе размеров установите ширину не фиксированную, а Fill container (если карточка внутри Auto Layout фрейма экрана) или просто растяните её руками до краев сетки (оставив отступы).

Шаг 4. Работа с внутренностями

Если ваша карточка на десктопе была горизонтальной (фото слева, текст справа):

Выберите саму карточку.

В настройках Auto Layout нажмите стрелку вниз (Vertical direction).

Теперь фото встанет над текстом.

Шаг 5. Проверка стилей

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

Убедитесь, что кнопка «Купить» растянулась на всю ширину (режим Fill container), так на телефоне удобнее нажимать.

Гамбургер-меню

Самое заметное отличие мобильной версии — навигация. На десктопе ссылки «О нас», «Каталог», «Контакты» стоят в ряд. На телефоне они не поместятся.

Мы прячем их в Гамбургер-меню (иконка из трех полосок ≡).

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

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

Заключение

Адаптивность — это не просто «сделать поуже». Это переосмысление подачи информации. Мы сохраняем суть, но меняем форму.

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

Теперь ваш дизайн готов к просмотру на любом устройстве. Но как передать его разработчикам, чтобы они ничего не перепутали? Об этом мы поговорим в финальной части курса — «Передача макета в разработку».

Финализация проекта: создание интерактивного прототипа, анимация и передача макета разработчикам

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

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

Часть 1. Интерактивное прототипирование

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

Режим Prototype

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

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

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

Trigger (Триггер): Какое действие запускает переход?

On click / On tap* — при клике (самое частое). While hovering* — при наведении курсора. While pressing* — пока кнопка нажата. After delay* — автоматический переход через заданное время (полезно для слайдеров).

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

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

Animation (Анимация): Как именно сменится экран?

Instant* — мгновенная смена (без анимации). Dissolve* — плавное растворение. Smart Animate* — умная анимация (о ней ниже). Move in / Push* — выезжание экрана сбоку (стандарт для мобильных приложений).

!Настройка связи между двумя экранами в режиме прототипирования

Часть 2. Магия Smart Animate и интерактивные компоненты

Если вы хотите создать «вау-эффект», вам понадобится функция Smart Animate. Она не просто меняет один кадр на другой, она ищет слои с одинаковыми названиями и плавно трансформирует их свойства.

Как работает Smart Animate?

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

> Дизайн — это не только то, как это выглядит и чувствуется. Дизайн — это то, как это работает. — Стив Джобс. Интервью Wired, 1996

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

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

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

Создайте Component Set с вариантами кнопки: Default (обычная) и Hover (при наведении).

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

Соедините вариант Default с вариантом Hover прямо внутри фиолетовой рамки компонентов.

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

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

Часть 3. Подготовка макета к передаче (Handoff)

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

Чек-лист чистоты макета

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

* Удалите мусор. Все черновики, варианты «поиграть со шрифтами» и референсы должны быть удалены или перенесены на отдельную страницу Archive. * Назовите слои. Разработчику сложно понять, что такое Frame 45. Назовите его Product Card. Назовите секции: Header, Hero, Footer. Это правило хорошего тона. * Проверьте Constraints. Попробуйте потянуть свои фреймы. Если верстка «разваливается», разработчик сделает так же криво. Исправьте привязки. * Целые пиксели. Убедитесь, что координаты и размеры объектов не имеют дробных значений (например, X: 14.56). Это вызывает размытие («мыло») при верстке.

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

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

| Тип графики | Формат | Почему? | | :--- | :--- | :--- | | Иконки и логотипы | SVG | Векторный формат. Масштабируется без потери качества, мало весит, можно менять цвет через код. | | Фотографии | JPG | Лучшее сжатие для сложных изображений с множеством цветов. Используйте для фото контента. | | Картинки с прозрачностью | PNG | Если нужен прозрачный фон. Весит больше, чем JPG. |

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

!Выбор правильного формата для экспорта графики

Часть 4. Коммуникация с разработкой

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

Что видит разработчик?

Он видит CSS-код (стили), отступы, размеры шрифтов и цвета. Но он не видит вашей логики. Поэтому:

Оставляйте комментарии. Если блок должен быть зафиксирован при скролле — напишите это.

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

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

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

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

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

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