Нулевой фрейм в фигме | Zero-pixel Frame in Figma

Думаю, что многие из вас сталкивались с ограниченность autolayout в Figma. Некоторые задачи невозможно решить с помощью стандартного функционала автолейаута. Ярким примером может стать один из видов floating-label. Он, находясь на границе инпута в активном состоянии, нарушает все законы физики автолейаута. Здесь важно понимать, что само поле ввода должно легким движением руки растягиваться под сетку или по ходу ввода текста. То есть, мы точно знаем, что нужен autolayout. Вместе с ним мы не можем использовать элемент, выходящий за его границы. Что делать в такой ситуации? Здесь-то и приходит на помощь тот самый костыль, о котором пойдет речь ниже.

Нулевой фрейм в Figma — это фрейм размера 0px на 0px. Фактически, это контейнер, которого нет. Несмотря на это, мы можем манипулировать объектами внутри него.

1. Во-первых, мы можем его использовать для ограничения минимальной высоты или ширины элемента. Считай, «‎min-width»‎ или «‎min-height»‎ из css. Оригинальные инструменты в фигме не позволяют задавать этот тип высоты и ширины. Я использую этот костыль, в том числе, в степпере. Степпер, независимо от количества контента, должен иметь минимальную высоту. В примере она составляет 100px [смотри пример №1].

2. Во-вторых, для наложения одного элемента autolayout на другого. Ярким примером тому может стать кнопка «‎добавить». По факту она находится между контентной частью и меню-навигацией, но фактически мы ее видим поверх контента [смотри пример №2].

3. В-третьих, для выноса элементов за границы autolayout. С этим я уже приводил пример выше — floating-label, который находится на границе поля ввода [смотри пример №3].

Все очень просто.

1. Создайте обычный фрейм;

2. Установите для него высоту или 0,001 [или и то, и другое];

3. Снимите галочку с Clip content [если хотите помещать внутрь объекты].

Готово!

У вас могут возникнуть трудности с помещением элементов внутрь этого контейнера. Его же почти нет, и попасть в него через drag&drop очень тяжело. Я решаю эту проблему, перемещая объекты в левом меню слоев.

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

2. Давайте теперь рассмотрим пример, когда нам нужно поверх контента разместить объект. Допустим, у нас есть часть экрана мобильного телефона, в которой располагается контент и меню-навигация. Нам нужно вставить кнопку «‎+»‎ или «‎добавить»‎. Если мы просто поместим ее в автолейаут, она встанет куда-то под контент. Поэтому под него мы ставим нулевой фрейм, а внутрь кладем кнопку. Не забудьте отключить свойство Clip Content. Теперь мы можем двигать ее, куда захотим, пока она стоит в нулевом фрейме.

3. Аналогичным образом работает вынос объекта за границы автолейаута, либо размещение поверх его границ. Ярким примером служит «Floating Label» или заголовок в полях ввода, который наезжает на рамку при вводе текста. В своей практике я ставлю нулевой фрейм над контентной частью и кладу в него заголовок. Им же можно задать полю минимальную ширину.

Выставляйте значение высоты и ширины с тремя знаками после запятой. Figma не округляет значения с одним или двумя числами после запятой. Поэтому ели указать 0,01px, вы получите соответствующее значение. Если указать 0,001px, Figma округлит это значение до нуля.

Что касается перемещения самого нулевого фрейма, постарайтесь создавать его близко к месту использования. Не создавайте его на противоположном конце холста от нужного вам объекта. Это может усложнить перенос.

Если растягивать компонент с z-px, внутри которого объект большего размера, объект тянется непропорционально зеро-пискелю. То есть, если у нас есть ячейка таблицы, внизу которой стоит бордер, бордер может уехать дальше границ при растягивании. Либо он может стать меньше по ширине, чем само поле. Лечится просто:

1) Определите минимальную ширину или высоту поля, подстройте полоску под этот размер.

2) Общему контенйнеру задайте свойство Clip сontent. Теперь части объектов, выходящие за его границы, скрываются.

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

Еще один совет. К этому фрейму можно применить стиль или сделать его мастер-компонентом, а в описании указать «0 пкс» или «zero», или все, что «душе угодно». Таким образом, его можно будет легко найти через поиск компонентов или плагины. Но, в таком случае, вам придется его детачить каждый раз.

Для быстрого поиска копий нулевого фрейма подойдет плагин Similayer.

На этом все. Я более подробно постарался рассказать о нулевом фрейме в формате видео вот тут. Надеюсь, эта статья была вам полезна. Буду рад обратной связи. :))

Я на Youtube

Я в Telegram

#фигма #веб дизайн #дизайн #костыль #ux #ui #фрейм#нулевойфрейм #zero-pixel-frame