Компонент в Figma с нулевыми размерами. Приёмы и фишки
Как сделать компонент с размерами 0 на 0 пикселей, и где это можно применить.
Всем привет, меня зовут Андрей Насонов я работаю UI/UX дизайнером, это моя серия статей про фишки, трюки и прочие штуки в Figma 🙂
Другие статьи из этой серии:
- Разметка элементов в Figma
- Компонент в Figma с нулевыми размерами (Эта статья)
Наверное мало кто знал, но в фигме можно создавать фреймы размером 0x0 px. В таком фрейме можно размещать элементы и он все еще останется 0x0 px.
Зачем это нужно и где это можно применить?
- Для ограничения минимальной высоты или ширины элемента
- Для наложения одного элемента на другой внутри автолейаутов
- Для выноса элементов за границы автолейаута
Подробнее о способах применения я расскажу далее
Как сделать фрейм с нулевыми размерами?
Создайте фрейм и выделите его.
В панели настроек в поле "ширина" введите 0,001 и нажмите Enter
Готово. Теперь ваш фрейм имеет нулевую ширину. По такому же принципу можно сделать нулевую высоту.
Если в поле ввести именно "0" или "0,01" то Figma автоматически округлит значение до "1", это нам не подходит. Используйте значение с тремя знаками после запятой, для того чтобы произошло округление до ноля.
Как не потерять фрейм?
Будьте осторожны, фремы с нулевыми размерами как девушки, которые любят пафосные цитаты, их трудно найти и легко потерять 😊
Поэтому я помещаю и храню такие компоненты внутри другого фрейма. Для удобства я добавляю фрейму красную обводку. Это позволяет быстро находить такие фреймы и не терять их.
Еще советую красить такие компоненты в специально созданный стиль, у меня он называется "0px". Благодаря этому стилю вы сможете найти все элементы с нулевыми размерами через плагин Similayer
Примеры использования
Далее я приведу несколько самых простых примеров где мы используем этот приём.
Минимальная ширина элемента
Кнопка остается одного размера по ширине если текст кнопки из 4 знаков или меньше. Если ввести слово длиннее 4 знаков, то кнопка начинает растягиваться по ширине.
Минимальная ширина кнопки 88 px
Минимальная высота элемента
В алерте использован 0px компонент для ограничения минимальной высоты. Это нужно для того чтобы алерт растягивался по высоте только когда в нём три строки текста или больше. Если же в нём одна или две строки текста, то он не изменяется по высоте. Минимальная высота алерта 56 px
Наложение элементов друг на друга внутри автолейаута
Разместите 0px фрейм справа или снизу от контента и поместите в этот фрейм кнопку. Так у вас получиться разместить кнопку поверх контента. Весь блок сделан с помощью автолейаутов.
Вынос элементов за границы автолейаута
Вынос элементов за границы автолейаута работает по тому же принципу, что и наложение одного элемента на другой внутри автолейаута
Есть ещё много способов как применить данный приём, перечислять их все думаю нет смысла.
В следующих статьях я подробней расскажу о том как мы создаем компоненты и о том где и как мы применяем подобные приёмы. А так же о том как мы создаем свою дизайн систему.
Спасибо
Если вы узнали что-то новое или статья была вам полезна — жмите ^
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
Потом макеты приходят другому дизайнеру и он в ужасе пытается разобраться в этом складе костылей)
Смотря кому и как макеты приходят)
Если это наш внутренний дизайнер то они в курсе и сами используют. А если это передача проекта дизайнеру клиента то мы передаём ему всю дизайн систему. А учитывая масштабность ДС этот небольшой костыль для дизайнера будет наименьшим что его будет волновать в этот момент)
Будьте осторожны, фремы с нулевыми размерами как девушки, которые любят пафосные цитаты, их трудно найти и легко потерять 😊
Это блеск)
Комментарий недоступен
😂 тоже зацепил этот момент)
Прекрасный финт. Да, жаль, что это чисто для ускорения работы в фигме.
При вёрстке это не будет иметь никакого значения, адекватных инструментов выгрузки в html как не было, так и нет
И у меня есть подозрение что никогда не будет. Разве что для самых примитивных макетов. Потому что все таки не зря фронтендеры существуют. Это отдельная история со своими технологиями и развитием