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

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

Как скачать макет в Figma: пошаговая инструкция

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

После выделения в правой панели появится блок «Export». Если его нет — убедитесь, что вы выделили именно векторный элемент, а не пустое пространство. Кликните по кнопке «+» рядом с надписью «Export». Откроется меню выбора формата. По умолчанию Figma предлагает PNG, но вы можете переключиться на JPG, SVG или PDF. Для веб-проектов чаще всего выбирают PNG с масштабом 2x или 1x — это обеспечивает чёткость на Retina-экранах.

Установите масштаб: 1x подходит для веб-презентаций, 2x — для мобильных приложений, а 3x — для высокодетализированных изображений. Не забудьте включить опцию «Include all layers» если хотите сохранить все элементы внутри выделенного фрейма. Нажмите «Export», и файл скачается автоматически в вашу папку «Загрузки».

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

Выбор формата зависит от цели экспорта. Figma поддерживает четыре основных формата: PNG, JPG, SVG и PDF. Каждый имеет свои преимущества и ограничения.

• PNG — идеален для веб-интерфейсов, иконок и изображений с прозрачным фоном. Поддерживает высокое разрешение и не теряет качество при масштабировании. Используйте для финальных макетов, которые будут размещены на сайтах или в приложениях.
• JPG — подходит для фотографий и сложных градиентов, где важна компактность файла. Не поддерживает прозрачность, поэтому не подходит для иконок. Оптимален для презентаций и печатных материалов с низкими требованиями к качеству.
• SVG — векторный формат, который масштабируется без потерь. Идеален для логотипов, иконок и интерактивных элементов, которые будут использоваться в коде. Поддерживается всеми современными браузерами и позволяет редактировать стили через CSS.
• PDF — лучший выбор для печати, отчётов и презентаций клиентам. Сохраняет векторную структуру, шрифты и слои. Особенно полезен, если вы отправляете макеты дизайнерским агентствам или типографиям.

Представьте, что вы отправляете макет разработчику. Если вы выберете JPG, он не сможет точно определить границы кнопки. Если вы выберете SVG — он получит чистый вектор, который легко интегрировать в код. Это разница между «попробуйте угадать» и «вот точные параметры».

Как экспортировать несколько макетов сразу

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

При выборе этой опции Figma создаст ZIP-архив, в котором каждый элемент будет сохранён отдельным файлом с именем, соответствующим названию слоя. Это особенно удобно при передаче дизайна в разработку: разработчики получают готовый набор иконок, кнопок и изображений без необходимости вручную экспортировать каждый элемент.

Если вы используете Figma в команде, можно настроить автоматический экспорт через плагины, например, «Export All» или «Batch Export». Они позволяют задавать правила: например, все иконки экспортировать в SVG 24×24, а экраны — в PNG 2x. Это особенно ценно для продуктовых команд, где стандарты экспорта строго регламентированы.

Как дать другим скачать макет без доступа к редактированию

Часто клиенты или стейкхолдеры хотят получить макеты, но не должны иметь доступ к редактированию. Figma решает эту задачу через настройки доступа. Откройте файл, нажмите «Share» в правом верхнем углу. Выберите «Can view» — это ограничит права на чтение. Затем включите опцию «Allow viewers to export».

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

Не забудьте проверить, что в настройках не включена опция «Allow commenting» — если вы не хотите, чтобы зрители оставляли замечания. Также убедитесь, что ссылка не была опубликована в открытых каналах, если макет содержит конфиденциальную информацию.

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

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

• Экспорт в низком разрешении — если вы экспортируете в 1x, а макет предназначен для Retina-экранов, изображения будут размыты. Решение: всегда выбирайте 2x для мобильных интерфейсов и 3x для высокодетализированных элементов.
• Изображение обрезано — если вы не выделили фрейм, а просто кликнули на слой, Figma может экспортировать только часть элемента. Решение: выделяйте целый фрейм, а не отдельные слои.
• Прозрачность потеряна — JPG не поддерживает прозрачность. Если вы экспортировали иконку с прозрачным фоном в JPG — получите белый фон. Решение: используйте PNG или SVG.
• Имя файла не читаемо — Figma сохраняет файлы как «Frame 123.png». Это затрудняет поиск. Решение: переименуйте слои в Figma до экспорта: «login-button», «header-logo».
• Экспорт не работает — если кнопка «Export» не появляется, проверьте: выделен ли объект, не находится ли он внутри компонента без экспорта, не заблокирован ли слой. Также убедитесь, что вы не в режиме «Present».

Если вы работаете с компонентами, убедитесь, что в настройках компонента включена опция «Export». Некоторые дизайнеры случайно отключают экспорт для внутренних элементов, чтобы избежать «мусора» — но это может привести к непредвиденным последствиям при передаче макета.

Экспертные советы по экспорту макетов

Профессиональные дизайнеры используют несколько лайфхаков, которые повышают эффективность работы с экспортом. Во-первых, создайте шаблонный файл с предустановленными настройками экспорта: например, все кнопки — в SVG 24×24, все экраны — в PNG 2x с именами по стандарту. Сохраните его как «Template for Dev Handoff» и копируйте при каждом новом проекте.

Во-вторых, используйте плагины. «Figma to Code» позволяет не только экспортировать изображения, но и генерировать CSS-код для элементов. «Auto Export» автоматически сохраняет изменения в облако при каждом сохранении — идеально для команд, где макеты обновляются несколько раз в день.

В-третьих, всегда проверяйте размеры файлов перед отправкой. SVG-иконки не должны превышать 5 КБ, PNG-экраны — 500 КБ. Большие файлы замедляют загрузку и затрудняют обмен. Используйте TinyPNG или Squoosh для сжатия без потерь.

Также не забывайте о цветовых профилях. Если вы работаете с печатью, убедитесь, что в настройках Figma включён режим CMYK (в разделе «Design» → «Color Profile»). Хотя Figma не поддерживает полноценный CMYK, вы можете вручную настроить цвета под печать, чтобы избежать смещений при выходе на принтер.

Часто задаваемые вопросы

Заключение

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

Экспертный подход — это не только умение экспортировать, но и системный подход: именование слоёв, стандартизация форматов, использование плагинов и контроль прав доступа. Эти практики не только экономят время, но и повышают профессиональный имидж вашей команды.

• Всегда выбирайте формат в зависимости от назначения: PNG для веба, SVG для иконок, PDF для печати.
• Используйте «Export all» для массовой загрузки — это ускоряет передачу макетов в разработку.
• Включайте «Allow viewers to export» для клиентов — это упрощает коммуникацию без риска утечки.
• Переименовывайте слои перед экспортом — это делает файлы читаемыми и организованными.
• Проверяйте разрешение: 1x — только для веб-презентаций, 2x — стандарт для мобильных интерфейсов.