Figma — инструмент, с которого часто начинают путь в веб-дизайне. Он работает прямо в браузере, не требует установки и позволяет собрать первый макет сайта за считанные часы. Для новичка это особенно ценно: не нужно разбираться в сложных графических редакторах, достаточно понять базовые принципы — фреймы, текст, слои и выравнивание. А когда макет готов, его можно сразу передать верстальщику или использовать как основу для собственного учебного проекта.
Что такое макет сайта и зачем он нужен
Макет сайта — это не просто красивая картинка, а визуальный план будущей страницы. Он показывает, где будут располагаться шапка, меню, заголовки, кнопки, изображения и текстовые блоки. По сути, это чертёж, по которому верстальщик собирает HTML-разметку и CSS-стили. Без макета разработка превращается в угадывание: заказчик говорит «хочу как у конкурентов», а в итоге получает не то, что ожидал. Макет снимает эту неопределённость.
Для новичка макет решает сразу несколько задач:
- помогает не «рисовать вслепую», а собирать страницу по структуре;
- упрощает обсуждение проекта с заказчиком или командой;
- позволяет заметить ошибки в логике страницы до начала вёрстки;
- ускоряет передачу идеи разработчику.
В Figma часто начинают не с детального дизайна, а с каркаса — так называемого wireframe. Это особенно полезно, когда вы делаете свой первый сайт или осваиваете веб-дизайн с нуля: сначала строите скелет, а потом наращиваете визуал.
С чего начать работу в Figma
Перед тем как открывать редактор, полезно понять, из каких частей состоит рабочая среда. Интерфейс Figma интуитивно понятен, но поначалу может сбивать с толку обилием кнопок. Я обычно советую ученикам не пытаться освоить всё сразу, а сосредоточиться на нескольких ключевых зонах: холст в центре, панель слоёв слева, свойства выбранного объекта справа и панель инструментов сверху. Этого достаточно для старта.
Основные элементы интерфейса
| Элемент | Зачем нужен |
|---|---|
| Холст | Бесконечное пространство, где вы собираете макет, как на столе. |
| Слои | Иерархия элементов, похожая на структуру DOM в HTML: каждый объект лежит в определённом порядке. |
| Панель свойств | Здесь меняются размеры, цвета, шрифты, скругления; аналог CSS-свойств, только визуально. |
| Инструменты | Кнопки для создания фреймов, фигур, текста; ваши основные рабочие инструменты. |
На старте не нужно лезть в плагины или компоненты. Для первого макета достаточно научиться создавать фрейм, добавлять текст, рисовать простые фигуры и выравнивать элементы. Остальное придёт с практикой.
Что нужно подготовить до старта
Хороший макет начинается не с кнопок и градиентов, а с понимания задачи. Даже если вы делаете учебный проект, полезно заранее определить, что именно вы проектируете. Иначе есть риск получить набор случайных блоков, которые не складываются в осмысленную страницу. Я часто вижу, как новички сразу хватаются за Figma, не продумав структуру, и потом переделывают всё по несколько раз.
Мини-чек-лист перед работой
- Определите тип сайта: лендинг, визитка, блог, страница услуги. От этого зависит структура.
- Подумайте, для кого делаете страницу — целевая аудитория влияет на подачу.
- Составьте список блоков: шапка, главный экран, преимущества, услуги, контакты.
- Подберите тексты-заглушки, если своих текстов пока нет — рыба (lorem ipsum) подойдёт, но лучше сразу использовать осмысленный контент.
- Найдите 1–2 референса, чтобы не фантазировать с нуля — это ускоряет работу и помогает избежать типовых ошибок.
Если опыта нет, начните с простой структуры: шапка, главный экран, блок преимуществ, блок с услугами или контентом, контакты. Для первого макета этого более чем достаточно. Позже вы сможете усложнять.
Пошагово: как сделать первый макет сайта в Figma
Теперь перейдём к практике. Я разберу процесс по шагам так, как сам делаю это с учениками. Никакой магии — просто последовательные действия.
Шаг 1. Создайте новый файл
Откройте Figma, создайте новый проект и сразу дайте ему понятное имя, например «Лендинг услуги — первый макет». Это банальный совет, но когда у вас накопится десяток файлов, вы скажете себе спасибо. Я до сих пор иногда забываю переименовать «Untitled» и потом трачу время на поиски.
Шаг 2. Добавьте фрейм под экран
Фрейм — это основа будущего экрана, контейнер, внутри которого вы будете собирать макет. По сути, это как div в вёрстке, только визуальный. Для первого сайта удобно выбрать десктопный размер — например, 1440 пикселей в ширину. Это стандартная ширина для большинства современных мониторов, и на ней комфортно работать с композицией. Если вы планируете адаптивный дизайн, можно сразу создать два фрейма: десктопную и мобильную версию (обычно 375px). Так вы сразу увидите, как элементы будут перестраиваться на разных экранах. В реальных проектах я часто начинаю с десктопа, а потом адаптирую под мобильные, но для обучения полезно держать обе версии перед глазами.
Шаг 3. Настройте сетку
Сетка — это ваш главный помощник в борьбе с визуальным хаосом. Она задаёт ритм и помогает выравнивать элементы так, чтобы страница выглядела аккуратно. В Figma сетка настраивается внутри фрейма: можно выбрать колонную, строковую или модульную. Для простого макета я рекомендую колонную сетку с 12 колонками и отступами по бокам (например, 80px). Это классика, которая потом легко переносится в CSS-фреймворки типа Bootstrap. Новичку сетка особенно полезна: она дисциплинирует и убирает соблазн расставлять блоки «на глаз». Задайте одинаковые внешние отступы и единый шаг между блоками — и макет сразу станет профессиональнее.
Шаг 4. Соберите шапку сайта
Шапка — это верхняя часть страницы, которая обычно содержит логотип, навигацию и кнопку действия. В Figma её удобно делать внутри фрейма, ограничив высоту примерно 80–100 пикселей. Что можно добавить: логотип или название проекта (позже он станет ссылкой на главную, но в макете это просто текст или графика); пункты меню (3–5 ссылок); кнопку «Оставить заявку» или «Связаться». Главная ошибка новичков — перегружать шапку: пытаться впихнуть туда поиск, соцсети, корзину и ещё что-то. На первом макете лучше сделать её простой и понятной. Помните: в реальном проекте шапка часто повторяется на всех страницах, поэтому её структура должна быть логичной и легко воспроизводимой в коде.
Шаг 5. Сделайте главный экран
Главный экран (hero section) — это первое, что видит пользователь, и от него зависит, останется ли он на сайте. Здесь должны быть понятный заголовок, короткое описание и призыв к действию. Структура может быть такой: крупный заголовок (в HTML это будет h1, и он должен чётко отражать суть); подзаголовок с пояснением; кнопка (например, «Записаться» или «Узнать больше»); изображение или иллюстрация, которая поддерживает смысл. Если вы делаете макет для бизнеса, главный экран должен отвечать на три вопроса: что это за сайт, кому он полезен и что нужно сделать дальше. Я часто вижу, как новички ставят красивую картинку, но забывают про текст — в итоге пользователь не понимает, куда попал. Не повторяйте эту ошибку: заголовок и кнопка — это скелет, всё остальное — мясо.
Шаг 6. Добавьте следующие блоки
После первого экрана переходите к остальной структуре. Для учебного макета обычно хватает 3–5 блоков. Подходящие варианты: преимущества (иконки с текстом), услуги или продукты, этапы работы, портфолио, отзывы, контакты. Не старайтесь запихнуть всё сразу — новичку важнее научиться собирать логичную страницу, чем заполнять её всеми возможными секциями. Я советую выбрать 2–3 блока, которые лучше всего раскрывают тему. Например, для лендинга услуги: «Почему мы» (преимущества), «Как мы работаем» (этапы) и «Свяжитесь с нами» (контакты). Каждый блок делайте внутри отдельного фрейма или группы — так потом будет проще переносить и редактировать.
Шаг 7. Проверьте визуальный ритм
Когда основные блоки готовы, отойдите от экрана и посмотрите на макет целиком. Это как отладка вёрстки: вы ищете несоответствия отступов, слипающиеся элементы и нарушения иерархии. Проверьте: одинаковые ли отступы между блоками (я обычно использую шаг 80–120px между секциями); не слишком ли много пустоты или, наоборот, тесноты; не сливаются ли элементы из-за слабого контраста; хватает ли воздуха вокруг текста; видна ли иерархия: что главное, а что второстепенное. Именно на этом этапе многие новички замечают, что макет выглядит «сырым». Это нормально. Хороший дизайн почти всегда требует нескольких проходов — как и хороший код.
Какие инструменты Figma нужны новичку
Для первого макета не нужен весь функционал программы. Достаточно освоить базовый набор, который я привожу ниже. Эти инструменты — как основные HTML-теги и CSS-свойства: зная их, вы уже можете собрать страницу.
| Инструмент | Для чего используется |
|---|---|
| Frame | Основа экрана или блока, аналог div |
| Text | Заголовки, подписи, кнопки, описания |
| Shape | Прямоугольники, круги для кнопок, карточек, фонов |
| Image | Вставка изображений и фото |
| Align | Выравнивание объектов по центру, краям, распределение |
| Layers | Панель слоёв для контроля структуры, похожа на DOM-дерево |
| Properties | Настройка размеров, цвета, шрифтов и отступов, визуальный CSS |
Если вы освоите эту базу, уже сможете собрать простой, но аккуратный макет сайта без лишней сложности. Позже можно будет углубиться в компоненты, варианты и автолейауты, но на старте они только отвлекают.
Частые ошибки новичков
За годы преподавания я выделил несколько типичных граблей, на которые наступают почти все. Разберу их, чтобы вы могли их избежать.
1. Слишком много элементов на одном экране
Новичок часто пытается показать всё и сразу: и услуги, и портфолио, и отзывы, и форму обратной связи — всё на первом экране. В итоге страница становится тяжёлой и непонятной. В вёрстке это потом выливается в множество лишних div’ов и сложную CSS-кашу. Лучше убрать лишнее и оставить только то, что работает на смысл. Помните: пользователь не читает, он сканирует. Если на странице шум, он уйдёт.
2. Разные отступы без системы
Если один блок отстоит на 32 пикселя, другой на 47, а третий на 18, макет выглядит неряшливо. В коде это приводит к десяткам уникальных margin и padding, которые потом сложно поддерживать. Помогает единый шаг: например, 8, 16, 24, 32, 48, 64, 96 пикселей. Я обычно использую кратность 8 — это стандарт в веб-дизайне. Задайте себе правило: все вертикальные отступы между секциями должны быть, скажем, 80px, а внутренние — 24px. Сразу станет опрятнее.
3. Слабая иерархия текста
Пользователь должен сразу понимать, что на странице главное. Для этого заголовок должен быть заметнее подзаголовка, а подзаголовок — заметнее обычного текста. В Figma это достигается размерами шрифта, насыщенностью и цветом. В HTML та же логика: h1 — самый важный, h2 — менее, и так далее. Если все надписи одного размера, мозг пользователя не может зацепиться за структуру, и он теряет интерес. Проверьте: можете ли вы, прищурившись, понять, где заголовок, а где пояснение? Если нет — иерархия нарушена.
4. Случайные шрифты и цвета
Для первого проекта достаточно одного шрифта и одной основной цветовой схемы. Чем меньше хаоса, тем профессиональнее выглядит результат. Я часто вижу макеты, где заголовки одним шрифтом, текст другим, кнопки третьим, а цвета взяты с потолка. Потом верстальщик мучается, подключая кучу шрифтов и прописывая уникальные стили для каждого элемента. Выберите один шрифт (например, Roboto или Inter) и используйте его с разными начертаниями и размерами. Цветовую гамму ограничьте 2–3 основными цветами и парой оттенков серого.
5. Игнорирование мобильной версии
Даже если вы делаете макет для десктопа, полезно сразу подумать, как он будет выглядеть на телефоне. В России большинство пользователей просматривают сайты с мобильных устройств, поэтому этот шаг нельзя пропускать. Я обычно советую ученикам после создания десктопной версии тут же сделать мобильную: скопировать фрейм, сузить до 375px и перестроить блоки. Это сразу выявляет проблемы: слишком мелкий текст, неудобные кнопки, нечитаемые изображения. В реальной работе адаптивность — это не опция, а требование.
Как понять, что макет получился
Хороший первый макет не обязательно должен быть «вау-дизайном». Он должен быть понятным и собранным. Я обычно проверяю работы учеников по простому списку:
- с первого взгляда понятно, о чём сайт;
- все блоки расположены логично;
- заголовки и кнопки заметны;
- отступы выглядят ровно;
- нет лишнего визуального шума;
- структура легко читается.
Если на все пункты можно ответить «да», значит, первый макет уже можно показывать и использовать как основу для дальнейшей работы. Кстати, попробуйте мысленно сверстать этот макет: если вы можете представить, какой HTML-тег нужен для каждого элемента, — вы на верном пути.
Как передать макет разработчику
Если вы делаете дизайн не только для себя, важно, чтобы макет можно было передать на вёрстку без лишних вопросов. В реальной практике я часто получал макеты, где слои названы «Rectangle 123» или «Group 47», а часть элементов скрыта где-то в глубине. Это превращает вёрстку в квест. Перед передачей убедитесь, что:
- элементы названы понятно (например, «header», «hero-title», «button-primary»);
- все тексты читаемы и не обрезаны;
- изображения не потеряны (лучше сразу вставить растровые картинки или указать плейсхолдеры);
- размеры блоков и кнопок выглядят логично (не 1px разницы);
- в проекте нет случайных объектов за пределами фреймов.
Чем аккуратнее устроен файл, тем проще разработчику собрать страницу в коде. В идеале макет должен быть настолько понятным, чтобы верстальщик мог сразу писать разметку, не задавая вопросов. Продвинутый уровень — использовать компоненты и стили, но для первого макета это не обязательно.
Практический совет: с чего учиться быстрее всего
Лучший способ освоить Figma — не читать бесконечно про все возможности, а сразу собрать один простой макет. Возьмите реальный пример: страницу услуги, портфолио или лендинг для небольшого бизнеса. Рабочая схема обучения, которую я даю ученикам, выглядит так:
- выбрать простой сайт;
- набросать структуру на бумаге или в заметках;
- создать фрейм;
- собрать шапку и главный экран;
- добавить 2–3 блока;
- проверить отступы и читаемость;
- повторить макет ещё раз, но аккуратнее.
Такой подход помогает быстрее понять логику интерфейса и не застревать в теории. А после того как макет готов, я советую попробовать сверстать его на HTML и CSS. Вы сразу увидите, как дизайн-решения влияют на код, и это бесценный опыт.
Полезный мини-чек-лист для первого макета
- Фрейм задан под десктоп (или мобильный).
- Сетка помогает держать ровные отступы.
- Шапка с логотипом и меню готова.
- Главный экран сразу даёт понять, о чём сайт.
- Добавлены 2–4 логичных блока.
- Текст легко читается, иерархия соблюдена.
- Макет не перегружен лишними элементами.
FAQ
Здесь я собрал вопросы, которые чаще всего задают новички после первых занятий.
Нужно ли уметь рисовать, чтобы работать в Figma?
Нет. Для первого макета важнее чувство структуры, чем умение рисовать. Большая часть работы строится на композиции, тексте, отступах и логике страницы. Figma — это инструмент проектирования, а не художественная иллюстрация. Даже если вы не умеете рисовать, вы сможете собрать аккуратный макет, используя готовые иконки и изображения.
Можно ли сделать сайт только в Figma?
Можно создать макет, прототип и визуальную концепцию. Но сам сайт обычно делают уже в коде или на CMS. Figma нужна для проектирования, а не для полноценной публикации обычного сайта. Да, существуют плагины, которые экспортируют вёрстку, но они генерируют избыточный и неоптимизированный код. Для реального проекта лучше передать макет разработчику или сверстать самостоятельно.
С чего лучше начать новичку: с мобильной или десктопной версии?
Если цель — понять базовую структуру, проще начать с десктопа. На большом экране легче управляться с композицией и видеть все элементы. Если сразу нужен реальный проект под современный трафик, стоит делать обе версии. Я обычно советую начать с десктопа, а потом адаптировать под мобильные — так вы лучше прочувствуете разницу.
Сколько времени занимает первый макет?
У новичка — от нескольких часов до пары дней, в зависимости от сложности страницы. Важно не скорость, а то, насколько понятно вы выстроили структуру. Первый макет почти всегда будет медленным, потому что вы осваиваете инструменты. Не переживайте: с каждым следующим проектом время будет сокращаться.
Что важнее всего в первом макете?
Не красота, а логика. Если пользователь понимает, куда смотреть и что делать дальше, макет уже выполняет свою задачу. Красота придёт с опытом, а вот кривую логику потом сложно исправить. Поэтому сосредоточьтесь на структуре и иерархии.
Вывод
Figma для начинающих — это не про сложный дизайн, а про понятную сборку первой структуры сайта. Если освоить фреймы, текст, фигуры, слои и базовое выравнивание, уже можно собрать аккуратный макет, который станет основой для полноценного проекта. Начинайте с простого, не перегружайте страницу и обязательно проверяйте логику блоков — так первый опыт в Figma будет намного полезнее и спокойнее. А когда макет будет готов, попробуйте перенести его в код — вы увидите, как оживает дизайн, и это вдохновляет продолжать.