8 layers to perfect button design
βοΈ 8 layers to perfect button design β£
π₯ Courtesy of @zanderwhitehurst β£
Extra tool: FlowKit β allows designers to create frighteningly fast user flows within Sketch and Figma.
π A button is just a rectangle with a value surely? It may seem this simple but your buttons should be designed as a scalable, state-based component, not just a rectangle. β£
β‘οΈ This article covers every layer your buttons need with exact dimensions and 8pt scaling system. β£
β£
π€¦ββοΈ Every button should begin as a masked base. From here everything within fits the size of your buttons.β£
β£
πππ Set your button sizes with 32px, 40px and 48px for large buttons β£
β£
π¨ later on, your colours which can be toggled depending on the type of button. β£
β£
π₯
borders should match the colours of your buttons. Layer these in. β£
β£
β
States are best done with opaque layering vs a darker shade of the button colour. This reduces your palette and keeps everything consistent. β£
β£
βοΈ Value is the text or icon within the button. Text wise, create your styles using 14px and 16px font size with 24px line-height. Super clean for the 8pt system. β£
β£
βοΈ Padding wise follow the 8pt rule and scale things nicely with each button size. β£
β£
π₯ Icons should be contained in a square that matches your button masks height. β£
β£
γ°οΈ Constraints. These are so powerful for scaling your buttons dimensions and size! β£
Be free to send us any feedback by reply or reach using DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? π Subscribe now.
π I hope you find this post useful and start creating component buttons that are reusable and consistent! Leave the comments β¬οΈ
