Как сделать подчеркивание блока (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: :???: :?: :!: