Фигма для начинающих: как сделать макет сайта или баннера за вечер

Что такое Фигма и зачем она владельцу бизнеса

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

Владельцу бизнеса Фигма полезна в трёх случаях:

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

Как начать работать в Фигме: регистрация и тарифы

1. Зайдите на figma.com и зарегистрируйтесь по почте или аккаунту Google.
2. Установите приложение для компьютера или работайте в браузере. Для начала разницы почти нет.
3. Создайте новый файл дизайна: кнопка нового файла на главном экране.
4. Переименуйте файл сразу: «Сайт клининга — первый экран». Через месяц файлов станет двадцать.

Тарифы. По странице тарифов Figma бесплатный тариф Starter даёт неограниченные личные черновики и ограниченный набор командных файлов. Платный Professional стоит от 16 долларов в месяц за полное место редактора. Для одного макета своего сайта бесплатного тарифа достаточно.

Работа из России. Figma не продаёт платные тарифы клиентам из России, оплатить их российской картой нельзя. Бесплатный тариф продолжает работать, но в 2026 году пользователи жаловались на перебои с доступом. Если для вас это критично, держите в голове альтернативы с похожим интерфейсом: Pixso (умеет открывать файлы Фигмы в формате .fig) и Penpot (открытый редактор, можно запустить на своём сервере). Принципы из этого урока работают и в них.

Интерфейс Фигмы: что где находится

Экран делится на четыре зоны:

• Холст в центре — бесконечное поле, на котором лежат ваши фреймы.
• Панель инструментов — фрейм, фигуры, перо, текст, комментарии.
• Слева — слои и страницы. Всё, что вы нарисовали, видно списком. Страницы внутри файла удобно делить так: «Черновики», «Макет», «Баннеры».
• Справа — свойства выделенного объекта: размеры, положение, цвет, шрифт, отступы, эффекты, экспорт.

Сверху справа — переключатель режима прототипа и кнопка «Поделиться».

Горячие клавиши, которые экономят половину времени

Фреймы и размеры: с чего начинается любой макет

Фрейм — это «лист» с фиксированным размером: экран компьютера, экран телефона, баннер. Нажмите F, и справа появится список готовых размеров.

Для сайта начните с двух фреймов:

• Компьютер: 1440 px шириной. Высоту первого экрана берите около 800 px, но сам фрейм страницы может быть длинным.
• Телефон: 360–390 px шириной. Большая часть посетителей малого бизнеса приходит с телефона, поэтому мобильную версию рисуйте сразу, а не «потом».

Для баннера задайте фрейм точно под площадку. Таблица основных размеров для сайта есть в нашей шпаргалке по размерам изображений, требования к рекламным картинкам — в статье изображения для РСЯ.

Сетка и отступы: как сделать аккуратно без дизайнерского образования

Сетка — направляющие колонки, к которым прилипают объекты. Выделите фрейм, справа найдите раздел сетки (в новых версиях он называется Layout guide) и добавьте колонки.

Рабочие настройки для начала:

Правило восьми: все отступы и размеры делайте кратными 8 (8, 16, 24, 32, 48, 64). Не надо думать, 17 или 19 пикселей — выбор сужается, а макет выглядит собранным. Подробнее, зачем сетка нужна и как ей пользуются разработчики, — в статье модульная сетка сайта.

Текст и цвета: стили вместо ручной настройки

Новичок обычно настраивает каждый заголовок вручную, а потом не может понять, почему на одном экране 32 px, а на другом 34. Стили решают это.

Текстовые стили. Настройте заголовок (шрифт, размер, межстрочное расстояние), выделите его и сохраните как стиль: «H1», «H2», «Текст», «Кнопка». Для сайта малого бизнеса обычно хватает пяти-шести стилей.

Примерная шкала для начала:

• H1 на компьютере — 48–56 px, на телефоне — 28–32 px;
• H2 — 32–40 px и 24 px;
• основной текст — 16–18 px, межстрочное расстояние около 1,5.

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

Цветовые стили. Сохраните 4–6 цветов: фон, основной текст, второстепенный текст, акцент для кнопок, светлый фон для карточек. Если фирменных цветов нет, подсказки по подбору — в материале цветовая гамма для лендинга.

