4 Methods You Can Take a look at Your Design System in Figma
Consistency is vital for a profitable UX design system. Find out about other ways to check your design system in Figma.
Protecting consistency and effectivity throughout design initiatives is important.
A superb UX design system should embrace all the weather that make up your model’s visible and purposeful identification.
As it’s possible you’ll already know, one of many most important functions of a Figma design system is for everybody concerned within the mission to be aligned. That is the place you set your design values and a transparent widespread aim for everybody to comply with.
On this tutorial, we’ll cowl some actionable ideas and pleasant reminders to think about to develop a profitable net design system in Figma.
4 Methods You Can Take a look at Your Design System in Figma
Like many design processes, it’s good to start out defining the why. The Golden Circle mannequin by Simon Sinek could be a superb place to begin.
In reality, Figma makes use of it as the bottom to outline 4 key elements for a profitable design system:
- Ideas: the why of a design system
- Foundations: the what of your Figma design system
- Documentation: the how. That is the place you talk the aim of all parts and the way finest to use them
- Processes: the mechanics and governance for managing a design system
So upon getting that down, be sure that your Figma design system covers the primary elements resembling:
- Kind and kind scales
- Icons and icon sizes
- Colours and patterns
- Clear naming conventions
Now, let’s go over a just a few methods you possibly can check your design system:
1. Part Consistency
Have you ever reviewed if all of your design parts stay uniform? It’s extremely prompt to run a part consistency testing. Be sure all of the elements throughout completely different screens and states hold a cohesive fashion.
A full part consistency check ought to search for uniform coloration schemes, sort, and sizing.
Begin your check by responding these questions:
- Are all elements compiled in a shared library for simple entry?
- Is our design utilizing too many related colours? Can we simplify our colours scheme?
- Have all designs been reviewed to verify for visible inconsistencies in sort, coloration, spacing, and so on.?
- Have we performed critiques to catch and share any inconsistencies discovered?
Use UX design system examples for reference. You may as well work with a Figma design system template like this one from Envato Components. It could work as a base to develop your part design.
Testing Colour Scheme Consistency
For instance, we are able to check if our coloration scheme reply to our design wants.
Based on Figma coloration design ideas, 60% of coloration on display screen needs to be impartial, 30% our major design coloration and 10% our secondary or CTA coloration.
Variations of colours could be utilized for elements resembling: messaging, standing, precedence or actions.
Working with our Figma design system template, let’s be sure that the colour scheme is accurately utilized to the Alert elements in our design.
Be sure every state responds to the consumer’s interactions.
Testing Kind Scale Consistency
Your sort system should be readable and aligned to your model persona. Now, for consistency, you need to be sure that scale responds to readability and font use.
A base textual content fashion is usually 16 px, which could be multiplied to create smaller or bigger textual content sizes. Be sure your UX design system consists of quite a lot of scales to provide data hierarchy to your design and content material.
2. Make Certain Naming is Constant
We wish our naming system to make data simpler to search out and perceive. This fashion we be sure that our elements might be utilized in the appropriate manner all through the design.
Begin by defining naming conventions. These embrace:
- Part sorts: buttons, patterns, alerts
- States: default, hover, pressed
- Sizes: body-text, headline, subheading
For instance, we are able to check our button naming conventions utilizing our Figma design system template. Our naming conference might be Class / Use / Variation.
You may see this utilized in our design. Underneath the button Class we discover two completely different makes use of: Major and Secondary. The Use is indicated within the button title: Default, Hover, Pressed or Inactive.
Consistency may also be utilized to our naming case. Are you utilizing all caps, Title Case or Sentence case? Replicate this all through all of your design system.
3. Responsive Design Take a look at
It’s essential to check all elements and layouts of our design. By how our design behaves throughout completely different system sizes we are able to check if our design is responsive.
Listed here are some questions you need to use as a guidelines to check in case your design is responsive:
- How does the structure adapt to completely different display screen sizes?
- Is the content material legible and accessible on all units?
- Is the navigation intuitive and purposeful throughout units?
Create Frames for Completely different Display screen Sizes
The very first thing you are able to do is to create completely different frames to cowl the most typical display screen sizes (e.g., desktop, pill, cell). This fashion we are able to look how our elements behave and adapt.
A superb Figma design system template should function a responsive design. For instance, we are able to use this Laundry Companies Template for example of how each part adjusts to completely different display screen sizes.
Use Auto Structure and Constraints
Probably the greatest instruments to make sure design consistency is with Figma’s Auto Structure device. Apply it to all of your elements and containers.
Constraints assist us management the resizing conduct of our design parts.
Study extra about Auto Structure and Figma responsive design tips:
4. Take a look at Your Design With Actual Customers
It doesn’t matter what number of instances you and your crew have revised the design. It’s pure for us to overlook some errors after viewing a file for a very long time.
On this case, your finest ally is suggestions from neutral customers. Strive testing your designs and get suggestions from different individuals. Embody individuals with completely different accessibility wants and backgrounds.
These are a few of the questions you possibly can ask them to check your UX design techniques:
- Are you able to describe the design and what the web site is for?
- Do you suppose all parts of the design appear to belong to the identical household?
- Did you discover any variations in fashion or look between completely different sections?
- Did you discover variations in fonts or coloration types?
- Did any parts behaves otherwise than you anticipated?
Now you might have just a few actionable tricks to check your net design system in Figma!
Begin With a Figma Design System Template
Save up a while working with Figma design system templates. Most premium templates include predesigned elements and parts.
You may even discover responsive design options making use of the most effective design practices so you need to use as a base to your initiatives.
Extra Figma Assets and Tutorials
Check out new tips to make your net design course of simpler. Create nice UX design techniques working with the most effective sources and templates:
