Как убрать обводку в фигме

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

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

Удаление обводки в Figma — одна из самых базовых, но при этом критически важных операций. Даже опытные дизайнеры иногда сталкиваются с тем, что обводка не исчезает, несмотря на все действия. Это происходит из-за непонимания структуры свойств и наследования. Первый шаг — выделите нужный объект: это может быть прямоугольник, эллипс, текст, иконка или даже группа. Убедитесь, что вы не выделили родительскую группу, если обводка задана внутри.

После выделения перейдите в правую панель свойств. Найдите раздел «Stroke» — он находится под параметрами заливки (Fill). Если обводка активна, вы увидите значение толщины (например, 1px), цвет и стиль (сплошная, пунктирная и т.д.). Чтобы убрать обводку, нажмите на поле толщины и введите «0» или выберите из выпадающего списка «None». Альтернативный способ — кликните по иконке обводки (квадрат с линией) и выберите «None» в появившемся меню.

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

Обводка в компонентах и стилях: как правильно управлять

Компоненты — основа современных дизайн-систем. Но именно они становятся главной причиной проблем с обводкой. Представьте: вы создали кнопку с обводкой 1px, сделали её компонентом, и теперь хотите убрать обводку в одном экземпляре. Если просто установить «None» для одного экземпляра — обводка исчезнет только там. Но если вы хотите убрать обводку ВСЕХ экземпляров — вы должны изменить основной компонент.

Чтобы убрать обводку у всех экземпляров: откройте основной компонент (дважды кликните по нему или нажмите «Edit Component»), перейдите в свойства, установите Stroke → None, и сохраните изменения. Все экземпляры автоматически обновятся. Это — стандартное поведение Figma. Однако если вы хотите оставить обводку в одних экземплярах и убрать её в других — используйте варианты (variants).

Создайте вариант компонента без обводки: в панели «Properties» нажмите «Add variant», скопируйте основной компонент, затем в новом варианте уберите обводку. Теперь вы сможете переключаться между вариантами «с обводкой» и «без обводки» в одном компоненте. Это особенно полезно для состояний кнопок: hover, active, disabled.

Также важно понимать разницу между «обводкой объекта» и «обводкой стиля». Стиль обводки — это сохранённое значение, которое можно применить к нескольким объектам. Если вы удаляете обводку через стиль — вы меняете сам стиль. Все объекты, использующие этот стиль, потеряют обводку. Чтобы избежать массовых изменений, создайте новый стиль с нулевой толщиной и примените его только к нужным элементам.

Как убрать обводку у фигур с масками

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

Чтобы сохранить обводку при использовании маски, вы должны разместить объект с обводкой над маской, а не под ней. Маска работает только с теми объектами, которые находятся под ней. Если обводка нужна, но не должна обрезаться — сделайте её отдельным слоем, который не входит в маску. Например: создайте прямоугольник с обводкой, поместите его поверх маскированного объекта, выровняйте по краям и заблокируйте (Lock).

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

Также обратите внимание: если маска применяется к группе, которая содержит несколько объектов с обводкой — Figma может вести себя нестабильно. Лучше упростить структуру: объедините все элементы в один контур (Path), уберите обводку до маскирования, или используйте эффекты (Effects) вместо обводки для создания контура.

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

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

• Ошибка 1: Вы выделили группу, а обводка была у одного из её элементов. Решение: разгруппируйте (Shift+Cmd+G / Shift+Ctrl+G), найдите объект с обводкой и удалите её отдельно.
• Ошибка 2: Обводка исчезла, но объект стал «плоским» и потерял визуальную отделённость. Решение: вместо полного удаления обводки установите толщину 0.5px и цвет в тон фона — это создаёт эффект «невидимой» границы без визуального шума.
• Ошибка 3: Вы убрали обводку в компоненте, но экземпляры не обновились. Решение: проверьте, не заблокированы ли экземпляры (Lock). Также убедитесь, что вы редактируете именно основной компонент, а не экземпляр.
• Ошибка 4: Обводка появляется при изменении размера. Решение: если обводка «растягивается» при изменении размеров — это нормально. Но если вы хотите, чтобы обводка оставалась внутри — используйте внутреннюю обводку (Inner Stroke). В Figma это делается через выпадающий список в свойствах Stroke — выберите «Inside».
• Ошибка 5: Вы используете «Auto Layout» и не можете убрать обводку. Решение: Auto Layout не влияет на обводку напрямую. Но если обводка задана в дочернем элементе — она может быть скрыта из-за отступов. Проверьте каждый элемент внутри контейнера.

Также не забывайте про режимы предварительного просмотра. Иногда обводка не видна из-за включённого режима «Preview» (Cmd+Shift+P / Ctrl+Shift+P) или наложения теней. Отключите все эффекты, чтобы убедиться, что обводка действительно удалена.

Продвинутые советы: автоматизация и рабочие процессы

Для команд, работающих над крупными проектами, ручное удаление обводки — неэффективно. Используйте плагины для автоматизации. Например, плагин “Remove Stroke” (доступен в Figma Community) позволяет одним кликом убрать обводку со всех выделенных объектов. Он особенно полезен при рефакторинге старых макетов или при импорте дизайнов из других инструментов.

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

Представьте, что вы разрабатываете систему компонентов для 50+ экранов. Каждый элемент должен быть гибким. Лучше всего создать два варианта каждой кнопки: с обводкой и без. Это позволяет быстро переключаться между состояниями (например, для темной и светлой темы) без пересоздания компонентов.

Также полезно использовать режим «Select All with Same Fill/Stroke» (правый клик → Select All with Same Stroke). Он выделит все объекты с одинаковой обводкой — идеально для массового удаления. Например, если вы решили убрать все обводки 1px синего цвета — просто выделите один такой элемент, нажмите «Select All with Same Stroke» и установите Stroke → None.

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

Заключение

Удаление обводки в Figma — это не просто техническая операция, а часть системного мышления в дизайне. Правильное управление обводками влияет на согласованность интерфейса, скорость работы команды и качество финального продукта. Главное правило: никогда не удаляйте обводку «на глаз». Всегда используйте панель свойств, проверяйте наследование в компонентах и применяйте стили для масштабируемости.

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

• Обводка удаляется через панель свойств — установите Stroke → None или толщину 0.
• В компонентах изменения влияют на все экземпляры — используйте варианты для гибкости.
• При масках обводка обрезается — размещайте её отдельно или убирайте до маскирования.
• Используйте стили и плагины для массового управления обводками в больших проектах.
• Всегда проверяйте, не скрыта ли обводка за эффектами, группами или наследованием.