Автолейаут и компоненты: чтобы макет не разваливался

Автолейаут — режим, в котором Фигма сама держит отступы между элементами. Сделайте кнопку: текст «Записаться», выделите, Shift + A, задайте внутренние отступы 16 по вертикали и 32 по горизонтали, добавьте заливку и скругление. Теперь при смене текста на «Рассчитать стоимость» кнопка растянется сама.

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

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

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

Урок: макет первого экрана за вечер

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

1. Создайте фрейм 1440 × 800 и назовите его «Первый экран — компьютер».
2. Включите сетку 12 колонок, промежуток 24, поля 120.
3. Нарисуйте шапку: логотип слева, справа телефон и кнопка мессенджера. Выделите всё и сделайте автолейаут с распределением по краям.
4. Напишите заголовок-оффер на 6–8 колонок: «Генеральная уборка квартиры в Казани за 1 день — от 4 900 ₽». Примените стиль H1.
5. Добавьте подзаголовок с 2–3 доводами: «Свои средства и инвентарь, фиксированная цена после фото, оплата после приёмки».
6. Поставьте кнопку из компонента: «Рассчитать стоимость».
7. Справа — фото вашей бригады за работой или результата уборки. Перетащите картинку в прямоугольник, и Фигма сделает её заливкой с обрезкой по размеру.
8. Под кнопкой — строка доверия: рейтинг на Картах, число выполненных заказов, гарантия.
9. Продублируйте фрейм и перестройте под телефон 390 px: всё в одну колонку, сначала фото, под ним заголовок, затем кнопка.
10. Посмотрите с расстояния: уменьшите масштаб до 50% и проверьте, читается ли главное за три секунды.

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

Ещё один урок: рекламный баннер за 20 минут

1. Создайте фрейм нужного размера под площадку.
2. Положите фото на весь фрейм и затемните его полупрозрачным прямоугольником, чтобы текст читался.
3. Напишите 3–6 слов крупно: выгода или цена.
4. Добавьте кнопку или плашку с действием, если площадка это разрешает.
5. Оставьте поля от краёв: на части площадок края картинки обрезаются.
6. Экспортируйте: выделите фрейм, справа в разделе экспорта выберите формат и масштаб.

Форматы экспорта: PNG — для графики с текстом и прозрачностью, JPG — для фото, SVG — для иконок и логотипов, PDF — для печати и презентаций. Масштаб 2x делает картинку чёткой на экранах с высокой плотностью пикселей.

Если рисовать самому нет времени или хочется сравнить свой набросок с профессиональной версией, можно пойти другим путём.

Как передать макет подрядчику и перенести в Тильду

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

• файл должен быть в вашем аккаунте, а не у дизайнера: иначе после разрыва работы вы потеряете доступ к макету;
• разработчику достаточно доступа на просмотр: размеры, цвета и шрифты он увидит, кликнув по элементу;
• правки оставляйте комментариями прямо на макете (клавиша C), а не списком в мессенджере.

Как сформулировать задачу дизайнеру и принять работу, разобрано в статьях ТЗ для дизайнера и заказать дизайн сайта.

Перенос в Тильду. В Тильде есть импорт макета из Фигмы в Zero Block: через плагин Figma to Tilda или по ссылке на фрейм с персональным токеном. По справке Тильды один фрейм переносится в один Zero Block, поэтому макет заранее режут на блоки. После импорта адаптив под телефон и планшет всё равно придётся проверить и поправить вручную. Когда Zero Block оправдан, а когда проще собрать страницу из стандартных блоков, — в статье Zero Block в Тильде.

Частые ошибки новичков в Фигме

Чек-лист перед тем, как отправить макет

1. Все элементы лежат внутри фреймов с понятными названиями.
2. Есть версии для компьютера и телефона.
3. Заголовки и тексты оформлены стилями.
4. Кнопки и карточки — компоненты.
5. Тексты настоящие, без «рыбы»: цены, сроки, адрес.
6. Фото и иконки в нормальном качестве и с правом на использование.
7. Файл принадлежит вашему аккаунту, у подрядчика доступ по приглашению.

Мы рисуем первые экраны и макеты сайтов под рекламу и поиск, переносим их в Тильду или делаем на коде. Если хотите обсудить свой набросок, оставьте контакты.