Как работает слайс в фигме

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

Что такое слайс в Figma

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

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

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

Как создать слайс

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

1. Выберите инструмент Slice на панели слева (иконка в виде ножниц) или нажмите клавишу S.
2. Нарисуйте прямоугольник, выделив нужную область на макете. Можно начинать с любого угла и растягивать до нужных размеров.
3. После создания слайс отображается как пунктирная рамка с серыми маркерами. Его можно перемещать, масштабировать или удалять.
4. Для точной настройки перейдите в правую боковую панель, где отображаются параметры экспорта.

Вы также можете создать слайс не вручную, а автоматически — через контекстное меню. Для этого кликните правой кнопкой мыши по любому слою или группе и выберите «Create Slice». В этом случае слайс автоматически подстроится под границы объекта.

Работа с несколькими слайсами

Figma позволяет создавать множество слайсов на одном странице. Это удобно при подготовке набора ресурсов: например, всех иконок из дизайн-системы. Вы можете:

• Группировать слайсы по папкам в панели слоёв;
• Переименовывать их для удобства (например, «icon-home-24px»);
• Экспортировать все сразу или по отдельности.

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

После создания слайса важно правильно настроить параметры экспорта. В правой панели Figma в разделе «Export» вы найдёте следующие опции:

• Format — выбор формата: PNG, JPG, SVG, PDF;
• Scale — масштаб: 1x, 2x, 3x (для ретина-дисплеев);
• Constraint — привязка (по центру, слева, справа и т.д.), хотя это редко используется для слайсов;
• Add Export Setting — возможность добавить несколько вариантов экспорта для одного слайса.

Например, один и тот же слайс может генерировать PNG 1x и PNG 2x одновременно. Это экономит время при подготовке ресурсов для разных устройств.

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

Если вы создали несколько слайсов, можно экспортировать их все за один раз. Для этого:

1. Выделите нужные слайсы в панели слоёв (удерживая Shift или Ctrl);
2. Нажмите кнопку «Export» в правой панели;
3. Выберите нужные форматы и масштабы;
4. Скачайте ZIP-архив со всеми файлами.

Figma автоматически назовёт файлы в соответствии с именами слайсов, что упрощает идентификацию.

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

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

Подготовка ресурсов для разработки

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

• Создайте слайс для каждой иконки в библиотеке;
• Укажите экспорт в PNG 1x, 2x, 3x и SVG;
• Сгруппируйте слайсы в папку «Assets»;
• Отправьте ссылку на фигму или ZIP-архив.

Работа с дизайн-системами

В больших проектах слайсы помогают стандартизировать процесс экспорта. Например, в компоненте «Button» можно заранее прописать слайсы для каждого состояния: default, hover, disabled. Это гарантирует, что при обновлении дизайна все ресурсы будут актуальны.

Экспорт для презентаций и прототипов

Иногда нужно вставить фрагмент макета в Google Slides, Notion или Framer. Слайс позволяет быстро получить изображение нужного размера без потери качества. Особенно удобно при демонстрации отдельных экранов или анимаций.

Ошибки и как их избежать

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

Слайс не вырезает фон

По умолчанию слайс экспортирует только то, что находится внутри его границ. Если вы хотите сохранить фон (например, цвет или градиент), убедитесь, что соответствующий слой включён в область слайса. В противном случае он будет прозрачным.

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

Иногда экспортированный файл оказывается меньше или больше ожидаемого. Причина — неправильно установленный масштаб. Убедитесь, что вы указали нужное значение (1x, 2x и т.д.) и учли плотность пикселей целевого устройства.

Забытые или дублирующие слайсы

При активной работе легко потерять счёт слайсам. Чтобы избежать хаоса:

• Всегда давайте понятные имена слайсам;
• Группируйте их в отдельные фреймы или папки;
• Регулярно очищайте макет от неиспользуемых слайсов.

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

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

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

Заключение

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

• Слайс — это невидимый маркер для экспорта фрагментов макета.
• Он поддерживает множественные форматы и масштабы (PNG, SVG, 1x/2x/3x).
• Используйте слайсы для иконок, компонентов и ассетов дизайн-систем.
• Избегайте ошибок: проверяйте границы, имена и настройки экспорта.
• Систематизируйте слайсы — это повышает эффективность всей команды.