Как пользоваться слайсом в фигме

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

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

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

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

Инструмент поддерживает экспорт в различных форматах: PNG, JPG, SVG, WEBP и PDF. Можно задавать несколько вариантов экспорта для одного слайса — например, 1x, 2x и 3x для адаптации под Retina-дисплеи. Это делает слайс незаменимым при подготовке ассетов для мобильных и веб-приложений.

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

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

1. Откройте проект в Figma и перейдите на страницу с нужным макетом.
2. Найдите в верхней панели инструментов значок ножниц (или нажмите клавишу C).
3. Щёлкните и потяните по холсту, чтобы нарисовать прямоугольную область. Убедитесь, что она полностью охватывает целевой элемент.
4. Отпустите кнопку мыши. Появится фиолетовый контур — это и есть слайс.
5. В правой панели свойств (Inspector) найдите раздел Export и добавьте необходимые форматы.

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

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

Как перемещать и редактировать слайс

После создания слайс можно изменять: менять размер, перемещать, копировать или удалять.

• Чтобы изменить размер, просто потяните за углы фиолетового прямоугольника.
• Для точной настройки используйте поля X, Y, Width и Height в правой панели.
• Чтобы переместить слайс вместе с содержимым, зажмите Shift и перетащите — тогда будет двигаться вся группа.
• Для удаления кликните по слайсу и нажмите Delete.

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

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

В правой панели Figma в разделе Export вы можете добавить один или несколько пресетов экспорта. Каждый пресет включает:

• Формат файла (PNG, JPG, SVG, WEBP, PDF);
• Масштаб (1x, 2x, 3x);
• Качество (для JPG и WEBP);
• Прозрачность (например, для PNG с альфа-каналом).

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

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

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

Такой подход гарантирует, что разработчики получат все необходимые ресурсы сразу, без дополнительных запросов.

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

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

Один из самых частых сценариев — подготовка UI-кита. Представьте, что вы создали набор иконок 24×24 пикселя. Чтобы разработчик мог использовать их в проекте, достаточно создать по одному слайсу на каждую иконку, указать экспорт в SVG и PNG 1x/2x. После этого всё можно экспортировать одним действием.

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

Использование слайсов в командной работе

В коллаборативной среде важно соблюдать единые правила. Рекомендуется:

• Называть слайсы понятно: «header-logo-svg», «button-primary-png-2x»;
• Группировать слайсы по страницам или компонентам;
• Добавлять комментарии, если экспорт имеет особенности (например, «только для тёмной темы»).

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

Ошибки при использовании слайса и как их избежать

Несмотря на простоту, новички часто допускают типичные ошибки, которые влекут за собой проблемы на стороне разработки.

Первая ошибка — нечёткое выделение. Если слайс немного смещён, он может обрезать границы иконки или оставить белый фон вокруг. Это особенно критично для круглых элементов. Всегда используйте режим «Pixel Preview», чтобы проверить, как объект будет выглядеть после экспорта.

Вторая ошибка — неправильный выбор формата. Экспорт текста в JPG приведёт к потерям качества и невозможности копирования. Для текстовых блоков лучше использовать PNG или оставлять их в макете, а не экспортировать.

Третья — игнорирование масштабов. Забыв указать 2x и 3x, вы заставляете разработчиков масштабировать растровые изображения, что вызывает размытие.

Проверочный чек-лист перед экспортом

Перед тем как отправлять ассеты, выполните эти шаги:

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

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

«Слайс — это не просто инструмент экспорта, а часть системы эффективной доставки дизайна. Когда я начал использовать слайсы системно — с именованием, шаблонами и проверочными списками — количество вопросов от разработчиков сократилось на 70%. Теперь они получают всё, что нужно, без уточнений.»

— Мария Смирнова, руководитель дизайн-студии «Interface», 12 лет в профессии

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

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

Заключение

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

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

• Слайс — это невидимый фрейм для точного экспорта элементов.
• Поддерживает PNG, JPG, SVG, WEBP и PDF с настройкой масштаба.
• Позволяет экспортировать несколько версий одного элемента.
• Критически важно точно выделять объект и проверять видимость слоёв.
• Системное использование слайсов повышает эффективность командной работы.