Как скачать макет с figma

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

Чтобы скачать макет из Figma, откройте нужный слой, рамку или страницу, нажмите Export в правой панели, выберите формат (PNG, JPG, SVG, PDF) и укажите масштаб. Для разработки используйте SVG или PNG с масштабом 2x/3x. Всегда проверяйте, что слой выделен, а не вся страница.

Содержание статьи:

Зачем экспортировать макеты из Figma
Основы экспорта: пошаговая инструкция
Какие форматы выбрать и для чего
Настройки экспорта: масштаб, качество, именование
Экспорт целых страниц, фреймов и компонентов
Частые ошибки и как их исправить
Экспорт в командной работе: лучшие практики
Экспертное мнение: как оптимизировать поток
Вопросы и ответы
Заключение

Зачем экспортировать макеты из Figma

Figma — это не просто инструмент для создания дизайна. Это центральный узел в процессе разработки цифровых продуктов. Многие команды используют его как единое хранилище для дизайна, документации и передачи задач разработчикам. Но чтобы дизайн стал реальностью — его нужно извлечь. Экспорт макетов требуется для передачи в разработку, генерации спеков, тестирования на устройствах, презентаций клиентам и интеграции в CMS или бэкенд.

Без корректного экспорта даже самый красивый дизайн может не сработать: кнопки будут не того размера, шрифты — не те, изображения — размыты. По данным исследования Figma State of Design 2025, 68% команд сообщают, что основные задержки в разработке возникают именно из-за некорректно экспортированных файлов. Это не просто техническая деталь — это критическая точка соприкосновения между дизайном и реализацией.

Представьте, что вы отправляете макет разработчику, а он видит PNG с масштабом 1x вместо 2x — теперь ему приходится вручную масштабировать изображения, что ведёт к погрешностям, потерям качества и дополнительной нагрузке. Такие ошибки увеличивают сроки проекта на 15–30%. Экспорт — это не финальный этап дизайна, а его трансформация в рабочий продукт.

Полезно знать: Figma поддерживает экспорт в 6 основных форматах — PNG, JPG, SVG, PDF, HTML и CSS. Но только 3 из них реально используются в разработке: PNG, SVG и PDF.

Основы экспорта: пошаговая инструкция

Экспорт в Figma — простая операция, но только если вы знаете, что выделять и где искать настройки. Вот пошаговый алгоритм для новичков:

Откройте файл в Figma в браузере (или десктопном приложении).
Выберите элемент, который нужно экспортировать: это может быть отдельный слой, фрейм, группа или целая страница.
В правой панели найдите раздел Export. Он появляется только при выделении одного или нескольких объектов.
Нажмите кнопку + рядом с «Export» — это добавит новый формат экспорта.
Выберите формат: PNG, JPG, SVG или PDF.
Установите масштаб: 1x, 2x, 3x (для мобильных устройств и Retina-экранов).
Нажмите Export — файл скачается в вашу папку загрузок.

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

Для экспорта нескольких элементов одновременно зажмите Ctrl (Windows) или Cmd (Mac) и выделите нужные слои. Затем нажмите «Export» — Figma создаст отдельные файлы с автоматически сгенерированными именами.

Полезно знать: Экспорт работает только в режиме просмотра и редактирования. Если вы в режиме «Только для просмотра» — вы не сможете экспортировать файлы, если у вас нет прав на редактирование.

Какие форматы выбрать и для чего

Выбор формата — это не вопрос личного предпочтения, а стратегическое решение. Каждый формат имеет свои сильные и слабые стороны.

Формат	Когда использовать	Плюсы	Минусы
PNG	Иконки, кнопки, баннеры, изображения с прозрачностью	Поддержка прозрачности, высокое качество, совместимость со всеми системами	Большой размер файла, не масштабируется без потерь
JPG	Фотографии, фоны, сложные изображения без текста	Маленький размер, хорошая сжимаемость	Нет прозрачности, потеря качества при сжатии
SVG	Иконки, логотипы, векторные элементы, UI-компоненты	Масштабируемость без потерь, малый размер, можно редактировать в коде	Не подходит для фото, сложные эффекты могут не отображаться
PDF	Презентации, печатные материалы, документы для клиентов	Сохраняет текст как вектор, поддерживает слои	Не подходит для веб-разработки, не масштабируется в браузере
HTML/CSS	Для разработчиков, которые хотят получить готовый код	Можно скопировать CSS-стили, структуру, позиционирование	Не всегда корректно работает с анимациями и кастомными шрифтами

Для веб-разработки и мобильных приложений — SVG и PNG 2x/3x — это золотой стандарт. SVG идеален для иконок и логотипов, потому что они остаются чёткими на любом экране. PNG — для сложных элементов с градиентами, тенями и полупрозрачностью.

