{"id":7298,"title":"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435","url":"\/redirect?component=advertising&id=7298&url=https:\/\/vc.ru\/finance\/287640-predstavte-chto-vy-dolzhny-vernutsya-na-20-let-nazad-v-proshloe-kakie-sovremennye-tehnologii-zahvatite-s-soboy&placeBit=1&hash=4693aaf51fe37b122309350bd15ef7991e11843fbc9183a8a592e9af3c9af557","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 фрейм справа или снизу от контента и поместите в этот фрейм кнопку. Так у вас получиться разместить кнопку поверх контента. Весь блок сделан с помощью автолейаутов.

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

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

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

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

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

Спасибо

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

{ "author_name": "Андрей Насонов", "author_type": "self", "tags": [], "comments": 40, "likes": 97, "favorites": 181, "is_advertisement": false, "subsite_label": "design", "id": 294561, "is_wide": true, "is_ugc": true, "date": "Sat, 25 Sep 2021 13:26:39 +0300", "is_special": false }
0
40 комментариев
Популярные
По порядку
Написать комментарий...

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

6

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

1

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

Это блеск)  ред.

5

Мне коллеги скриншоты этой цитаты в телеграме присылают уже, многих повеселило))

1

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

0

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

0

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

4

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

1

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

0

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

1

Для наложения одного элемента на другой придумали настройку space between внутри алика (автолеаут).

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

1

Покажи пожалуйста как это реализовать чтоб добиться того же поведения компонента?) 
Ставлю своё сомбреро на то что у тебя не выйдет)
Если включать space between то элементы внутри такого автолейаута не будут растягиваться по ширине) 

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

2

Можем созвониться, я покажу как тебе решить проблему без костылей

1

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

У меня есть другое решение. Сделайте компонент кнопки к каким-то небольшим текстом, например ОК. И пропишите размер текстового блока необходимой длины. И все. Когда будете использовать компонент на макетах управляйте им с помощью настройки текста (Auto width или Fixed size). Приложил скрин на скорую руку. Если немного напрячься и подобрать для родительского компонента слово нужной длины, то можно установить для него по дефолту Auto width. И это будет удобнее. Потому что в большинстве случаях на макетах нужны "резиновые" кнопки, и в редких случаях, когда текст кнопки короткий. В этом случае устанавливайте уже на самой кнопке в макете настройку Fixed size. ред.

6

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

1

Зачем нам созваниваться?) Ты можешь просто сделать и скинуть ссылку на файл чтоб все увидели как это можно реализовать. Это займет то же количество времени)

2

Вы все пропустили. VC теперь сайт знакомств :)

4

Да, конечно, вот. https://www.figma.com/file/J4dHzwBc88emxbeWax57jc/%D0%9E%D1%82%D0%B2%D0%B5%D1%82?node-id=0%3A1

Сделал объяснение по кнопке, почему ваш финт не нужен абсолютно.

По алерту не имеет смысла говорить, тоже ненужна приблуда. Если вы придумали такой костыль для алерта - то какой подарок для фронтендера вы выкинете завтра?)

Третья гифка – здесь я не увидел следующего:

А) хорошего ui (кнопка плюса наезжающая на инпут ЧТО?)
Б) Проблемы как таковой. Как и говорил решается спейс битвином такой вариант. Но лучше так не делайте.

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

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

1

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

"Третья гифка" господи это не инпуты, это импровизированные блоки для демонстрации)  делать floating button уже запрещено?)

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

2

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

1

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

0

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

3

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

0

Интересно.

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

1

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

1

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

1

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

1

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

0

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

1

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

1

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

1

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

0

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

0

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

0

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

1

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

0

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

0

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

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

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

0

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

0
Читать все 40 комментариев
Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

Минюст признал «Росбалт» и Republic «иностранными агентами» Статьи редакции
HTC показала новую VR-гарнитуру — компания прифотошопила устройство к стоковым фотографиям Статьи редакции

«Трудно поверить, что ваша вещь хороша, если вам пришлось прифотошопить её к модели. Почему бы не сделать новую фотографию?», — пишет The Verge.

The Verge
Объявлены победители Finlanding
Стоимость биткоина превысила $60 тысяч на фоне планов о создании биржевого фонда на базе биткоин-фьючерсов Статьи редакции

Впервые этой отметки биткоин достиг в марте 2021 года

«Российский рынок акций был и остаётся одним из самых привлекательных в мире»

Виталий Исаков, директор по инвестициям УК «Открытие» («Открытие Инвестиции»).

Microsoft выпустит мини-холодильники в стиле Xbox Series X за $100 Статьи редакции

Предзаказы откроются 19 октября.

Мини-холодильники Xbox The Verge
Чем плох SkyEng и что лучше него в разы

Учителя-студенты по цене профессиональных тьюторов-носителей. Обман, чтобы получить оплату. Игнор просьб и требований клиента.

Одно лишнее слово убило доверие: на встрече с Джобсом стартапер попытался завысить оценку и остался без сделки и бизнеса Статьи редакции

5 октября 2021 года, в десятилетнюю годовщину смерти Стива Джобса, предприниматель и автор проекта iLike Али Партови вспомнил об уроке, усвоенном после встречи с соучредителем Apple. А именно: не пытайся блефовать, если нет козырей.

Соучредитель музыкального сервиса iLike и образовательной платформы code.org Али Партови CNBC
Будущее наступит во вторник на OneRetailConf
null