Variants for Consistency

I usually work in small, close-knit teams (engineering and design working in tandem) where I create rough mockups and simple prototypes so we can move quickly. Some projects require a bit more structure to the design process—a startup I work with was considering bringing on an external engineering team to temporarily supplement their internal resources. To ensure the external team was able to get up to speed quickly and produce higher quality work, I created a design system for the product.

Two key components of the design system were the buttons and fields. I used Figma’s Variants feature to create a single component that can easily switch between all button types and states.

I used Variants to collapse 64 field types and states into 4 only distinct components.

Building mockups is quicker and easier with a single button component (or field component) with all variations. Designers can browse an uncluttered Assets view and easily find the component they need. Designs also become much more consistent when 56 button variation are collapsed into one component—designers can drop in one button component and choose between the type, size and state they need.

Interactive Components

I used the button and field variants to create interactive components—making it much easier to show micro-interactions like hover, active, and click states on the buttons and fields.

Every instance of a button now shows consistent hover, active and clicked state in any prototype—without requiring the designer to setup multiple views for each state.

Figma’s Variants and Interactive Components have made it much easier to bring a new / external design resources up to speed and contributing effectively to the product.