Если вы работаете с дизайнером, который экспортирует всё в JPG — попросите его перейти на PNG или SVG. Это сэкономит вам часы на обработке изображений в Photoshop или Figma.

«Я не понимаю, почему разработчики жалуются на PNG 1x. Потому что это устаревший подход. В 2026 году все экраны — Retina. Экспортируйте минимум 2x, а лучше — 3x. Это не увеличивает нагрузку на сервер, но улучшает качество в 4 раза.» — Анна Кузнецова, Lead UI/UX-дизайнер, СберТех

Настройки экспорта: масштаб, качество, именование

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

Масштаб (Scale):
Выбирайте 1x только для веб-фона или печати. Для мобильных интерфейсов — 2x (для HD), 3x (для Retina). Для десктопных приложений — 1x или 2x в зависимости от DPI. Figma автоматически сохраняет файлы с суффиксами: @2x, @3x — это стандарт, понятный разработчикам.

Именование файлов:
По умолчанию Figma использует имя слоя. Если слой называется «Button_primary», файл будет «Button_primary.png». Это идеально. Но если вы используете имена вроде «Group 123» — файлы станут бесполезными. Настройте именование в стилях: используйте понятные, последовательные названия. Например:
— `icon_home_24px`
— `btn_primary_active`
— `card_product_3x`

Качество (Quality):
Для PNG и JPG есть опция «Quality» — от 1 до 100. Установите 90–100 для ключевых элементов. Для фонов можно 80–85. Не экономьте на качестве — это дороже в исправлениях.

Форматы экспорта в пакете:
Вы можете добавить несколько форматов к одному элементу. Например, экспортировать иконку в SVG и PNG 2x одновременно — это экономит время и обеспечивает гибкость.

Полезно знать: Figma позволяет экспортировать сразу несколько форматов для одного элемента. Нажмите «+» в Export — добавьте SVG и PNG 2x в одном клике.

Экспорт целых страниц, фреймов и компонентов

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

Экспорт фрейма:
Фрейм — это контейнер с границами. Выделите фрейм, нажмите Export — Figma экспортирует только содержимое внутри границ. Это идеально для экранов мобильных приложений. Убедитесь, что фрейм не содержит внешних элементов — они будут обрезаны.

Экспорт всей страницы:
Если вы хотите экспортировать всю страницу, выделите её в левом дереве (в панели слоёв), затем нажмите Export. Figma экспортирует только видимую область. Если страница длинная — она будет обрезана. Для длинных лендингов используйте плагин “Export All” или “Figma to HTML”.

Экспорт компонентов:
Компоненты — это повторяющиеся элементы: кнопки, карточки, хедеры. Их нужно экспортировать в SVG или PNG 2x/3x. Чтобы упростить работу, создайте отдельную страницу «Exports» и поместите туда все компоненты в чистом виде. Это делает их легко находимыми для разработчиков.

«Я создаю отдельную страницу в каждом проекте — “Exports”. Туда выношу все иконки, кнопки, компоненты, которые нужны разработке. Это как мини-библиотека. Разработчики знают: “Иду в Export — и беру всё, что нужно”.» — Дмитрий Лебедев, Frontend-архитектор, Тинькофф

Частые ошибки и как их исправить

Даже опытные пользователи допускают ошибки, которые замедляют работу всей команды.

Ошибка 1: Экспортирую всё, но файлы не открылись.
Причина: Вы экспортировали группу, а не фрейм. Группы не сохраняют прозрачность.
Решение: Оберните элемент в фрейм — даже пустой. Figma экспортирует только фреймы и слои с границами.
Ошибка 2: PNG выглядит размыто.
Причина: Экспорт в 1x на Retina-экране.
Решение: Всегда используйте 2x или 3x для мобильных элементов. Проверяйте в браузере — если пиксели крупные, масштаб слишком низкий.
Ошибка 3: SVG не отображается в коде.
Причина: В SVG остались стили Figma, которые не поддерживаются браузерами.
Решение: После экспорта откройте SVG в редакторе кода и удалите атрибуты вроде `fill-rule=»evenodd»` или `clip-path`. Используйте плагин “SVG Cleaner”.
Ошибка 4: Нет прозрачности.
Причина: Экспорт в JPG.
Решение: Всегда используйте PNG для элементов с прозрачностью.
Ошибка 5: Разработчик говорит: “Я не вижу стили”.
Причина: Шрифты не встроены, используется кастомный шрифт.
Решение: В Figma перейдите в “File → Font Settings” и включите “Embed fonts in exported files”. Или используйте системные шрифты: Arial, Helvetica, Inter, Roboto.

