Smart selection в Figma: как выровнять отступы и перестроить сетку
Auto layout решает задачу, когда элементы уже лежат в контейнере с правилами.
Smart selection работает в обратную сторону: вы раскладываете объекты руками, а Figma подсказывает и выравнивает расстояния.
Что это даёт
Документация перечисляет четыре сценария:
- равномерно менять отступы по вертикали и горизонтали;
- создавать сетки — равномерные и неравномерные;
- перестраивать и переупорядочивать слои в ряд, колонку или сетку;
- дублировать и удалять слои так, чтобы остальные перестраивались.
Последний пункт особенно полезен: при удалении объекта соседи сдвигаются и сохраняют шаг.
Условие появления
Ключевой момент, на котором спотыкаются: Smart selection не включается по кнопке.
Документация: чтобы получить Smart selection, все слои должны находиться на равном расстоянии друг от друга и пересекаться по оси X или Y (одно измерение) либо по обеим осям (два измерения).
Если расстояния разные, розовых маркеров не будет.
Практика: именно поэтому первым делом нужен Tidy up — он приводит выделение к равномерному шагу.
Как выглядит на холсте
Документация: Figma добавляет к выделению «умные» маркеры, а у каждого отдельного объекта появляется розовое кольцо в центре.
При наведении на выделение между слоями появляются дополнительные розовые ручки — они и меняют отступы.
Практика: если розовых элементов нет, дело почти всегда в неравных расстояниях, а не в настройках.
Поле Space between
Менять отступы можно двумя способами.
На холсте. Потянуть ручку между слоями. Над курсором появляется подсказка с текущим значением в пикселях.
В правой панели. В разделе Layout появляются поля горизонтального и вертикального отступа — туда можно вписать число или «прокрутить» значение, зажав курсор на иконке.
Практика: когда нужен точный шаг по сетке, панель надёжнее перетаскивания.
Направление движения
Документация перечисляет подсказки: вверх — уменьшить вертикальный отступ, вниз — увеличить, влево — уменьшить горизонтальный, вправо — увеличить.
Практика: направление неочевидно, и первые минуты уходит на пробы. Запомните правило «к центру — плотнее».
Отметка слоёв и изменение размера
Документация: чтобы изменить размер объекта внутри Smart selection, его нужно «отметить» — кликнуть по слою.
Можно отметить несколько: Shift + клик. Двойной клик по слою в одномерном выделении отмечает все слои. В двумерном выделении Shift + двойной клик отмечает все слои по той же оси, повторный двойной клик — вообще все.
Практика: это самая недооценённая часть инструмента. Меняя высоту одного элемента, вы получаете перестройку соседей с сохранением шага — как в списке сообщений разной длины.
Важное ограничение из документации: в двумерном выделении менять размер можно у одного слоя, в одномерном — у нескольких.
Дополнительно: чтобы менять размер от центра, удерживайте Option (macOS) или Alt (Windows).
Tidy up
Документация: Tidy up выравнивает слои в строки или колонки, а также в двумерную сетку.
Логика зависит от выделения: для одномерного Figma выравнивает объекты по той оси, по которой они пересекаются. Для двумерного — по обеим.
Практика: по сути Tidy up — это distribute с дополнительной логикой. Его задача — привести выделение в состояние, при котором возможен Smart selection.
Практический сценарий: карточки в ряд
- Нарисуйте первую карточку.
- Размножьте её нужное число раз.
- Выделите все карточки.
- Нажмите Tidy up.
- Проверьте отступы в панели Layout.
Практика: шаг 4 решает проблему неравных зазоров за один клик. Дальше можно двигать ручки и смотреть, как меняется шаг.
Практический сценарий: список с разной высотой
- Сделайте колонку элементов.
- Включите Smart selection, выровняв шаг.
- Отметьте один элемент.
- Потяните его за край.
Практика: остальные сдвинутся, сохранив расстояние. Это ровно то поведение, которое в коде даёт flex-контейнер с gap.
Где Smart selection не нужен
Практика: если макет будет жить и меняться, auto layout надёжнее.
Smart selection хорошо работает на этапе раскладки и для статичных композиций: иконки, сетки превью, ряды плашек. Но правила отступов он не хранит — при следующем изменении всё снова придётся выравнивать.
Что не работает
Группы вместо фреймов. Группа подстраивается под содержимое, и отступы внутри неё ведут себя иначе.
Разные расстояния. Маркеров не будет, пока не сделан Tidy up.
Один объект. Нужно минимум два слоя, а для сетки — заметно больше.
Ожидание «прилипания» к сетке. Smart selection выравнивает равные шаги, а не привязывает к направляющим.
Частые ошибки
Тянуть за кольцо вместо ручки. Кольцо переставляет объект, отступы меняет ручка между слоями.
Менять размер без отметки. Слой просто выделяется, остальные не двигаются.
Ждать Smart selection на неравных зазорах. Сначала Tidy up.
Править отступы вручную в панели по одному объекту. Пропадает весь смысл инструмента.
Как это связано с кодом
Практика: Smart selection повторяет поведение flex-контейнера с gap, но не создаёт его.
Если разработчик получит макет, где отступы выставлены только этим инструментом, при переносе в код значения придётся считывать вручную. Auto layout, наоборот, отдаёт готовые параметры в Dev Mode.
Практика: для макетов, которые пойдут в разработку, лучше сразу строить auto layout, а Smart selection использовать для черновых раскладок и проверки идей.
Работа с иконками
Практика: ряды иконок — типичная задача для Smart selection.
Выделите набор, нажмите Tidy up, выставьте одинаковый шаг. Затем отметьте отдельные иконки и подгоните размеры, если они отличаются по оптической массе.
Важно: сами иконки внутри фреймов не должны иметь разного padding, иначе визуальные отступы будут неровными даже при равных зазорах между фреймами.
Двумерные сетки
Практика: в двумерном выделении меняются оба поля — горизонтальное и вертикальное.
Удобно для галерей: сначала Tidy up, затем общий шаг по обеим осям, затем отметка одной карточки для проверки, как перестраивается сетка при изменении её высоты.
FAQ
Почему не появляются розовые маркеры?
Слои стоят на разных расстояниях или не пересекаются по нужной оси.
Чем Tidy up отличается от distribute?
Tidy up дополнительно приводит выделение к состоянию, при котором работает Smart selection.
Можно ли менять размер нескольких слоёв?
В одномерном выделении — да, в двумерном — только одного.
Где задать точный отступ?
В разделе Layout правой панели.
Заменяет ли Smart selection auto layout?
Нет: правила отступов он не сохраняет.