Material design prototyping components
Buttons and switches. Introduction of controls section for the biggest material team library for Figma
With this article I’d like to begin the series of guides & explanation for Buttons & Filtering section. One from total amount of 25 sections in Figma Design System. Biggest team library made for Figma for the present moment. So, if you are about to start new project whether for mobile & desktop devices, you can save a lot of time using pre-designed material components from this prototyping kit and design system simultaneously.
🅰 Types of buttons
Buttons communicate the action that will occur when the user touches them
Buttons & Filtering section consists of total amount of 71 UI elements. There are classic material styles available: Flat buttons, Raised, Floating Action. And some custom styles, including: Ghost buttons, Iconic, Big Action, Card buttons. Below you’ll find some simple tips of effective usage each from the bundle.
Flat buttons
Flat buttons are printed on material. They do not lift, but fill with color on press
There is nothing special about this type of buttons. It’s quite simple, placed into component container and with resizing constraints set properly to make it scalable with ease.
Raised buttons
Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.
Raised section consists of classic material buttons and iconic buttons. The last is recommended to use in cases when increasing the meaning is important. So it’s the primary objective of using icons together with buttons. By the way, every button background color is linked to master color in section Colors & Backgrounds for the quick customization purposes. I will explain more about editing below in this post. This GIF also shows how quickly you can switch between icons within Instance. With more than 1000+ material icons included in this Design System, it’s now very simple to toggle just by browsing via 40 icons subcategories.
Floating action buttons
A floating action button is used for a promoted action.
This section is made of absolutely the same architecture as Raised buttons. With corner radius set to maximum, centered icon, and connection to master-color allows you to customize it flexible, even to square or outlined buttons.
Toggle buttons
Toggle buttons may be used to group related options.
Use it for purposes of filtering, sorting or selection with both of mobile and desktop apps. Used to be placed at the top of the layout in most common places. It’s acceptable to keep it at the bottom on mobile devices for more accessibility & finger reachment.
🎨 Additional custom styles
Ghost buttons
Ghost buttons is used to offer a secondary action.
There was always a polemic according to importance of having Ghost buttons. Despite of this, Material Design System contains few predefined styles of it. No doubts, we interacting with Ghost buttons almost everyday, especially on desktop applications. The structure of Ghosts differs a little bit, it contains Stroke master-component instead of background.
Heavy buttons
Heavy buttons recommended to use in mobile apps at 90-100% width of screen
Use this kind of buttons to let your user not to miss the necessary action :) You will see the explanation below in Buttons usage patterns chapter.
Card buttons
Card buttons is used to be placed in a horizontal row
The most common case of usage this is to put it together in a horizontal row. Don’t forget to place the last visible card button behind the edge of the mobile screen to explain to your users the scrollability feature.
Buttons usage patterns
Every time I starting a new post I promise myself to write less as possible. So, difficult to follow :) Here we come to buttons usage patterns, finally. You can always refer to this section when building your prototypes. It’s a live embed, so you can play with this prototype, or duplicate onto your Figma workflow:
🔧 Customization
If you wish to keep the design system relativity within components from above, you always have to switch between master-colors or master-strokes via the ‘Instance’ dropdown at the right column in Figma:
Thus you’ll keep the connection to make the further quick customization possible for all the system at once.
If you have a tremendous eye for details, you’ve already mentioned the reflex shadows for buttons backgrounds instead of regular suggested by Google. Using the color reflex is the absolutely goal for delivering clear and modern style into your future high fidelity prototypes. It’s optimal to customize shadows directly from ‘Color & backgrounds’ section in Material Design System
🔃 Figma API
Once again about silent revolution in web development. With recently released web API of Figma you can deploy this bundle of material components into MVP within just a few weeks, so it’s high time to purchase Material Design System v1.5 and start to prototype with ease. I appreciate fair play : if you post a tweet about this product → I’ll give you 25% discount! Hit me up via Twitter PM
🌊 Prototype mobile and desktop apps faster!
Accelerate design and development time by up to 50%
Material Design System for Figma consists of hundreds of material UI components and thousands of material icons.
