Компонент в Figma с нулевыми размерами. Приёмы и фишки

Как сделать компонент с размерами 0 на 0 пикселей, и где это можно применить.

Компонент в Figma с нулевыми размерами. Приёмы и фишки

Всем привет, меня зовут Андрей Насонов я работаю UI/UX дизайнером, это моя серия статей про фишки, трюки и прочие штуки в Figma 🙂

Другие статьи из этой серии:

Наверное мало кто знал, но в фигме можно создавать фреймы размером 0x0 px. В таком фрейме можно размещать элементы и он все еще останется 0x0 px.

Зачем это нужно и где это можно применить?

  1. Для ограничения минимальной высоты или ширины элемента
  2. Для наложения одного элемента на другой внутри автолейаутов
  3. Для выноса элементов за границы автолейаута

Подробнее о способах применения я расскажу далее

Как сделать фрейм с нулевыми размерами?

Создайте фрейм и выделите его.

В панели настроек в поле "ширина" введите 0,001 и нажмите Enter

Готово. Теперь ваш фрейм имеет нулевую ширину. По такому же принципу можно сделать нулевую высоту.

Процесс создания фрейма с нулевой шириной (Слева направо)
Процесс создания фрейма с нулевой шириной (Слева направо)

Если в поле ввести именно "0" или "0,01" то Figma автоматически округлит значение до "1", это нам не подходит. Используйте значение с тремя знаками после запятой, для того чтобы произошло округление до ноля.

Как не потерять фрейм?

Будьте осторожны, фремы с нулевыми размерами как девушки, которые любят пафосные цитаты, их трудно найти и легко потерять 😊

Поэтому я помещаю и храню такие компоненты внутри другого фрейма. Для удобства я добавляю фрейму красную обводку. Это позволяет быстро находить такие фреймы и не терять их.

Компоненты хранятся внутри фрейма с красной обводкой
Компоненты хранятся внутри фрейма с красной обводкой

Еще советую красить такие компоненты в специально созданный стиль, у меня он называется "0px". Благодаря этому стилю вы сможете найти все элементы с нулевыми размерами через плагин Similayer

Примеры использования

Далее я приведу несколько самых простых примеров где мы используем этот приём.

Минимальная ширина элемента

Кнопка с ограничением минимальной ширины

Кнопка остается одного размера по ширине если текст кнопки из 4 знаков или меньше. Если ввести слово длиннее 4 знаков, то кнопка начинает растягиваться по ширине.
Минимальная ширина кнопки 88 px

Минимальная высота элемента

Алерт с ограничением минимальной высоты

В алерте использован 0px компонент для ограничения минимальной высоты. Это нужно для того чтобы алерт растягивался по высоте только когда в нём три строки текста или больше. Если же в нём одна или две строки текста, то он не изменяется по высоте. Минимальная высота алерта 56 px

Наложение элементов друг на друга внутри автолейаута

Наложения кнопки поверх элементов в автолейауте

Разместите 0px фрейм справа или снизу от контента и поместите в этот фрейм кнопку. Так у вас получиться разместить кнопку поверх контента. Весь блок сделан с помощью автолейаутов.

Вынос элементов за границы автолейаута

Вынос кнопки закрытия за границу автолейаута

Вынос элементов за границы автолейаута работает по тому же принципу, что и наложение одного элемента на другой внутри автолейаута

Есть ещё много способов как применить данный приём, перечислять их все думаю нет смысла.

В следующих статьях я подробней расскажу о том как мы создаем компоненты и о том где и как мы применяем подобные приёмы. А так же о том как мы создаем свою дизайн систему.

Спасибо

Если вы узнали что-то новое или статья была вам полезна — жмите ^
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

115
40 комментариев

Потом макеты приходят другому дизайнеру и он в ужасе пытается разобраться в этом складе костылей) 

7
Ответить

Смотря кому и как макеты приходят)
Если это наш внутренний дизайнер то они в курсе и сами используют. А если это передача проекта дизайнеру клиента то мы передаём ему всю дизайн систему. А учитывая масштабность ДС этот небольшой костыль для дизайнера будет наименьшим что его будет волновать в этот момент)

2
Ответить

Будьте осторожны, фремы с нулевыми размерами как девушки, которые любят пафосные цитаты, их трудно найти и легко потерять 😊

Это блеск) 

6
Ответить

Комментарий недоступен

1
Ответить

😂 тоже зацепил этот момент)

Ответить

Прекрасный финт. Да, жаль, что это чисто для ускорения работы в фигме.
При вёрстке это не будет иметь никакого значения, адекватных инструментов выгрузки в html как не было, так и нет

2
Ответить

И у меня есть подозрение что никогда не будет. Разве что для самых примитивных макетов. Потому что все таки не зря фронтендеры существуют. Это отдельная история со своими технологиями и развитием

4
Ответить