Простые макеты для верстки в Figma: 5 шаблонов для новичков

Учиться вёрстке (вёрстка — сборка сайта по макету: превращение картинки-превью в работающий код) без макетов — как учиться плавать без воды. Нужны готовые файлы Figma (программа, в которой дизайнеры рисуют макеты сайтов), которые можно разобрать на компоненты (переиспользуемые блоки: поменял один — изменились все копии) и понять, как устроен профессиональный макет (макет — картинка-превью сайта, как он будет выглядеть). Собрал 5 типов макетов для начинающих с описанием структуры.

Набор выдаёт мой Telegram-бот за подписку на канал. Нажми ссылку:

Получить макеты: https://t.me/kalinin_vibe_bot?start=mockups

Бот проверит подписку и пришлёт ссылку на Figma Community. Нажми Duplicate — файл скопируется в твой аккаунт Figma, и делай с ним что хочешь.

Лендинг — одностраничный сайт, где всё на одной странице: пролистываешь вниз, читаешь. Используется для одной цели: продать услугу или собрать заявки.

Структура:

• Hero (первый экран, который виден сразу): заголовок, подзаголовок, кнопка CTA (CTA — призыв к действию, кнопка «оставить заявку»)
• Проблема: 3 боли клиента с иконками (боль — проблема, которая мучает клиента)
• Решение: как услуга закрывает боли
• Процесс: 4 шага работы
• Отзывы: 3 карточки с фото
• FAQ: 5 вопросов-ответов (FAQ — блок «часто задаваемые вопросы», снимает сомнения)
• Футер: контакты, соцсети (футер — подвал сайта, нижняя часть)

Что изучать: сетка 12 колонок (страница условно разделена на 12 вертикальных полос, элементы ставятся по ним), визуальная иерархия (система «что главное, что второстепенное»), отступы между блоками (80–120 пикселей), кнопки с hover-состояниями (hover — вид кнопки при наведении курсора).

Портфолио — сайт-визитка с твоими работами: его показываешь клиентам и работодателям.

Структура:

• Hero: имя, специализация, фото
• О себе: текст + навыки с прогресс-барами (полоски-шкалы: «Photoshop — 80%»)
• Работы: сетка 3×3 (три колонки, три ряда) с превью проектов (превью — маленькая картинка-предпросмотр)
• Кейс: подробный разбор одного проекта (задача, процесс, результат)
• Контакты: форма связи, соцсети

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

Структура:

• Hero: название блога, поиск
• Сетка статей: карточки с обложкой, заголовком, датой
• Страница статьи: заголовок, автор, дата, текст с изображениями, блок «читайте также»
• Сайдбар: категории, популярные статьи, подписка (сайдбар — боковая колонка сбоку от основного текста)

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

Структура:

• Главная: баннер, категории, популярные товары, акции
• Каталог: фильтры слева (отбор товаров по цене, размеру), сетка товаров справа
• Карточка товара: галерея фото, описание, цена, кнопка «в корзину»
• Корзина: список товаров, итого, оформление заказа

Что изучать: карточки товаров, фильтры, модальные окна (окно поверх страницы: «товар добавлен в корзину»), состояния кнопок (disabled — неактивная, loading — «загружаю, подожди»).

Структура:

• Онбординг: 3 экрана с иллюстрациями (онбординг — приветственные экраны при первом запуске приложения)
• Регистрация/вход: формы с валидацией (валидация — проверка: email похож на email, пароль не короче 8 символов)
• Главный экран: лента контента, нижняя навигация (панель с кнопками внизу экрана)
• Профиль: аватар, статистика, настройки

Что изучать: мобильная сетка (360–414 пикселей — ширина экрана телефона), touch-friendly элементы (удобные для пальца: минимум 44 пикселя), навигация.

Не копировать слепо, а разбирать:

1. Открыть макет, посмотреть структуру слоёв и компонентов (слои — «плёнки» с элементами, из которых собран макет).
2. Измерить отступы между блоками и элементами.
3. Выписать размеры шрифтов и межстрочные расстояния.
4. Посмотреть цветовую палитру (набор цветов проекта: обычно 2–3 цвета + нейтральные — серые, белые, чёрные).
5. Повторить один блок с нуля, не глядя в оригинал.

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

• Dribbble: скриншоты реальных работ, но без исходников (исходник — рабочий файл Figma, который можно открыть и разобрать). Вдохновение для идей.
• Behance: полные кейсы с описанием процесса. Некоторые авторы выкладывают Figma-файлы.
• UI8: платные макеты высокого качества, от 20 долларов. Для тех, кто хочет профессиональный уровень.

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

Если хочется пройти весь путь — от пустого файла Figma до готового макета с сетками, типографикой и компонентами — полный курс веб-дизайна за 390 ₽ построен именно на практике.