8 layers to perfect button design

Tegra - September 2, 2019 - 0 comments

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.

Layer 1. Base Mask.  Do I just need a rectangle for a button? Nope. Design your buttons as scalable and reusable components. Start with 3 button sizes with a 4px border radius rectangle, masked!
Layer 2. Color.  You need to define your button colors. I covered the essentials fo default, primary, important, and caution. Once created, add your color layer to your masked base.
Layer 3. Border.  You guessed it. Using a rectangle, create your borders to match your button colors and drop this onto your masked base.
Layer 4. State.  Always ignored. Avoid creating states with a darker tone of your button color. Layer state containers with various opacities to your base. These can be toggled on and off for rapid prototyping.
Layer 5. Value.  What good is a button without a value? Using text styles, create 14px and 16px for large button text values with dark, light, disabled and link colors. Add it to your base.
Layer 6. Padding.  With each button size, you'll need a certain 8pt padding system. Always follow the 8pt rule for button padding. Notice the larger scaling for larger buttons.
Layer 7. Icon.  Some of your buttons will have icons so add a left and right icon layer in. Icon-wise, match the container to the button height to create a perfect square icon container.
Layer 8. Constraints.  Juicy. Constraints make it easy for your buttons to scale in size and dimension. Experiment with fixing the size and pinning to various edges.
Learn, Share and Follow. Thanks!

🙌 I hope you find this post useful and start creating component buttons that are reusable and consistent! Leave the comments ⬇️

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *