Как скачать с фигмы макет

Вы можете скачать макет из Figma как изображение, PDF, HTML-код или даже как готовый прототип — всё зависит от ваших задач: для презентации, разработки, передачи дизайна заказчику или интеграции в код. Главное — правильно выбрать формат и убедиться, что вы имеете необходимые права доступа к файлу.

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

Как экспортировать макет из Figma

Чтобы начать экспорт, откройте ваш проект в Figma. Выберите слой, фрейм или группу, которые нужно скачать. Если вы хотите экспортировать всю страницу — кликните по ней в панели слоёв. Затем в правой панели найдите раздел «Экспорт». Он появляется автоматически при выделении любого элемента. Здесь вы увидите кнопку «+» — нажмите её, чтобы добавить формат экспорта. Вы можете добавить несколько форматов одновременно: например, PNG и SVG для разных целей.

После выбора формата настройте параметры: масштаб (1x, 2x, 3x), формат (PNG, JPG, SVG, PDF, CSS), а также опцию «Прозрачный фон» — она особенно важна для логотипов и иконок. Убедитесь, что включена галочка «Использовать исходные размеры», если вы хотите сохранить точные пропорции. Нажмите «Экспортировать» — файлы скачиваются в папку загрузок вашего браузера. Всё просто, но именно на этом этапе многие допускают ошибки, которые потом дорого стоят.

Если вы работаете с командой, не забудьте проверить права доступа. Даже если вы дизайнер, но файл принадлежит другому пользователю, вам могут ограничить экспорт. В таком случае запросите доступ на «Редактирование» или попросите создать «Ссылку для просмотра» с разрешением на скачивание.

Основные форматы экспорта и когда их использовать

Выбор формата зависит от задачи. Ниже — таблица с рекомендациями по использованию каждого формата.

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

Экспорт только выделенной области или всей страницы

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

Если вы работаете с адаптивными макетами, используйте функцию «Auto Layout». Она позволяет экспортировать элементы с сохранением их поведения. Например, кнопка с текстом и иконкой, упакованная в Auto Layout, будет экспортироваться как единый SVG-объект, а не как три отдельных слоя.

Также полезно использовать «Создать фрейм вокруг» (Frame Selection). Выделяете элемент — нажимаете Alt + A (на Mac) или Ctrl + A (на Windows) — и Figma автоматически создаёт фрейм по размеру содержимого. Теперь вы можете экспортировать именно этот фрейм, а не всю страницу.

Как скачать отдельные компоненты и библиотеки

Если вы используете библиотеки компонентов (например, кнопки, карточки, навигацию), вы можете экспортировать их отдельно, даже если они находятся в другом файле. Для этого откройте библиотеку, найдите нужный компонент, кликните по нему правой кнопкой и выберите «Экспортировать». Вы также можете сделать это через панель «Компоненты» в правой панели.

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

Экспорт CSS, HTML и React-кода

Figma поддерживает экспорт не только изображений, но и кода. Эта функция особенно полезна для разработчиков, которые хотят быстро перенести дизайн в код. Чтобы получить CSS-стили, выделите элемент и в панели «Экспорт» выберите «CSS». Figma сгенерирует стили для цветов, шрифтов, отступов, теней и границ.

Для HTML-экспорта выберите «HTML» — вы получите статичную копию макета в виде HTML-файла, который можно открыть в браузере. Однако это не полноценный веб-сайт — это визуальная копия, без интерактивности и адаптивности. Для React-кода Figma не поддерживает прямой экспорт, но можно использовать сторонние плагины, например, Figma to React или Anima.

Для точного экспорта кода убедитесь, что все элементы имеют корректные имена (не «Rectangle 12»), а стили вынесены в переменные. Figma использует имена слоёв для генерации классов — если вы назовёте слой «primary-button», в коде появится класс .primary-button.

Доступ к экспорту: права и настройки

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

Чтобы разрешить скачивание для внешних пользователей:
1. Нажмите «Поделиться» в правом верхнем углу.
2. Выберите «Ссылка для просмотра».
3. Включите опцию «Разрешить скачивание».
4. Скопируйте ссылку и отправьте.

Теперь любой, кто перейдёт по ссылке, сможет скачать макеты в PNG, JPG, SVG и PDF — без доступа к редактированию. Это идеально для клиентов, агентств и тестировщиков.

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

Вот пять самых распространённых проблем и их решения:

• Экспорт не работает — убедитесь, что вы не находитесь в режиме «Просмотр». Нажмите «Редактировать» в правом верхнем углу.
• Изображение размыто — используйте масштаб 2x или 3x, а не 1x. Особенно для Retina-дисплеев.
• Прозрачность исчезла — в настройках экспорта включите «Прозрачный фон». JPG не поддерживает прозрачность — используйте PNG или SVG.
• Экспортируется не то, что нужно — проверьте, что вы выделили именно нужный слой, а не его контейнер. Используйте «Выделить содержимое» (Ctrl+Shift+A).
• Код не генерируется — имя слоя должно быть на английском и без пробелов. Figma не распознаёт кириллицу в классах.

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

Экспертное мнение: как экспортировать для разработчиков

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

Первое — все элементы должны быть именованы: не “Rectangle 5”, а “button-primary”.
Второе — я создаю отдельный фрейм “For Devs” и туда выношу все компоненты, которые нужно реализовать.
Третье — я всегда экспортирую SVG + CSS, а не PNG. Это позволяет разработчикам масштабировать элементы без потери качества.
Четвёртое — я добавляю комментарий к каждому экспорту: “Использовать как кнопку с hover-эффектом”.
И пятое — я никогда не отправляю макеты без указания размеров и отступов.

Это сокращает время на уточнения на 60%.»
— Алексей Сидоров, UX-директор, руководитель дизайн-системы в крупном банке

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

Заключение

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

Дизайнеры, которые систематизируют экспорт — называют слои, используют фреймы, предоставляют разработчикам CSS и SVG — работают быстрее и получают меньше правок. Разработчики ценят чёткость, а не красоту. Даже самый красивый макет бесполезен, если его невозможно реализовать.

• Всегда используйте SVG для иконок и логотипов — они масштабируются без потерь.
• Для клиентов — PDF с комментариями; для разработчиков — CSS + SVG.
• Проверяйте права доступа и включайте «Разрешить скачивание» при делении ссылки.
• Именуйте слои на английском — это критично для генерации кода.
• Используйте плагины (Anima, Figma to Code) для автоматизации экспорта в React и другие фреймворки.