{"id":13779,"url":"\/distributions\/13779\/click?bit=1&hash=ce6779e4414848be7de39c3c370823372ee3e0120839e159fc5037a1670b9d5c","title":"\u041e\u0431\u0437\u043e\u0440 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u0430 \u0434\u043b\u044f \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u043e\u0432 ","buttonText":"\u041a\u0430\u043a \u044d\u0442\u043e?","imageUuid":"194bf0fe-adee-50d0-9bd6-cdfdce1789a1","isPaidAndBannersEnabled":false}

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

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

Всем привет, меня зовут Андрей Насонов я работаю 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 фрейм справа или снизу от контента и поместите в этот фрейм кнопку. Так у вас получиться разместить кнопку поверх контента. Весь блок сделан с помощью автолейаутов.

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

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

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

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

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

Спасибо

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

0
40 комментариев
Написать комментарий...
Filipp Lyakh

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

Ответить
Развернуть ветку
Андрей Насонов
Автор

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

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

Это блеск) 

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Артем Прищепов

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

Ответить
Развернуть ветку
Oleg Korzhanov

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

Ответить
Развернуть ветку
Александр К

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

Ответить
Развернуть ветку
Иван Миронов

В инсте уже месяцами крутится реклама некой Anima, которая обещает "дизайн в код". Сам не пользовался, но рекламу их вижу постоянно.

Ответить
Развернуть ветку
Oleg Korzhanov

Думаю тот, кто первым реализует адекватную выгрузку в html/css — неплохо так заработает даже на донатах)

Ответить
Развернуть ветку
Василий Белогородов

Это невозможно в общем смысле из принципа, потому что ТЗ часто представляет из себя нечто, что иногда не сразу понимаешь, как руками-то лучше реализовать. Чтобы программа умела такое "сама", она должна быть джином из бутылки. 

Ответить
Развернуть ветку
Лунный сквер

Для наложения одного элемента на другой придумали настройку 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 уже запрещено?)

я думаю нам нет смысла тратить время на споры, ты не увидел в моей статье пользы а я в твоем комменте аргументы)  Кто-нибудь другой увидит и будет использовать)

Ответить
Развернуть ветку
Лунный сквер

Вы придумали проблему и решили ее костылем. Опубликовали на виси и считаете себя правым. Но в реале такое никто не будет использовать, потому что это не нужно ) Посмотрите внимательнее мой макет и не делайте больше таких глупых статей. Удачи

Ответить
Развернуть ветку
Андрей Насонов
Автор

я думаю ты можешь просто поставить минус статье и успокоиться, а что делать или не делать я уже решу сам) Спасибо)

Ответить
Развернуть ветку
Лунный сквер

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

Ответить
Развернуть ветку
Fedor Nikiforov

Глаза болят от цвета кнопок ))

Ответить
Развернуть ветку
R.Birn

Вот этим меня и пугает сегодняшний продукт. Вместо решения пользовательских проблем, ты вынужден страдать, простите, херней с этими компонентами, дрожать за то, чтобы не дублировать уже имеющийся компонент из библиотеки из 1000, сука, компонентов. Чё-то там выдумывать, костылить. Из 4 часов на задачу, 3 придется потратить на борьбу с компонентами и настройку автолэйаута… Автор, к материалу вопросов нет, просто мысли вслух

Ответить
Развернуть ветку
Fedor Nikiforov

Интересно.

А зачем в первом примере во фрейм положили вектор?
Можно же отделаться просто фреймом? Или есть какой-то подвох? 

Ответить
Развернуть ветку
Андрей Насонов
Автор

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

Ответить
Развернуть ветку
Игорь Александров

Сначала подумал что просто по приколу разве что юзать, потом случился реальный кейс и очень помогло, плюс произвел впечатление коллег-дизайнеров 😅
Так что, спасибо ✊🏻

Ответить
Развернуть ветку
Андрей Насонов
Автор

Пожалуйста, рад что было полезно)

Ответить
Развернуть ветку
Павел

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

Ответить
Развернуть ветку
Андрей Насонов
Автор

Если ты имеешь ввиду апдейт компонентов то всё работает хорошо.
Если ты имеешь ввиду апдейт версии фигмы то тоже все работает хорошо после апдейтов.
Но использовать или нет дело каждого

Ответить
Развернуть ветку
Павел

Я про апдейт фигмы. То что сейчас работает хорошо это понятно, я про гипотетическую возможность исправления данной фичи\бага в будущих версиях, когда у них дойдут до этого руки. Раз фича недокументирована, то есть риск того что они вам что-то сломают в макетах, так как не будут закладывать легаси для данного кейса. 

Ответить
Развернуть ветку
Андрей Насонов
Автор

В теории конечно всё возможно.
Но я думаю это маловероятно.
В любом случае максимум что это сломает это сделает из 0px - 1px фреймы. Если это и произойдет то к тому времени я думаю этот костыль не понадобиться а будет какая-то более нативная фича

Ответить
Развернуть ветку
Oleg Krasnov
Ответить
Развернуть ветку
Андрей Насонов
Автор

Крлассное видео, я думал я первый кто до этого додумался, ну ладно)

Ответить
Развернуть ветку
Oleg Krasnov

Ничего страшного, молодец, что додумался и оформил в статью.

Ответить
Развернуть ветку
Владислав Олейник

Очень интересно, спасибо!

Ответить
Развернуть ветку
Konstantin K.

Делаю нечто похожее, но с однопиксельным фреймом. Не нашел альтернативы для элементов с Auto layout.

Ответить
Развернуть ветку
Александр К

Интересное решение

Ответить
Развернуть ветку
Кирилл Гуров

Круто)
Я не тестили значения при которых размер может стать нулевым 😬

Для верстальщиков этот вариант думаю будут лучше:
Я выкручивался через костыль, при котором нужный элемент помещался во фрейм с размером в 1 пкс, а сам автолейаут учитывает размер фрейма.
Отступы в автолейауте могут быть такие
Верх -10пкс
Низ - 9пкс

Так как фрейм с высотой в 1пкс снизу, тогда автолейаут ровный

Ответить
Развернуть ветку
Серёжа Левчун

Интересный подход, но многие кейсы решаются элементарной работой с фреймами. Например, нужно вставить divider в блок с автолэйаутом, где есть паддинги: делаем фрейм (внутри автолэйаута) шириной контента, а фигуру внутри растягиваем на ширину блока (естественно, сняв галочку с «Clip Content»). И получается, что паддинги сохраняются, и достучаться к элементу не составляет труда, ибо он не 0px ;)

Ответить
Развернуть ветку
Читать все 40 комментариев
null