В Figma толщину линии можно увеличить с помощью параметра Stroke, расположенного в правой боковой панели. Достаточно выделить нужный контур или фигуру и в разделе «Stroke» изменить значение ширины обводки — оно задаётся в пикселях. Для более точного контроля доступны дополнительные настройки: тип обводки (сплошная, пунктир), её положение (внутри, по центру, снаружи) и скругление углов.
Чтобы увеличить толщину линии в Figma, выберите объект и в правой панели установите нужное значение в поле Stroke Weight. Убедитесь, что обводка включена, и при необходимости настройте её тип и положение для корректного отображения.
Figma — один из самых популярных инструментов для UI/UX-дизайна, объединяющий прототипирование, работу с векторной графикой и командную коллаборацию. В процессе создания интерфейсов, иконок или иллюстраций часто возникает необходимость точно контролировать внешний вид элементов, особенно их обводку. Толщина линии (или stroke weight) — ключевой параметр, влияющий на читаемость, масштабируемость и эстетику дизайна. Неправильно подобранная ширина может сделать элементы слишком хлипкими или, наоборот, перегруженными.
Несмотря на кажущуюся простоту, у пользователей, особенно новичков, нередко возникают вопросы: где находится настройка толщины линии, почему изменения не применяются, как задать разные значения для разных сторон объекта. Кроме того, в Figma есть тонкости, связанные с типом обводки, её положением и совместимостью с компонентами.
«При создании дизайн-системы всегда фиксируйте положение обводки. Лучше выбрать единый стандарт — например, Inside для всех компонентов с обводкой, чтобы избежать скачков при переключении состояний.» — Марина Костина, продукт-дизайнер, Figma Ambassador
Работа с круглыми и прямоугольными элементами
Форма объекта влияет на то, как воспринимается толщина линии. На прямоугольниках и квадратах обводка выглядит стабильно, но на кругах и овалах толщина может казаться неоднородной из-за кривизны. Особенно это заметно при большой толщине — например, 8 px и выше.
Кроме того, при наличии скруглённых углов важно следить за соотношением радиуса скругления и толщины обводки. Если радиус меньше половины толщины обводки, углы могут визуально «ломаться» — появляются искажения или обрывы линий. Например, у прямоугольника с радиусом 4 px и обводкой 10 px углы будут выглядеть неестественно.
Чтобы избежать таких проблем, соблюдайте простое правило: радиус скругления должен быть не меньше половины толщины обводки. Это обеспечит плавность переходов и визуальную целостность формы.
Полезно знать: Figma не блокирует нарушение этого правила, но вы можете создать плагин или использовать Auto Layout с ограничениями, чтобы предупреждать команду о некорректных сочетаниях.
Создание компонентов с динамической обводкой
Одно из мощных применений толщины линии — создание адаптивных компонентов. Например, вы можете сделать кнопку, у которой толщина обводки меняется в зависимости от состояния (default, hover, selected). Для этого используйте Variants и свойства обводки.
Чтобы настроить динамическую обводку:
Создайте базовый компонент (например, кнопку).
Добавьте несколько состояний через Variants.
В каждом состоянии измените значение Stroke Weight и, при необходимости, цвет.
Привяжите изменения к свойствам, чтобы другие дизайнеры могли легко переключаться между вариантами.
Также можно использовать плагины, такие как «Strokes to Scale», чтобы автоматически корректировать толщину обводки при масштабировании объектов — по умолчанию Figma не масштабирует обводку вместе с фигурой, но этот функционал можно активировать.
Частые ошибки и как их избежать
Обводка не отображается после увеличения толщины. Причина — неактивный переключатель цвета обводки. Решение: кликните по значку цвета, чтобы активировать обводку.Размеры объекта «прыгают» при включении обводки. Происходит из-за положения обводки по центру. Решение: измените режим на «Inside» или «Outside» в зависимости от задачи.Углы искажаются при большой толщине. Слишком маленький радиус скругления. Решение: увеличьте radius минимум до половины значения Stroke Weight.Обводка не масштабируется при изменении размера объекта. Это поведение по умолчанию. Решение: используйте плагины или вручную корректируйте толщину после масштабирования.
Полезно знать: Чтобы быстро сбросить обводку, выберите объект и нажмите Shift+X — это удалит все обводки. Комбинация Ctrl+Z (Cmd+Z на Mac) вернёт всё обратно, если действие было случайным.
Экспертное мнение
«В профессиональном дизайне толщина обводки — это не просто визуальный параметр, а часть языка интерфейса. Мы используем 1 px для второстепенных элементов, 2 px — для основных действий, а 3 px — для состояния focus. Такая система помогает пользователям быстрее ориентироваться. Главное — быть последовательным.» — Дмитрий Федоров, руководитель дизайн-студии UXLab, 12 лет в digital
Вопросы и ответы
Можно ли задать разную толщину обводки для каждой стороны объекта?
Да, Figma позволяет устанавливать независимые значения для верхней, нижней, левой и правой сторон. В блоке Stroke нажмите на иконку замка, чтобы разблокировать единое значение, затем задайте свои параметры для каждой грани.
Почему обводка становится тоньше при экспорте?
Это может происходить при экспорте в PNG с масштабированием ниже 1x. Убедитесь, что вы экспортируете в 1x или 2x, и проверьте, не включены ли антиалиасинг-фильтры, которые могут сглаживать края.
Поддерживают ли текстовые объекты обводку?
Да, но только после преобразования текста в кривые (Create Outlines). Однако после этого текст нельзя редактировать. Альтернатива — использовать плагины для стилизованных шрифтов с обводкой.
Как сохранить толщину обводки при копировании в другой файл?
Обводка копируется вместе с объектом. Убедитесь, что вы копируете сам слой, а не экспортный результат. Также можно использовать библиотеки компонентов для синхронизации стилей между проектами.
Заключение
Увеличение толщины линии в Figma — простая, но многогранная операция. За ней стоит множество параметров: тип обводки, её положение, форма объекта и контекст использования. Грамотное управление этими настройками позволяет создавать чёткие, масштабируемые и визуально согласованные интерфейсы.
Главное — не просто менять цифры, а понимать, как каждое изменение влияет на общую композицию. Используйте системный подход: задайте стандарты для своей команды, применяйте компоненты и следите за совместимостью с сеткой и типографикой.
Контроль над обводкой — это контроль над деталями. А именно они делают дизайн профессиональным.
Толщина линии задаётся в поле Stroke Weight в правой панели.
Всегда проверяйте активность обводки и её положение (Inside/Center/Outside).
Для круглых и скруглённых объектов соблюдайте соотношение радиуса и толщины.
Используйте компоненты и варианты для создания динамических обводок.
Избегайте частых ошибок: неактивной обводки, искажённых углов и «прыгающих» размеров.
⚠️ Дисклеймер — нажмите, чтобы развернуть
Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.
Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».
Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.
Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.
Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.
Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.
Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.
Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.
Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.
Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.
Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.
Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.
