Москва: проверенные б/у ноутбуки с гарантией и проверкой перед оплатой
+7 906 722-94-45

Главная → Статьи → Figma: Scale — масштаб вместе с обводками

Scale в Figma: масштабирование обводок, текста и эффектов

Чем Scale (K) отличается от ресайза в Figma: что масштабируется вместе с размером, откуда дробные значения, ограничения с инстансами и влияние на экспорт.

Scale в Figma: масштабирование обводок, текста и эффектов

Потянуть за угол фигуры и нажать K — два разных действия, хотя выглядят они одинаково. Первое меняет только размеры прямоугольника: обводка остаётся два пикселя, шрифт — прежним. Второе масштабирует всё связанное с размером. Разница видна на иконках и кнопках, где пропорции важнее геометрии.

Как включить

Нажмите K или выберите Scale в выпадающем списке рядом с инструментом Move.

Выделите объект и потяните за угол.

Figma сохраняет пропорции: горизонталь и вертикаль меняются вместе.

Что масштабируется

Ширина и высота.

Толщина обводки.

Радиус скругления.

Размер шрифта.

Размытие и тени.

Что происходит с constraints

Scale игнорирует constraints вложенных слоёв, чтобы изменить всё пропорционально.

Это документированное поведение и одновременно причина неожиданностей.

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

Разница с ресайзом

Ресайз меняет размеры рамки, сохраняя обводку и шрифт как есть.

Scale пересчитывает все зависимые свойства.

Отсюда правило: иконку увеличивают Scale, карточку в интерфейсе — ресайзом с constraints.

Иконки

Иконка 24 × 24 с обводкой 2 px при ресайзе до 48 × 48 останется с обводкой 2 px и будет выглядеть тоньше.

Scale даст обводку 4 px — визуально ту же иконку, но крупнее.

Это основная причина, по которой иконочные наборы собирают вариантами, а не масштабом.

Текст

При масштабировании текстового слоя меняются и границы рамки, и кегль.

Обычный ресайз меняет только рамку, а текст переливается по-новому.

О тексте и его свойствах — в статье о тексте в Figma.

Дробные значения

Из-за игнорирования constraints при масштабировании появляются дробные размеры шрифта и координаты с долями пикселя.

Figma документирует это как причину нежелательных артефактов при экспорте.

Лечится выбором аккуратных множителей — 1.5, 2, 3 — и последующим округлением значений.

Как округлить

После масштабирования проверьте значения в правой панели.

При необходимости введите целые числа вручную.

Для группы объектов это делается по одному, поэтому лучше сразу брать «круглый» коэффициент.

Ограничение: заблокированные слои

Scale не работает со слоями, которые заблокированы.

Снимите замок сочетанием Command + Shift + L или Control + Shift + L.

Ограничение: инстансы

Слои внутри экземпляра компонента недоступны для масштабирования по отдельности.

Масштабируйте сам экземпляр целиком.

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

Что происходит с инстансом

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

Текстовые свойства, заданные через свойства компонента, остаются связанными с главным компонентом.

При смене варианта ручной масштаб сбрасывается.

Связь с auto layout

Scale не является инструментом адаптивной вёрстки.

Он меняет геометрию целиком, а не перестраивает элементы по правилам.

Для адаптивных макетов используют auto layout и constraints.

Об auto layout — в статье о правилах auto layout.

Когда Scale действительно нужен

Увеличение готового макета под другой экран, когда нужно сохранить пропорции всех элементов.

Копирование иконки или иллюстрации в другом размере.

Подгонка целого блока под макет другого масштаба.

Когда Scale вреден

Правка карточки в интерфейсе: обводки и шрифты должны остаться прежними.

Адаптив: правила важнее пропорций.

Компонент с инстансами: масштаб сбрасывается при смене варианта.

Практика: иконка в двух размерах

Нарисуйте иконку 24 × 24 с обводкой 2 px.

Скопируйте, нажмите K и увеличьте до 48 × 48 — обводка станет 4 px.

Проверьте, что визуально иконка читается так же.

Практика: макет под 2x

Скопируйте фрейм.

Включите Scale и увеличьте в 2 раза.

Проверьте обводки, радиусы и размеры шрифтов — они должны удвоиться.

О экспорте — в статье об экспорте ассетов.

Практика: масштабирование текста

Выделите текстовый слой, нажмите K.

Потяните за угол — кегль и рамка изменятся вместе.

Если кегль стал дробным, введите целое значение в панели.

Связь с frame и group

Внутри группы Scale меняет всё содержимое пропорционально.

В кадре с constraints результат зависит от настройки слоёв, но Scale их игнорирует.

О разнице контейнеров — в статье о Frame и Group.

Связь с constraints

Constraints — про поведение при изменении рамки.

Scale — про пропорциональное изменение всего.

О constraints — в статье о поведении слоёв при ресайзе.

Где ломается

Обводка не изменилась. Активен Move, а не Scale.

Иконка стала «тоньше». Использован ресайз вместо Scale.

Дробный кегль. Множитель был нецелым.

Не масштабируется. Слой заблокирован.

Не масштабируется элемент инстанса. Нужно масштабировать экземпляр целиком.

Макет поехал. Для адаптивной задачи использован Scale вместо constraints.

Как проверить результат после масштабирования

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

Что делать с библиотекой иконок

Масштабировать иконки по одной — плохая практика. Если в системе есть иконки в нескольких размерах, их собирают вариантами компонента с правильной обводкой под каждый размер. Scale пригодится для разовой задачи: перенести готовый набор в другой масштаб или сделать крупную копию для презентации. Для постоянной работы лучше завести варианты: тогда обводка не «поплывёт» при переключении размеров и не придётся каждый раз проверять кегль и радиус.

Частые вопросы по поведению

Иногда кажется, что Scale «не сработал»: объект изменился, а обводка осталась. Это почти всегда означает, что инструмент не был активирован — нажатие K переключает режим, но при клике по другому инструменту он сбрасывается. Второй случай — слой внутри инстанса: там масштабирование недоступно, и Figma просто не даёт тянуть за угол. Третий — заблокированный слой: курсор не меняется, и создаётся впечатление, что инструмент сломан.

FAQ

Какая клавиша включает Scale?

K.

Чем Scale отличается от ресайза?

Scale меняет обводки, радиусы, шрифт и эффекты вместе с размером.

Масштабируется ли текст?

Да, кегль и рамка одновременно.

Почему появились дробные значения?

Из-за игнорирования constraints при масштабировании.

Можно ли масштабировать слой внутри инстанса?

Нет, только экземпляр целиком.