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

Фиолетовое выделение в Figma — распространённая визуальная особенность, которую многие пользователи ошибочно принимают за баг. На самом деле это системное отображение фокуса или активного состояния элементов интерфейса, характерное для операционных систем на базе Chromium (включая Windows и macOS). Оно появляется при использовании клавиатурной навигации или после определённых действий с плагинами и виджетами. Убрать его можно как через настройки самого Figma, так и через внешние инструменты, включая CSS-модификации и расширения браузера.

Причины фиолетового выделения в Figma

Фиолетовое контурное выделение чаще всего проявляется вокруг текстовых полей, кнопок, слоёв в панели Layers или компонентов на холсте. Это поведение напрямую связано с тем, как операционная система и движок рендеринга (Chromium) обрабатывают состояние «фокуса». Когда элемент получает фокус — например, после клика мышью или нажатия Tab — браузер применяет стандартный outline, который по умолчанию может быть фиолетовым.

Такое выделение особенно заметно при работе с плагинами, которые добавляют интерактивные элементы в интерфейс Figma. Многие разработчики не переопределяют CSS-стиль outline, поэтому браузер использует системный стиль. В Figma Desktop и Electron-приложениях это поведение сохраняется, поскольку они построены на том же ядре.

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

• Полей ввода в кастомных плагинах;
• Кнопок в панелях свойств;
• Элементов интерфейса Figma UI при использовании Tab;
• Инпутов при работе с Auto Layout или Constraints.

Когда выделение считается нормальным

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

Как убрать выделение в настройках Figma

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

Чтобы отключить фиолетовое выделение:

1. Откройте Figma (в браузере или десктопном приложении).
2. Нажмите на аватар в правом верхнем углу.
3. Выберите «Настройки» (Settings).
4. Перейдите во вкладку «Общие» (General).
5. Прокрутите до раздела «Доступность» (Accessibility).
6. Найдите параметр «Показывать индикаторы фокуса» (Show focus indicators).
7. Переключите его в положение «Выкл» (Off).

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

Альтернатива: использование горячих клавиш

Если вы временно хотите убрать выделение, попробуйте нажать Esc. Часто это снимает фокус с активного элемента и устраняет визуальный артефакт. Также помогает клик по пустому месту на холсте.

Проверка обновлений Figma

Убедитесь, что вы используете последнюю версию Figma. Разработчики регулярно оптимизируют отображение интерфейса. Проверить версию можно в настройках или через меню «Help → About Figma» (в десктопной версии).

Решение через браузеры и CSS

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

Например, с помощью расширения Stylus вы можете создать кастомный стиль для домена figma.com со следующим содержанием:

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

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

Пошаговая инструкция для Chrome/Edge

1. Установите расширение Stylus из магазина Chrome Web Store.
2. Откройте Figma в браузере.
3. Нажмите на значок Stylus в панели расширений.
4. Выберите «Управление стилями» → «Создать стиль».
5. Введите название, например «Figma No Purple Outline».
6. В поле «CSS» вставьте код:

   :root:focus, button:focus, input:focus, [role="button"]:focus {
       outline: none !important;
       -webkit-tap-highlight-color: transparent;
   }

7. В разделе «Включить для» укажите https://*.figma.com/*.
8. Сохраните и обновите страницу.

Работа с десктопным приложением

Для десктопной версии Figma можно попробовать модифицировать внутренние CSS-файлы, но это требует продвинутых знаний и может привести к сбоям. Кроме того, после обновления приложения изменения будут потеряны. Рекомендуется использовать официальные настройки вместо хаков.

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

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

• Полное отключение всех outline: Это делает интерфейс недоступным для пользователей с нарушениями зрения. Вместо глобального outline: none лучше целенаправленно скрывать рамки только у проблемных элементов.
• Игнорирование обновлений: Некоторые баги с выделением исправляются в новых версиях Figma. Не обновляя приложение, вы можете продолжать сталкиваться с проблемой.
• Использование непроверенных расширений: Некоторые аддоны обещают «очистить Figma», но на деле внедряют вредоносный код. Устанавливайте только проверенные инструменты из официальных магазинов.

Как проверить, что выделение исчезло

После применения изменений проверьте работу на разных экранах:

• Откройте панель Properties и кликните по полям ввода.
• Используйте Tab для навигации между элементами.
• Запустите любой плагин с формами.
• Убедитесь, что рамки не появляются ни при каких действиях.

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

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

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

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

Заключение

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

• Фиолетовое выделение — результат работы механизма фокуса в Chromium.
• Официальный способ убрать его — отключить «Show focus indicators» в настройках Figma.
• Для браузера подойдут расширения вроде Stylus с кастомными CSS-правилами.
• Не отключайте outline глобально — это снижает доступность.
• Обновляйте Figma и проверяйте настройки после каждого апдейта.