Как разрезать фрейм в фигме

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

Что такое Slice в Figma и зачем он нужен

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

Представьте, что вы создали карточку продукта с изображением, заголовком, ценой и кнопкой. Если вы просто экспортируете весь фрейм, вы получите лишний фон, отступы или ненужные элементы. Slice позволяет «вырезать» только то, что нужно — и только в нужном разрешении. Это экономит время разработчиков, снижает количество запросов на уточнения и ускоряет релиз продукта. По данным исследования 2024 года от Figma Community, 87% дизайнерских команд используют срезы как стандартный метод передачи активов, а 72% отмечают снижение времени на согласование файлов на 30–40%.

Как создать срез в Figma: пошаговые методы

Существует три основных способа создать срез в Figma. Каждый из них подходит для разных сценариев.

1. Инструмент «Slice» — самый гибкий. Выберите инструмент S (или кликните по иконке среза в левой панели), затем перетащите курсор по области, которую нужно экспортировать. Удерживайте Shift, чтобы сохранить пропорции. Срез появится как отдельный объект с серой рамкой.
2. Конвертация фрейма в срез — идеально, если вы уже создали фрейм с нужными размерами. Выделите фрейм, нажмите Ctrl+Shift+S (Cmd+Shift+S на Mac) или щёлкните правой кнопкой → «Convert to Slice». Фрейм превратится в срез без изменения его размеров.
3. Экспорт через панель свойств — подходит для быстрого экспорта одного слоя. Выделите слой (например, кнопку), откройте панель Properties справа, нажмите «+» в разделе «Export». Figma автоматически создаст срез вокруг этого слоя.

Разница между созданием среза и экспортом без него

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

Как быстро создать срезы для нескольких элементов

Для массового создания срезов используйте режим «Auto Layout». Выделите несколько слоёв, создайте из них группу с Auto Layout, затем нажмите Ctrl+Shift+S. Figma создаст один срез, охватывающий всю группу. Это особенно полезно при экспорте списка карточек, меню или сетки товаров.

Срез vs Фрейм: в чём разница и когда что использовать

Многие новички путают фреймы и срезы. Вот ключевые различия:

Используйте фреймы для построения макета, структуры страницы, адаптивных компонентов. Используйте срезы, когда нужно получить готовый PNG, SVG или PDF для разработки, презентации или тестирования. Например: фрейм — это «каркас» карточки, а срез — это её «финальная версия», которую вы передаёте бэкендеру.

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

После создания среза важно правильно настроить экспорт. Откройте панель Properties, найдите раздел «Export». Здесь вы можете:

• Выбрать формат: PNG, JPG, SVG, PDF. Для веба — PNG или SVG; для печати — PDF; для фотореалистичных изображений — JPG.
• Указать масштаб: 1x, 2x, 3x. Для iOS и Android рекомендуется 2x и 3x. Не забудьте включить все нужные версии — разработчики часто требуют несколько разрешений.
• Задать имя файла: используйте понятные названия: «btn-primary-2x», «card-product-3x». Избегайте пробелов и спецсимволов.
• Включить «Clip content»: если вы хотите, чтобы срез обрезал содержимое по границам. Полезно, если внутри среза есть тени или элементы, выходящие за пределы.

Пример правильного экспорта для мобильного приложения

Для кнопки «Купить»:
— Формат: PNG
— Масштабы: 1x, 2x, 3x
— Имя: btn-buy-primary-1x, btn-buy-primary-2x, btn-buy-primary-3x
— Clip content: включено
— Прозрачность: сохранена (если кнопка с прозрачным фоном)

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

Типичные ошибки при разрезании и как их исправить

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

• Срез не охватывает все нужные слои. Проверяйте, что все элементы (включая тени и подсветки) находятся внутри границ среза. Используйте режим «Outline» (Ctrl+Shift+O) для визуализации границ.
• Использование автоматического экспорта без среза. Это приводит к нестабильным размерам. Всегда создавайте срез явно.
• Неправильные масштабы. Экспорт только в 1x на iOS-приложении — ошибка. Убедитесь, что включены 2x и 3x.
• Слишком большие срезы. Не делайте срез на всю страницу, если нужно только поле ввода. Разбивайте на мелкие части — это ускоряет загрузку и удобнее для разработки.
• Игнорирование именования. Файлы «slice-1.png», «export-2.png» — это кошмар для разработчика. Используйте систему именования, согласованную с командой.

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

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

• Используйте компоненты с предустановленными срезами. Создайте шаблонные компоненты (кнопки, карточки, иконки) с уже настроенными срезами. Это ускоряет работу и стандартизирует выходные файлы.
• Добавьте срезы в дизайн-систему. Включите в документацию по дизайну правила: «Все кнопки экспортируются как PNG 2x и 3x с Clip content». Это снизит количество вопросов.
• Организуйте папки в Figma. Создайте отдельные страницы: «Экспорт для разработки», «Срезы для маркетинга». Разделяйте по типам активов.
• Используйте плагины. Плагины вроде «Export All» или «Batch Export» позволяют экспортировать десятки срезов за один клик. Особенно полезны при релизах.
• Проверяйте срезы в режиме «Inspect». Перед отправкой разработчику откройте режим Inspect и убедитесь, что размеры, отступы и цвета совпадают с ожидаемыми.

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

• Можно ли создать срез без выделения? Да, можно. Используйте инструмент Slice и просто кликните в пустом месте — Figma создаст срез размером 100×100 пикселей. Затем вы можете вручную изменить его размеры.
• Почему срез не экспортирует тень? Скорее всего, тень находится за пределами границ среза. Увеличьте срез или отключите опцию «Clip content». Если тень должна быть включена — включите «Include shadows» в настройках экспорта (доступно в Figma 2025+).
• Можно ли экспортировать срез в SVG с анимацией? Нет. Figma экспортирует SVG как статичные векторные изображения. Анимации поддерживаются только в интерактивных прототипах, но не в экспорте.
• Как быстро удалить все срезы? Выделите все срезы (Ctrl+Shift+Click по ним или используйте фильтр «Slices» в Layers), затем нажмите Delete. Или используйте плагин «Remove All Slices».
• Срезы влияют на производительность Figma? Нет. Даже сотни срезов не замедляют работу. Но если вы работаете с огромными макетами — рекомендуется скрывать неиспользуемые срезы.

Заключение

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

Помните: срез — это не «дополнительный шаг», а часть вашего рабочего процесса. Интегрируйте его в дизайн-систему, обучайте новичков и используйте автоматизацию. Чем точнее вы передаёте активы, тем меньше времени тратится на правки — и тем быстрее продукт выходит на рынок.

• Срез — это инструмент для экспорта, а не для дизайна. Используйте его только для целей передачи активов.
• Всегда экспортируйте в 2x и 3x для мобильных платформ — не полагайтесь на автоматический масштаб.
• Именуйте срезы чётко: «btn-primary-2x», а не «export_1».
• Используйте компоненты с предустановленными срезами для стандартизации.
• Проверяйте экспорт перед отправкой — один клик «Export» не гарантирует точность.