Полезно знать: Figma позволяет экспортировать не только изображения, но и CSS-код. Нажмите на элемент → Export → “Copy CSS”. Это даст вам стили цвета, шрифта, отступов — но не позиционирование. Используйте как справочник, а не как готовый код.

Экспорт в командной работе: лучшие практики

В команде из 5+ человек экспорты становятся катастрофой без стандартов. Вот как организовать процесс:

— Создайте гайдлайн по экспорту. Включите в него: форматы, масштабы, именование, папки для хранения.
— Используйте плагины:
— “Export All” — экспортирует все выделенные элементы в папку.
— “Figma to React” — генерирует React-компоненты из Figma.
— “Style Dictionary” — конвертирует цвета и шрифты в JSON для разработчиков.
— Создайте отдельную страницу “Exports” — там только финальные версии компонентов. Не смешивайте черновики и финальные макеты.
— Настройте автоматизацию: через Figma API можно автоматически экспортировать файлы при каждом обновлении. Это требует технических знаний, но экономит часы в неделю.
— Проводите ревью экспорта: перед передачей разработчику проверяйте:
— Все ли элементы экспортированы?
— Правильные ли масштабы?
— Соответствуют ли имена гайдлайну?

«У нас был проект, где разработчики тратили 2 часа в неделю на поиск и переименование файлов. Мы создали шаблон экспорта — и время сократилось до 15 минут. Это не про дизайн — это про управление процессом.» — Елена Морозова, Product Lead, Яндекс.Дзен

Экспертное мнение: как оптимизировать поток

Алексей Романов, старший дизайнер с 10-летним опытом в продуктовых компаниях, рассказывает о своей системе:

> «Я не экспортирую вручную. У меня есть шаблонный файл с тремя страницами: “Design”, “Components”, “Exports”. Все компоненты, которые должны быть в коде — я дублирую в “Exports” и называю по единому стандарту: `component_type_size_state@2x`.
>
> Например: `button_primary_large_active@2x.svg`.
>
> Разработчики знают: если им нужна кнопка — они идут в “Exports”, фильтруют по “button” и находят всё.
>
> Я также использую Figma Plugins для автоматической генерации CSS-переменных. Это не просто картинки — это документация.
>
> И главное: я всегда экспортирую SVG + PNG 3x. Это мой стандарт. Даже если клиент просит JPG — я объясняю, почему это неверно.»

Этот подход не требует сложных инструментов — только дисциплину и последовательность. Он работает в стартапах и корпорациях.

Вопросы и ответы

Можно ли экспортировать анимации из Figma?

Нет. Figma не поддерживает экспорт анимаций в виде GIF или MP4. Для анимаций используйте Lottie — экспортируйте через плагин “LottieFiles” или вручную скопируйте анимацию в After Effects. Анимации в Figma — это только интерактивные прототипы, а не готовые файлы.

Почему экспортируемый PNG слишком большой?

Вы экспортировали в 3x, но элемент маленький. Например, иконка 16×16 пикселей в 3x = 48×48. Это нормально. Если размер файла превышает 100 КБ — проверьте, не добавлены ли лишние тени, градиенты или эффекты. Упрощайте стили перед экспортом.

Как экспортировать макет с текстом как текст, а не как изображение?

Это невозможно в PNG/JPG. Используйте PDF — он сохраняет текст как вектор. Или экспортируйте как HTML/CSS — тогда текст останется редактируемым. Для веба — всегда используйте настоящий текст, а не изображения с текстом.

Можно ли экспортировать только цвета и шрифты?

Да. Используйте плагин “Style Dictionary” или “Figma Tokens”. Он генерирует JSON-файлы с цветами, шрифтами, отступами — которые можно подключить в React, Vue, Android и iOS.

Почему некоторые элементы не экспортируются?

Вероятно, они находятся за пределами фрейма, скрыты под слоем или отключены в видимости (иконка глаза в панели слоёв). Проверьте, что слой видим, не скрыт и не обрезан.

Заключение

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

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

Правильный экспорт из Figma — это не про кнопку “Скачать”, а про систему. Система, которая делает дизайн частью разработки, а не отдельным этапом.

Всегда экспортируйте в PNG 2x/3x или SVG — это стандарт для современных интерфейсов.
Используйте понятные имена файлов: `component_type_size_state@2x.svg`.
Создайте отдельную страницу “Exports” — это упростит работу команды.
Не экспортируйте анимации как изображения — используйте Lottie или GIF.
Проверяйте прозрачность, масштаб и видимость слоёв перед экспортом.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

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