Компонент в 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 как не было, так и нет
И у меня есть подозрение что никогда не будет. Разве что для самых примитивных макетов. Потому что все таки не зря фронтендеры существуют. Это отдельная история со своими технологиями и развитием
В инсте уже месяцами крутится реклама некой Anima, которая обещает "дизайн в код". Сам не пользовался, но рекламу их вижу постоянно.
Думаю тот, кто первым реализует адекватную выгрузку в html/css — неплохо так заработает даже на донатах)
Это невозможно в общем смысле из принципа, потому что ТЗ часто представляет из себя нечто, что иногда не сразу понимаешь, как руками-то лучше реализовать. Чтобы программа умела такое "сама", она должна быть джином из бутылки.
Вот этим меня и пугает сегодняшний продукт. Вместо решения пользовательских проблем, ты вынужден страдать, простите, херней с этими компонентами, дрожать за то, чтобы не дублировать уже имеющийся компонент из библиотеки из 1000, сука, компонентов. Чё-то там выдумывать, костылить. Из 4 часов на задачу, 3 придется потратить на борьбу с компонентами и настройку автолэйаута… Автор, к материалу вопросов нет, просто мысли вслух
Для наложения одного элемента на другой придумали настройку space between внутри алика (автолеаут).
Применение такой фичи похоже на костыль, который сложно регулировать компонентностью. Да и нужда в этом отпала, когда придумали то, что я написал в первом абзаце.
Покажи пожалуйста как это реализовать чтоб добиться того же поведения компонента?)
Ставлю своё сомбреро на то что у тебя не выйдет)
Если включать space between то элементы внутри такого автолейаута не будут растягиваться по ширине)
PS это и есть костыль, но который позволяет решать некоторые проблемы)
Можем созвониться, я покажу как тебе решить проблему без костылей
На самом деле оба ваши решения костыльные и доставляют неудобства. Если делать нулевой компонент как у автора статьи, то компонент обрастает ненужными стоями. Делать две кнопки только для того чтобы регулировать их поведение тоже глупо, потому что это один и тот же элемент и можно запутаться и это избыточно.
У меня есть другое решение. Сделайте компонент кнопки к каким-то небольшим текстом, например ОК. И пропишите размер текстового блока необходимой длины. И все. Когда будете использовать компонент на макетах управляйте им с помощью настройки текста (Auto width или Fixed size). Приложил скрин на скорую руку. Если немного напрячься и подобрать для родительского компонента слово нужной длины, то можно установить для него по дефолту Auto width. И это будет удобнее. Потому что в большинстве случаях на макетах нужны "резиновые" кнопки, и в редких случаях, когда текст кнопки короткий. В этом случае устанавливайте уже на самой кнопке в макете настройку Fixed size.
Как вариант
Но это работает только с компонентами в которых ширина/высота от текста зависит.
Как по мне лучше лишний раз обернуть компонент и он будет всегда правильно работать чем настраивать его от случая к случаю. Но это уже кому как удобно.
Зачем нам созваниваться?) Ты можешь просто сделать и скинуть ссылку на файл чтоб все увидели как это можно реализовать. Это займет то же количество времени)
Вы все пропустили. VC теперь сайт знакомств :)
Да, конечно, вот. https://www.figma.com/file/J4dHzwBc88emxbeWax57jc/%D0%9E%D1%82%D0%B2%D0%B5%D1%82?node-id=0%3A1
Сделал объяснение по кнопке, почему ваш финт не нужен абсолютно.
По алерту не имеет смысла говорить, тоже ненужна приблуда. Если вы придумали такой костыль для алерта - то какой подарок для фронтендера вы выкинете завтра?)
Третья гифка – здесь я не увидел следующего:
А) хорошего ui (кнопка плюса наезжающая на инпут ЧТО?)
Б) Проблемы как таковой. Как и говорил решается спейс битвином такой вариант. Но лучше так не делайте.
Вынос элементов за границы - здесь тоже не понятно, что вы имели ввиду. Ну вынос и что? Делается обычным автолецаутом и отступом внутри него. В чем там проблема?
В макете показал вам как решить проблему с кнопкой и еще показал, где можно было бы применить ваш костыль, который я сам сначала делал, только с фреймом в 1 пиксель, но потом решил и этот косяк.
при чем тут кнопка?) ты же изначально говорил за что, за наложение одного элемента на другой) я тебе за валянки а ты мне за пряники)
Вот возьми из примера те элементы что у меня и сделай их без использования нулевых фреймов но так чтоб их поведение было точно таким же, при растягивании добавлении текста и тд, для себя, если хочешь.
"Третья гифка" господи это не инпуты, это импровизированные блоки для демонстрации) делать floating button уже запрещено?)
я думаю нам нет смысла тратить время на споры, ты не увидел в моей статье пользы а я в твоем комменте аргументы) Кто-нибудь другой увидит и будет использовать)
Вы придумали проблему и решили ее костылем. Опубликовали на виси и считаете себя правым. Но в реале такое никто не будет использовать, потому что это не нужно ) Посмотрите внимательнее мой макет и не делайте больше таких глупых статей. Удачи
я думаю ты можешь просто поставить минус статье и успокоиться, а что делать или не делать я уже решу сам) Спасибо)
К счастью я не из серии хэйтеров, которые минусят все подряд :) Наоборот поставлю плюс коллеге.
Глаза болят от цвета кнопок ))
Интересно.
А зачем в первом примере во фрейм положили вектор?
Можно же отделаться просто фреймом? Или есть какой-то подвох?
Видимо забыл удалить. Иногда я делаю нулевые компоненты автолейаутами и кладу в них вектор чтоб потом можно было изменять их размер с помощью боковых отступов. Но тут он действительно лишний
Сначала подумал что просто по приколу разве что юзать, потом случился реальный кейс и очень помогло, плюс произвел впечатление коллег-дизайнеров 😅
Так что, спасибо ✊🏻
Пожалуйста, рад что было полезно)
Я бы остерегался юзать этот костыль. Выглядит как недокументированная фича которая может полететь при очередном апдейте и привести к непредсказуемым результатам в проекте. Поправьте если не прав.
Если ты имеешь ввиду апдейт компонентов то всё работает хорошо.
Если ты имеешь ввиду апдейт версии фигмы то тоже все работает хорошо после апдейтов.
Но использовать или нет дело каждого
Я про апдейт фигмы. То что сейчас работает хорошо это понятно, я про гипотетическую возможность исправления данной фичи\бага в будущих версиях, когда у них дойдут до этого руки. Раз фича недокументирована, то есть риск того что они вам что-то сломают в макетах, так как не будут закладывать легаси для данного кейса.
В теории конечно всё возможно.
Но я думаю это маловероятно.
В любом случае максимум что это сломает это сделает из 0px - 1px фреймы. Если это и произойдет то к тому времени я думаю этот костыль не понадобиться а будет какая-то более нативная фича
https://youtu.be/hnPIpkvDxjc
Крлассное видео, я думал я первый кто до этого додумался, ну ладно)
Ничего страшного, молодец, что додумался и оформил в статью.
Очень интересно, спасибо!
Делаю нечто похожее, но с однопиксельным фреймом. Не нашел альтернативы для элементов с Auto layout.
Интересное решение
Круто)
Я не тестили значения при которых размер может стать нулевым 😬
Для верстальщиков этот вариант думаю будут лучше:
Я выкручивался через костыль, при котором нужный элемент помещался во фрейм с размером в 1 пкс, а сам автолейаут учитывает размер фрейма.
Отступы в автолейауте могут быть такие
Верх -10пкс
Низ - 9пкс
Так как фрейм с высотой в 1пкс снизу, тогда автолейаут ровный
Интересный подход, но многие кейсы решаются элементарной работой с фреймами. Например, нужно вставить divider в блок с автолэйаутом, где есть паддинги: делаем фрейм (внутри автолэйаута) шириной контента, а фигуру внутри растягиваем на ширину блока (естественно, сняв галочку с «Clip Content»). И получается, что паддинги сохраняются, и достучаться к элементу не составляет труда, ибо он не 0px ;)