Как сделать рекламный баннер в Figma

Рекламный баннер — один из самых распространённых форматов в digital-рекламе. В этой статье разберём создание баннера в Figma от постановки задачи до экспорта. Подходит для SMM-специалистов, маркетологов и всех, кто хочет делать рекламные материалы самостоятельно.

Что должен делать рекламный баннер

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

1. Привлечь взгляд — выделиться в ленте или на странице среди другого контента.
2. Удержать внимание за 1-2 секунды — донести главное сообщение до того, как пользователь проскроллит дальше.
3. Побудить к действию — дать понять, что нужно сделать дальше: перейти, купить, записаться.

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

Почему Figma хорошо подходит для рекламных баннеров

Figma удобна для создания баннеров по нескольким причинам:

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

Выбор формата перед началом работы

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

Постановка задачи — до того, как открывать Figma

Самая частая ошибка — начать делать баннер без чёткого понимания задачи. Определите три вещи:

• Оффер: что именно предлагается, одним предложением.
• Аудитория: кто увидит баннер.
• Одно действие: что должен сделать зритель (купить, перейти, записаться).

Шаг 1. Создайте фрейм нужного размера

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

Установите визуальные направляющие: отступы от краёв минимум 40-60 пикселей для ключевых элементов. Это «безопасная зона» — критически важный текст и CTA не должны попадать за её пределы.

Шаг 2. Определите визуальную иерархию

Перед тем как добавлять элементы, решите, что будет главным. Три уровня иерархии:

1. Главное — заголовок или визуальный акцент (самое крупное, самое яркое).
2. Поддерживающее — поясняющая строка, уточнение оффера.
3. Вспомогательное — CTA-кнопка, логотип, детали.

Правило одного взгляда: зритель должен сразу видеть главное. Простой способ проверить — squint test: прищурьтесь на баннер. Что видите первым? Это и должно быть вашим главным сообщением.

Шаг 3. Подберите визуал

Визуал — фото продукта, человека или фирменный фон — создаёт первое впечатление. Варианты:

• Фото продукта — работает для товарной рекламы.
• Человек / персонаж — привлекает взгляд, помогает идентифицироваться аудитории.
• Абстрактный или фирменный фон — подходит для услуг, событий, информационных офферов.

Нейросети (Midjourney, Adobe Firefly, Leonardo AI) дают уникальный визуал без зависимости от стоков. Важно: визуал не должен конкурировать с текстом. Если фон сложный — добавьте затемнение или размытие под текстовым блоком.

Шаг 4. Работа с цветом

Цвет работает через контраст и акцент. Простое правило: три цвета на баннере.

• Основной цвет — фон или доминирующий цвет баннера.
• Нейтральный — белый, чёрный или серый, чаще всего для текста.
• Акцентный — один яркий цвет для CTA или ключевого элемента.

Контраст: текст должен иметь коэффициент контрастности не меньше 4.5:1 с фоном (стандарт WCAG AA). Если не уверены — тёмный фон плюс белый текст плюс один цветной акцент работает почти всегда.

Шаг 5. Типографика и текст

Правила работы со шрифтами в рекламных баннерах:

• Максимум 2 шрифта: один для заголовков, один для основного текста.
• Иерархию создавайте через размер и вес, а не через количество разных шрифтов.
• Заголовок: крупно, жирно, считывается мгновенно.
• Поясняющая строка: меньше по размеру, не перебивает заголовок.
• CTA: контрастный, короткий — глагол плюс объект («Получить скидку», «Записаться бесплатно»).
• Отступы от края: минимум 40-60 пикселей — безопасная зона обязательна.

Шаг 6. Финальная проверка перед экспортом

• Текст считывается за 1-2 секунды
• Нет элементов у самого края (безопасная зона соблюдена)
• Контраст текст/фон достаточный
• Один главный акцент на баннере
• Баннер проверен в уменьшенном виде (400-500px в Figma)

Экспорт из Figma

Выберите фрейм → найдите блок Export в правой панели → настройте параметры:

• JPG (85–90%) — для баннеров с фото-фоном, весит меньше.
• PNG — для баннеров с прозрачностью или чёткой графикой без фото.
• 1x — для digital-рекламы в большинстве случаев достаточно.

Называйте файл осмысленно: banner-stories-skidka-avgust.jpg, а не просто Frame 1.jpg. Это важно при работе в команде и при загрузке в рекламные кабинеты.

Как ускорить работу с готовыми исходниками

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

Designer Pack — это 150+ готовых рекламных креативов и 1000+ редактируемых элементов (кнопки, плашки, бейджи, шрифтовые пары, цветовые палитры) в одном Figma-файле. Берёте подходящий исходник, меняете текст, визуал и акцентный цвет — структура уже готова.

Подробнее о готовых шаблонах баннеров — в отдельной статье →