Slice в фигме что это

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

Что такое Slice в Figma

Slice — это специальный инструмент в интерфейсе Figma, который не изменяет визуальное оформление макета, но служит маркером для экспорта определённой области. Когда вы создаёте слайс, вы как будто «нарезаете» макет на фрагменты, каждый из которых можно экспортировать отдельно. Это особенно важно при передаче дизайна разработчикам, когда нужны точные имена файлов, правильные форматы (PNG, JPG, SVG) и соответствующие размеры.

Инструмент Slice работает независимо от слоёв и объектов. Вы можете наложить его поверх любого элемента — иконки, кнопки, карточки товара — и экспортировать только то, что попадает в область выделения. При этом сам слайс не отображается в предпросмотре, он существует только в режиме редактирования.

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

Как создать Slice: пошаговая инструкция

Создание Slice — простая операция, доступная как новичкам, так и опытным пользователям Figma. Ниже приведён пошаговый алгоритм:

1. Откройте ваш файл в Figma и перейдите на страницу с нужным макетом.
2. Нажмите на значок ножниц в верхней панели инструментов или используйте горячую клавишу S.
3. Щёлкните и перетащите курсор, чтобы выделить нужную область. Убедитесь, что вся целевая графика попала в рамку.
4. Отпустите кнопку мыши. Появится новый объект типа «Slice».
5. При необходимости отрегулируйте границы слайса, потянув за углы или стороны.

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

Как переименовать и настроить слой Slice

Каждый Slice можно переименовать, чтобы упростить ориентацию в проекте. Например, вместо «Slice 1» лучше указать «Кнопка_заказать_PNG». Это особенно важно в крупных проектах, где экспортируется десятки ассетов.

Также вы можете задать несколько вариантов экспорта для одного слайса. Например, один и тот же элемент можно экспортировать в PNG@1x, PNG@2x и SVG — всё это указывается в разделе Export.

Настройка параметров экспорта через Slice

Одно из главных преимуществ Slice — гибкая система экспорта. После создания выделения вы можете указать, в каком формате и с какими параметрами будет сохранён файл.

Доступные форматы:

• PNG — для прозрачных фонов и качественной графики;
• JPG — для фотографий и изображений без прозрачности;
• SVG — для векторной графики, иконок, логотипов;
• PDF — для печатных материалов или векторных шаблонов.

Кроме формата, можно задать масштаб:

• @1x — стандартное разрешение;
• @2x — для Retina-экранов;
• @3x — для устройств с высокой плотностью пикселей.

Вы можете добавить несколько правил экспорта к одному слайсу. Например, иконку можно экспортировать сразу в SVG и PNG@2x, что удобно для кросс-платформенной разработки.

Экспорт нескольких слайсов одновременно

Figma позволяет экспортировать сразу несколько Slice. Для этого:

• Удерживайте Shift и выделите нужные слайсы на холсте;
• Нажмите правой кнопкой мыши и выберите «Export selected»;
• Файлы будут сохранены в указанную папку с соблюдением имён и форматов.

Распространённые ошибки при работе с Slice и как их избежать

Несмотря на простоту, новички часто допускают типичные ошибки при использовании Slice. Знание этих моментов поможет вам сэкономить время и избежать недопонимания с разработчиками.

Ошибка 1: Неправильные границы выделения

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

Решение: Включите сетку (Ctrl + ‘) и используйте привязку к объектам. Убедитесь, что слайс точно охватывает нужный элемент.

Ошибка 2: Отсутствие имён файлов

Если не задать имя экспортируемого файла, Figma присвоит ему название вроде «slice-1.png», что затрудняет поиск.

Решение: Всегда задавайте понятные имена, например: «header-logo.svg» или «btn-primary-active@2x.png».

Ошибка 3: Экспорт в неподходящем формате

Экспорт векторной иконки в PNG вместо SVG лишает её масштабируемости и увеличивает размер проекта.

Решение: Анализируйте тип графики. Вектор — SVG, растровое изображение — PNG/JPG.

Ошибка 4: Игнорирование масштабирования

Забыть про @2x и @3x — значит подвергнуть риску качество отображения на мобильных устройствах.

Решение: Добавляйте несколько правил экспорта для каждого ключевого элемента интерфейса.

Практические примеры использования Slice

Рассмотрим несколько реальных сценариев, где Slice становится незаменимым инструментом.

Сценарий 1: Подготовка иконок для мобильного приложения

Дизайнер создаёт набор иконок для нижнего меню. Каждая иконка должна быть доступна в SVG и PNG@3x. С помощью Slice он выделяет каждую иконку, задаёт экспорт в двух форматах и называет файлы по принципу: «tab-home.svg», «tab-profile@3x.png».

Сценарий 2: Экспорт баннеров для сайта

На странице есть три баннера разных размеров. Slice используется для точного выделения каждого, с экспортом в JPG@1x и JPG@2x. Имена файлов: «banner-main-top.jpg», «banner-promo-mobile@2x.jpg».

Сценарий 3: Передача ассетов разработчику

Команда работает по методологии Design System. Все компоненты (кнопки, чекбоксы, поля ввода) уже стандартизированы. Slice применяется для экспорта состояний: активного, неактивного, hover. Разработчик получает чёткую структуру файлов, соответствующую дизайн-системе.

Экспертное мнение

По её словам, лучшие практики включают:

• Стандартизацию имён файлов;
• Группировку слайсов по страницам или компонентам;
• Использование фреймов (Frames) как основы для слайсов.

Она также отмечает, что в современных workflow Slice часто сочетается с Auto Layout и Components, что позволяет создавать динамические системы экспорта.

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

Заключение

Slice в Figma — это мощный, но недооценённый инструмент, который напрямую влияет на качество и скорость передачи дизайна в разработку. Он позволяет точно контролировать, какие элементы и в каком виде экспортируются, устраняя неопределённость и сокращая количество правок.

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