Как сделать подчеркивание блока (border-bottom) в Figma


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

Подчеркивание в Figma
Подчеркивание в Figma

Если же вам надо сделать подчеркивание фрейма с одной из сторон, это можно сделать с помощью Auto Layout. Показываем на примере толстого подчеркивания снизу (аналог border-bottom в CSS). 

Для этого решения надо выполнить следующие шаги:

  1. Создаем текст с шириной по контенту (вытягивает текст во всю длину)
  2. Создаем прямоугольник
  3. Объединяем их с помощью Auto Layout (Shift + A)
  4. Задаем Resizing для прямоугольника по ширине Fill container
Структура слоев
Структура слоев

 

Настройка общего фрейма
Настройка общего фрейма

 

Настройка прямоугольника
Настройка прямоугольника

Аналогичным образом можно выполнить подчеркивание сверху, или сбоку. Отступ от текста (или другого контента) регулируется с помощью настроек Auto Layout (расстояние между элементами). 

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки