Материал проверен и обновлён: .
Макеты Figma — это готовые шаблоны сайтов, лендингов, мобильных приложений, интернет-магазинов, административных панелей, UI kits и дизайн-систем. Их можно открыть в Figma, скопировать в свой аккаунт и использовать для обучения, практики вёрстки, прототипирования или поиска идей.
В этой подборке собраны бесплатные макеты Figma для разных задач: от простого лендинга и мобильного приложения до официальных UI kits Apple и Material Design. Для каждого варианта указано, кому он подходит и что полезно изучить внутри файла.
Откройте готовый файл, нажмите Duplicate и сохраните копию в своём аккаунте.
Лучшие бесплатные макеты Figma
| Макет | Лучше всего подходит | Сложность |
|---|---|---|
| SaaS-лендинг | Веб-дизайн и адаптивная вёрстка | Средняя |
| Блог | HTML, CSS, WordPress и контентные сайты | Начальная |
| Лендинг товара | Коммерческий дизайн и CTA-блоки | Начальная |
| Сайт студии интерьера | Портфолио и визуальный веб-дизайн | Начальная |
| Сайт онлайн-школы | Лендинги образовательных продуктов | Средняя |
| Мобильный интернет-магазин | UX/UI мобильных приложений | Средняя |
| Тёмное мобильное приложение | Dark mode и компоненты | Средняя |
| Material Design UI kit | Android-интерфейсы | Средняя |
| Apple UI kit | iPhone, iPad и macOS | Средняя |
| Dashboard | B2B, SaaS и сложные интерфейсы | Продвинутая |
| Набор иконок | Прототипы и дизайн-системы | Начальная |
Макеты сайтов и лендингов для Figma
1. SaaS-лендинг в светлой и тёмной теме
Готовый макет лендинга для сервиса или технологического продукта. Внутри можно изучить первый экран, преимущества, тарифы, отзывы, FAQ и адаптивные версии.
- Подойдёт: веб-дизайнерам и frontend-разработчикам;
- Что изучить: Auto Layout, сетки, карточки тарифов и адаптив;
- Практика: сверстать главную страницу на HTML и CSS.
2. Макет блога или информационного сайта
Макет контентного сайта с главной страницей, публикациями, категориями, автором и контактами. Хороший вариант для практики WordPress-вёрстки.
- Подойдёт: новичкам и верстальщикам;
- Что изучить: типографику, карточки статей и контентную сетку;
- Практика: сделать адаптивный шаблон блога.
3. Макет лендинга товара
Посадочная страница для товара в нише красоты и здоровья. Есть изображения продукта, преимущества, описание, социальные доказательства и кнопки действия.
- Подойдёт: для тренировки коммерческих лендингов;
- Что изучить: композицию, визуальную иерархию и CTA;
- Практика: заменить продукт и полностью изменить стиль.
4. Макет сайта дизайнера интерьера
Минималистичный сайт для студии или частного дизайнера интерьера. Подходит для тренировки работы с крупными изображениями, спокойной типографикой и портфолио проектов.
- Подойдёт: новичкам и будущим веб-дизайнерам;
- Что изучить: визуальный ритм, галерею и подачу кейсов;
- Практика: адаптировать под фотографа или архитектурную студию.
5. Макет сайта онлайн-школы
Шаблон образовательного лендинга с программой курса, преподавателями, тарифами, результатами обучения и призывами к регистрации.
- Подойдёт: для коммерческого веб-дизайна;
- Что изучить: длинную структуру лендинга и повторяющиеся компоненты;
- Практика: переделать под собственный онлайн-курс.
Макеты мобильных приложений Figma
6. Мобильное приложение интернет-магазина
Макет приложения магазина одежды с каталогом, карточками товаров, корзиной и навигацией. Подходит для первого полноценного мобильного проекта.
- Подойдёт: начинающим UX/UI-дизайнерам;
- Что изучить: пользовательский сценарий от каталога до заказа;
- Практика: добавить поиск, фильтры, избранное и оформление заказа.
7. Мобильное приложение в тёмной теме
Макет тёмного интерфейса с карточками, кнопками, формами и модальными окнами. Помогает понять, как строить контраст и иерархию без светлого фона.
- Подойдёт: для изучения dark mode;
- Что изучить: контраст, состояния компонентов и цветовые токены;
- Практика: сделать дополнительную светлую тему.
UI kits и дизайн-системы для Figma
8. Material Design UI kit
Набор компонентов Material Design для Android-приложений и адаптивных интерфейсов. Используйте актуальный официальный kit или свежую версию из Figma Community.
- кнопки, поля, меню и навигация;
- варианты и состояния компонентов;
- цвета, типографика и elevation;
- готовые шаблоны экранов.
9. Официальный Apple UI kit
Для новых проектов используйте актуальные официальные дизайн-ресурсы Apple, а не старый iOS 16 kit. В 2026 году Apple выпустила UI kits для iOS, iPadOS и macOS 27.
- Подойдёт: дизайнерам приложений для iPhone, iPad и Mac;
- Что изучить: системные компоненты и Human Interface Guidelines;
- Важно: ознакомьтесь с лицензией Apple Design Resources.
/external/template-ios-16 должен вести на актуальный Apple UI kit, а не на устаревший набор iOS 16.
Макеты админок и dashboard для Figma
10. Административная панель
Макет сложного B2B-интерфейса с боковым меню, таблицами, карточками, графиками и фильтрами.
- Подойдёт: продуктовым дизайнерам и frontend-разработчикам;
- Что изучить: таблицы, навигацию, фильтры и состояния данных;
- Практика: добавить мобильную версию и пустые состояния.
Иконки и графические ресурсы Figma
11. Иконки социальных сетей
Набор иконок Telegram, YouTube, WhatsApp, Pinterest, Twitch, VK и других сервисов. Перед использованием в коммерческом продукте проверьте правила использования товарных знаков.
12. Remix Icon
Большая библиотека интерфейсных SVG-иконок. Удобна для прототипов, сайтов, мобильных приложений и собственной дизайн-системы.
13. Макеты банковских карт
Редактируемые макеты банковских карт с градиентами, текстом и декоративными элементами. Подходят для учебного финтех-проекта.
Какие макеты Figma выбрать для практики вёрстки
Для вёрстки нужен не просто красивый экран, а структурированный файл, по которому можно понять размеры и поведение элементов.
Признаки хорошего учебного макета
- есть desktop и mobile-версии;
- используется понятная сетка;
- текстовые стили настроены последовательно;
- кнопки и карточки собраны компонентами;
- слои названы осмысленно;
- изображения доступны для экспорта;
- понятны состояния меню, формы и кнопок;
- нет сотен случайных абсолютных позиций без структуры.
Что верстать новичку
- Одностраничный лендинг.
- Блог с главной и страницей статьи.
- Карточку товара и каталог.
- Мобильный интерфейс из 5–8 экранов.
- Dashboard с таблицей и фильтрами.
| Уровень | Подходящий макет | Технологии |
|---|---|---|
| Начальный | Лендинг или блог | HTML, CSS |
| Средний | Интернет-магазин | HTML, CSS, JavaScript |
| Средний | Многостраничный сайт | React или Vue |
| Продвинутый | Dashboard | React/Vue, таблицы, API |
Можно ли использовать готовый макет в портфолио
Просто скопированный чужой шаблон нельзя выдавать за собственную работу. Для учебного кейса переработайте исходник и честно опишите свою роль.
Как превратить шаблон в самостоятельный кейс
- Выберите другую тему или продукт.
- Проведите небольшой анализ аудитории и конкурентов.
- Измените структуру экранов.
- Соберите собственную типографику и палитру.
- Переделайте компоненты и состояния.
- Добавьте адаптивные версии.
- Соберите кликабельный прототип.
- Укажите, что использовали исходный шаблон как учебную основу.
Как скопировать макет Figma в свой аккаунт
Для Community-файлов нужен аккаунт Figma. Бесплатного Starter-плана достаточно, чтобы открыть и скопировать большинство бесплатных ресурсов.
- Откройте страницу макета.
- Войдите в аккаунт Figma.
- Нажмите Open in Figma, Duplicate или Get a copy.
- Копия появится в Drafts или выбранном проекте.
- Откройте файл и проверьте страницы, слои и компоненты.
Если у вас только право просмотра обычного файла, команда может называться Duplicate to drafts. Дубликат не содержит комментарии и историю версий исходного файла.
Как скачать файл FIG на компьютер
- Откройте доступный для копирования файл.
- Откройте главное меню.
- Выберите File → Save local copy.
- Сохраните файл с расширением FIG.
Владелец может запретить копирование и экспорт. В таком случае сохранить локальную копию или продублировать файл не получится.
Можно ли использовать макеты Figma бесплатно и в коммерческих проектах
Наличие кнопки Duplicate не означает автоматического разрешения на любое коммерческое использование. Условия зависят от лицензии конкретного ресурса.
| Сценарий | Что проверить |
|---|---|
| Личная практика | Обычно разрешена, но прочитайте описание ресурса |
| Учебная вёрстка | Укажите автора при публикации результата, если этого требует лицензия |
| Портфолио | Не выдавайте шаблон за полностью собственную работу |
| Коммерческий сайт | Проверьте разрешение на commercial use |
| Продажа изменённого шаблона | Часто запрещена даже после редактирования |
| Перепубликация в Community | Нужны существенные изменения и соблюдение правил автора |
| Платный Community-файл | Действуют отдельные условия платной лицензии |
Где искать бесплатные макеты для Figma
Основной источник — Figma Community. В ней публикуются дизайн-файлы, UI kits, прототипы, презентации, иконки, плагины и другие ресурсы.
Полезные запросы для поиска
| Что нужно | Запрос |
|---|---|
| Лендинг | landing page free |
| Адаптивный сайт | responsive website |
| Интернет-магазин | ecommerce app |
| Мобильное приложение | mobile app UI kit |
| Админка | dashboard design system |
| Портфолио | portfolio website |
| Дизайн-система | design system free |
| Wireframe | wireframe kit |
| Apple | Apple Design Resources |
| Material Design | Material 3 Design Kit |
Как оценить макет перед копированием
- посмотрите дату последнего обновления;
- проверьте автора и описание;
- изучите количество экранов и страниц;
- проверьте Auto Layout и компоненты;
- найдите информацию о лицензии;
- убедитесь, что файл действительно редактируется;
- не ориентируйтесь только на красивую обложку.
Как учиться дизайну по готовым макетам
Простое копирование почти не развивает навыки. Используйте макет как материал для анализа и самостоятельной практики.
- Разберите структуру страниц и слоёв.
- Найдите основные компоненты.
- Проверьте сетку и отступы.
- Повторите один экран в новом пустом файле.
- Создайте собственную мобильную версию.
- Замените стиль, тексты и изображения.
- Соберите прототип пользовательского сценария.
Хотите научиться создавать макеты самостоятельно?
На бесплатном курсе по дизайну можно выполнить первые практические задания и собрать работу для портфолио.
Часто задаваемые вопросы
Где скачать бесплатные макеты Figma?
Бесплатные макеты можно найти в Figma Community и в тематических подборках. Перед использованием проверяйте автора и лицензию.
Как скопировать макет себе?
Откройте ресурс, войдите в аккаунт Figma и нажмите Duplicate, Get a copy или Duplicate to drafts.
Нужна ли платная подписка Figma?
Для открытия и копирования большинства бесплатных Community-файлов достаточно бесплатного Starter-плана.
Можно ли использовать макет для вёрстки?
Да. Лучше выбирать файл с desktop и mobile-версиями, сеткой, компонентами и понятными слоями.
Можно ли использовать чужой макет в портфолио?
Не стоит выдавать чужой шаблон за собственный дизайн. Переработайте его, опишите свою роль и укажите источник, когда это необходимо.
Можно ли использовать бесплатный макет коммерчески?
Только если лицензия ресурса разрешает коммерческое использование. Бесплатная загрузка сама по себе такого разрешения не гарантирует.
Почему нет кнопки Duplicate?
Владелец мог запретить копирование, файл мог стать платным или ссылка ведёт не на Community-ресурс. Проверьте права доступа и описание.
Какой макет выбрать новичку?
Начните с небольшого лендинга или мобильного приложения на 5–8 экранов. Не берите сложную дизайн-систему как первый проект.
Какой макет лучше для практики HTML и CSS?
Лендинг, блог или сайт-портфолио с адаптивной мобильной версией и простой сеткой.
Где взять официальный iOS UI kit?
Используйте актуальные Apple Design Resources. Не начинайте новый проект на устаревшем UI kit iOS 16.
Вывод
Макеты Figma помогают изучать структуру интерфейсов, тренироваться в веб-дизайне и вёрстке, собирать прототипы и быстрее начинать новые проекты.
Новичку лучше выбрать простой лендинг или мобильное приложение, разобрать компоненты и повторить часть интерфейса самостоятельно. Перед коммерческим использованием обязательно проверьте лицензию ресурса.
Заметили неработающую ссылку или устаревший макет? Напишите нам в Telegram.
