Как изменить толщину линии в фигме

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

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

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

Основы изменения толщины линии

Чтобы изменить толщину линии в Figma, необходимо выделить объект с помощью инструмента Selection (V) или создать новый. После этого в правой панели Inspector появится секция «Stroke». Здесь можно установить толщину обводки в пикселях, указав любое числовое значение — от 0.1 до 1000. Значение можно вводить вручную или использовать стрелки для увеличения/уменьшения.

Figma поддерживает несколько положений обводки: внутри, по центру и снаружи контура. Это особенно важно при работе с фигурами малых размеров, где даже 1 px может существенно повлиять на визуальный баланс. Например, если вы создаёте иконку 24×24 px, обводка 2 px по центру добавит 1 px внутрь и 1 px наружу, что может исказить пропорции.

• Выделите объект (прямоугольник, круг, путь и т.д.)
• Перейдите в правую панель и найдите блок «Stroke»
• Активируйте обводку, кликнув по значку квадрата с контуром
• Установите нужную толщину в поле «Weight»
• Выберите положение: Inside, Center или Outside

Для быстрого доступа используйте сочетание клавиш Ctrl+T (Win) или Cmd+T (Mac), чтобы переключиться между заливкой и обводкой. Это ускоряет работу при частой смене режимов. Кроме того, Figma позволяет сохранять часто используемые значения толщины как часть стиля, что особенно удобно при создании библиотек компонентов.

Шаги для изменения толщины линии

1. Откройте проект в Figma и выберите нужный объект
2. На правой панели найдите раздел «Stroke»
3. Кликните по цветовому квадрату, чтобы активировать обводку
4. Введите значение толщины в поле «Weight» (например, 2)
5. При необходимости измените положение обводки
6. Повторите для других объектов или сохраните стиль

Типы обводки и их особенности

Figma поддерживает три типа положения обводки, каждый из которых влияет на визуальное восприятие и техническую реализацию:

• Center (по центру) — обводка равномерно распределяется по обе стороны от контура. Используется по умолчанию.
• Inside (внутри) — вся толщина обводки накладывается внутрь фигуры. Полезно для иконок и рамок, где важно сохранить внешние размеры.
• Outside (снаружи) — обводка выходит за пределы контура. Подходит для акцентирования элементов без изменения их внутренней области.

Выбор положения зависит от задачи. Например, при создании кнопки с жёстко заданными размерами (например, 120×40 px) лучше использовать Inside, чтобы обводка не увеличивала габариты. Если же вы проектируете карточку с отступами, Outside поможет визуально отделить её от соседних блоков.

Особенности для разных типов объектов

Для векторных путей и фигур обводка работает одинаково, но есть нюансы. Например, при редактировании пути с помощью Pen Tool, толщина линии может визуально искажаться на изгибах. Figma автоматически применяет сглаживание углов (Caps и Joins), что влияет на внешний вид.

• Caps — определяет форму концов линии: Butt, Round, Square
• Joins — задаёт соединение линий: Miter, Round, Bevel

Как добавить обводку к тексту

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

Чтобы добавить обводку к тексту:

• Создайте текстовый объект (T)
• Выделите его и перейдите в панель свойств
• Активируйте Stroke и задайте толщину и цвет
• При необходимости измените положение на Inside или Outside

Однако будьте осторожны: слишком толстая обводка (например, 3 px и более) может сделать текст нечитаемым, особенно при использовании тонких шрифтов. Рекомендуется использовать обводку 1–2 px для заголовков и только при наличии контрастного фона.

Обводка в компонентах и вариантах

При создании компонентов в Figma толщина линии становится частью переиспользуемого элемента. Это позволяет стандартизировать такие элементы, как кнопки, табы, инпуты и карточки. Например, вы можете создать компонент «Button / Primary», где обводка всегда будет 1 px и меняться только при обновлении мастер-компонента.

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

• Создайте компонент с несколькими состояниями (Default, Hover, Disabled)
• В каждом состоянии задайте свою толщину обводки
• Подключите к Auto Layout, чтобы размеры адаптировались
• Используйте Instance Swap для переключения

Автоматизация с помощью переменных

Figma поддерживает Variables — мощный инструмент для управления стилями. Вы можете создать переменную типа Number, например, «Stroke / Default», и привязать её к параметру Weight в обводке. Тогда при изменении значения переменной все связанные объекты обновятся автоматически.

Это особенно полезно при A/B-тестировании интерфейсов или адаптации дизайна под разные платформы (iOS vs Android). Например, iOS рекомендует более тонкие линии (0.5–1 px), тогда как Material Design допускает 2 px.

Работа с толщиной линии в дизайн-системах

В профессиональных дизайн-системах толщина обводки стандартизируется. Обычно используются дискретные значения: 0.5, 1, 1.5, 2 px. Это помогает избежать визуального шума и обеспечивает предсказуемость. Например, в системе Google Material используются 1 px для границ и 2 px для активных состояний.

Чтобы внедрить стандарты в вашу команду:

• Определите набор допустимых значений толщины
• Создайте стили обводки в библиотеке (Local или Team)
• Назначьте ответственного за обновление
• Добавьте документацию в FigJam или Notion

Создание стилей обводки

• Выделите объект с нужной обводкой
• В правой панели нажмите на значок «+» рядом с полем Stroke
• Назовите стиль, например, «Border / Divider / 0.5»
• Сохраните в нужной категории

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

Распространённые ошибки и как их избежать

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

• Использование произвольных значений — например, 1.3 px вместо 1 или 1.5. Это нарушает сетку и затрудняет верстку.
• Игнорирование положения обводки — особенно при использовании Auto Layout. Обводка снаружи может смещать элементы.
• Отсутствие стилей — каждый раз вводить толщину вручную ведёт к несогласованности.
• Применение обводки к тексту без тестирования — может привести к проблемам при рендеринге на устройствах.

Чтобы избежать этих ошибок, создайте чек-лист перед публикацией макета:

1. Проверьте все обводки на соответствие дизайн-системе
2. Убедитесь, что положение обводки не нарушает Auto Layout
3. Замените ручные значения на стили из библиотеки
4. Протестируйте экспорт на разных устройствах

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

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

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

Заключение

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

• Толщину линии меняют в панели Stroke через поле Weight
• Выбирайте положение обводки (Inside, Center, Outside) в зависимости от задачи
• Используйте стили и переменные для единообразия в команде
• Избегайте произвольных значений — придерживайтесь шкалы 0.5, 1, 2, 4 px
• Тестируйте обводку в разных контекстах: Auto Layout, компоненты, экспорт