Figma
ResourcesAssetsCoursesGuides & Best PracticesExtensions & APIs
Figma

How to Design Flexible Button Components in Figma

David Luhr
David Luhr, UX Developer at DockYard, Creator of Build UX

Learn how to design flexible button components in Figma that adapt to any text length and can be quickly updated with various theme and states. Learn to create a master component that determines the internal layout of buttons using Figma's Layout Grid feature. From there, dedicated instances are created for each button's states (default, hover, and focus) and visual themes. Then update all button variations with a single master component, and use instance swapping to quickly trade any button for a different state or theme. With button components completed, they're ready to be used in designs as part of a robust, scalable, and maintainable design system.

Watch Now

Related Content

Denis Rojčyk |
How Kiwi.com handles project structure, versioning & components in Figma
The mobile design team at travel booking site Kiwi.com is tiny, there are only two of us.
Robin Rendle | Guides & Best Practices
Nesting Components in Figma
Robin shares tips and tricks for working with components in Figma, picked up while building a UI Kit at Gusto

Try Figma for free.