Skip to main content
Solved

How to adapt underlined button to text length ? (complex button)


Claire5

Hello !

My coworker and I are migrating designs from Sketch to Figma and we have an issue with a complex button.
On Sketch I was able to make it as an adaptative component but on Figma I can’t find the way to do it with constraints or Auto layout.

(We are able to do this with simple button but this one has an line + an icon under the text so it adds difficulty)

Here is the effect I want : (made on Sketch)

button_goal

Thank you !

Best answer by Antoine

Yes, quite easy with the new Absolute positioning. Here’s a quick rendition of what you’re aiming for.

View original
This topic has been closed for comments

4 replies

tank666
  • 4851 replies
  • May 17, 2022

Use Auto Layout, Absolute position and Constraints. You can see an example here: Figma Auto Layout Playground.


Antoine
  • 144 replies
  • Answer
  • May 17, 2022

Yes, quite easy with the new Absolute positioning. Here’s a quick rendition of what you’re aiming for.


Claire5
  • Author
  • 1 reply
  • May 17, 2022

Thank you very much ! 🤍


  • 0 replies
  • June 16, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings