Фигма как вырезать

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

Зачем правильно вырезать в Фигме

Многие считают, что вырезание в Фигме — это просто «сохранить как изображение». Но это заблуждение. Правильный экспорт — это гарантия точности воспроизведения дизайна в разработке. Если вы экспортируете иконку в PNG без чёткого масштабирования, она может выглядеть размыто на Retina-экранах. Если не укажете SVG для векторных элементов, вы потеряете масштабируемость и увеличите вес страницы. По данным исследования Figma State of Design 2025, 68% команд, использующих Фигму, сталкиваются с задержками в разработке из-за некорректных экспортируемых файлов. Причём 41% из них — именно из-за неправильных настроек вырезания.

Представьте: вы разработали кнопку с тенью, градиентом и радиусом 8px. Разработчик получает PNG-файл с размытыми краями и думает, что это баг. А на самом деле — вы забыли включить «Export as PNG» с масштабом 2x и не убрали фон. Такие ошибки дорого стоят. Правильное вырезание — это не только технический навык, но и коммуникация между дизайном и разработкой. Оно снижает количество ревью, ускоряет релизы и повышает качество продукта.

Базовые способы вырезания: шаг за шагом

Вырезать элемент в Фигме можно несколькими способами — выбирайте тот, который подходит под вашу задачу.

1. Выделите нужный слой или группу в панели Layers. Убедитесь, что он не перекрыт другими объектами. Для этого можно временно скрыть (Ctrl+Shift+H) соседние слои.
2. Перейдите в панель Properties справа. Найдите раздел Export.
3. Нажмите + рядом с Export. Появится меню выбора формата: PNG, JPG, SVG, PDF.
4. Выберите формат. Для иконок — SVG. Для фотографий — PNG с прозрачным фоном. Для веб-баннеров — JPG с качеством 80–90%.
5. Установите масштаб: 1x, 2x, 3x. Для мобильных приложений — 2x или 3x. Для веба — 1x или 2x.
6. Если нужно — снимите галочку с «Include background» (если фон не нужен). Для иконок — всегда отключайте.
7. Нажмите «Export» и выберите папку для сохранения.

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

Как вырезать с прозрачным фоном

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

• Убедитесь, что слой не имеет фона (Fill = None).
• В настройках экспорта снимите галочку «Include background».
• Выберите формат PNG или SVG — только они поддерживают прозрачность.
• Проверьте результат: откройте файл в браузере или в Photoshop — фон должен быть чёрно-серым в шахматном порядке.

Как вырезать только часть макета

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

• Создайте новую рамку (Frame) нужного размера над нужной областью.
• Выделите и рамку, и слой внутри неё.
• Нажмите Alt + Click на кнопке «Export» — Фигма экспортирует только содержимое рамки.

Этот метод называется «Exporing from Frame» и является стандартом в крупных дизайн-командах.

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

Выбор формата влияет не только на качество, но и на производительность продукта. Вот как правильно выбирать:

Масштабы — ключевой параметр. Для iOS — 1x, 2x, 3x; для Android — 1x, 1.5x, 2x, 3x, 4x. Фигма позволяет выбирать несколько масштабов одновременно — просто добавьте несколько экспортов для одного слоя. Например, вы можете экспортировать иконку сразу в 1x, 2x и 3x — и разработчик получит все версии без дополнительных запросов.

Продвинутые техники: автоматизация и шаблоны

Если вы работаете в команде, ручной экспорт — это устаревший подход. Современные команды используют автоматизацию.

• Системы экспорта через плагины: Плагин Export All позволяет экспортировать все слои с определёнными тегами (например, «icon», «button») в одну папку с автоматической нумерацией.
• Стили экспорта: Создайте шаблонные фреймы с предустановленными настройками экспорта (например, «Icon 2x PNG», «Button 3x SVG»). Копируйте их для каждого нового элемента.
• Использование компонентов: Если вы используете компоненты (Components), экспортируйте только главный компонент — все его экземпляры будут экспортироваться с теми же настройками. Это исключает рассинхронизацию.
• Интеграция с Figma to Code: Плагины вроде Zeplin или Avocode автоматически генерируют CSS-код и экспортируют файлы в нужные папки проекта.

Для крупных проектов рекомендуется создать Style Guide Export — документ, в котором прописаны правила: какие форматы использовать для каких элементов, какие масштабы, как называть файлы (например, «icon-home-2x.png»). Это устраняет разногласия и экономит до 30% времени на ревью.

Частые ошибки и как их избежать

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

• Экспорт с фоном. Иконка на белом фоне выглядит нормально, но на тёмном — выглядит как «белый квадрат». Всегда отключайте «Include background» для векторных элементов.
• Неправильный масштаб. Экспорт 1x для мобильного приложения — приводит к размытости. Проверяйте требования платформы: iOS требует 3x, Android — 4x для некоторых устройств.
• Экспорт группы вместо слоя. Если вы выделяете группу с несколькими слоями, Фигма может экспортировать лишние элементы. Лучше экспортировать каждый слой отдельно или использовать Frame.
• Не проверяете результат. Экспорт — не конец работы. Всегда открывайте файл в браузере или в инспекторе кода — проверьте прозрачность, размер, качество.
• Использование JPG для иконок. Это увеличивает вес файла и теряется чёткость краёв. SVG — всегда лучший выбор.

Чтобы избежать этих ошибок, создайте чек-лист перед экспортом:

• ☐ Выделен только нужный слой/фрейм
• ☐ Фон отключён (если нужно)
• ☐ Выбран правильный формат
• ☐ Указан нужный масштаб (2x/3x)
• ☐ Файл проверен в браузере

Экспертное мнение: как работают топовые команды

Его команда также использует 命名规范 (нормативное именование): файлы называются по принципу element-type-state-size. Например: button-primary-hover-2x.png. Это позволяет разработчику сразу понять, где и как использовать файл, без вопросов.

Для больших проектов они создают Export Template Figma File — отдельный файл с готовыми фреймами и настройками, который копируется в каждый новый проект. Это как шаблон для дизайна — но для экспорта.

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

Заключение

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

• Всегда используйте SVG для иконок и векторных элементов — это уменьшает вес и улучшает качество.
• Отключайте фон при экспорте иконок и текста — иначе они не будут корректно отображаться на разных фонах.
• Экспортируйте в 2x и 3x для мобильных приложений — это стандарт индустрии.
• Автоматизируйте процесс через плагины и шаблоны — экономьте до 30% времени.
• Проверяйте каждый экспорт в браузере — это избавит от ревью и переделок.