Consistency is vital for a profitable UX design system. Study alternative ways to check your design system in Figma.
Protecting consistency and effectivity throughout design tasks is important.
A great UX design system should embrace all the weather that make up your model’s visible and useful identification.
As chances are you’ll already know, one of many primary 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 purpose for everybody to comply with.
On this tutorial, we’ll cowl some actionable ideas and pleasant reminders to contemplate 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 begin defining the why. The Golden Circle mannequin by Simon Sinek might be a wonderful start line.
In reality, Figma makes use of it as the bottom to outline 4 key elements for a profitable design system:
- Rules: 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 components and the way greatest to use them
- Processes: the mechanics and governance for managing a design system
So after getting that down, be sure that your Figma design system covers the principle parts corresponding to:
- Sort and sort scales
- Icons and icon sizes
- Colours and patterns
- Clear naming conventions
Now, let’s go over a just a few methods you’ll be able to check your design system:
1. Part Consistency
Have you ever reviewed if all of your design components stay uniform? It’s extremely advised to run a element consistency testing. Make certain all of the parts throughout totally different screens and states maintain a cohesive model.
A full element consistency check ought to search for uniform coloration schemes, kind, and sizing.
Begin your check by responding these questions:
- Are all parts 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 test for visible inconsistencies in kind, coloration, spacing, and many others.?
- Have we performed evaluations to catch and share any inconsistencies discovered?
Use UX design system examples for reference. You can even work with a Figma design system template like this one from Envato Components. It will probably work as a base to develop your element design.
Testing Colour Scheme Consistency
For instance, we are able to check if our coloration scheme reply to our design wants.
In line with Figma color design tips, 60% of coloration on display screen must be impartial, 30% our main design coloration and 10% our secondary or CTA coloration.
Variations of colours might be utilized for parts corresponding to: messaging, standing, precedence or actions.
Working with our Figma design system template, let’s be sure that the colour scheme is appropriately utilized to the Alert parts in our design.
Make certain every state responds to the person’s interactions.
Testing Sort Scale Consistency
Your kind system have to 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 model is usually 16 px, which might be multiplied to create smaller or bigger textual content sizes. Make certain your UX design system consists of quite a lot of scales to offer info hierarchy to your design and content material.
2. Make Certain Naming is Constant
We wish our naming system to make info simpler to seek out and perceive. This manner we be sure that our parts will probably be utilized in the proper means 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’ll be able to see this utilized in our design. Below the button Class we discover two totally different makes use of: Major and Secondary. The Use is indicated within the button title: Default, Hover, Pressed or Inactive.
Consistency can 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 parts and layouts of our design. By how our design behaves throughout totally different system sizes we are able to check if our design is responsive.
Listed below are some questions you need to use as a guidelines to check in case your design is responsive:
- How does the format adapt to totally different display screen sizes?
- Is the content material legible and accessible on all gadgets?
- Is the navigation intuitive and useful throughout gadgets?
Create Frames for Totally different Display Sizes
The very first thing you are able to do is to create totally different frames to cowl the most typical display screen sizes (e.g., desktop, pill, cellular). This manner we are able to look how our parts behave and adapt.
A great Figma design system template should characteristic a responsive design. For instance, we are able to use this Laundry Services Template for instance of how each element adjusts to totally different display screen sizes.
Use Auto Format and Constraints
The most effective instruments to make sure design consistency is with Figma’s Auto Format software. Apply it to all of your parts and containers.
Constraints assist us management the resizing habits of our design components.
Study extra about Auto Format and Figma responsive design tips:
4. Take a look at Your Design With Actual Customers
It doesn’t matter what number of occasions you and your staff 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 greatest ally is suggestions from neutral customers. Strive testing your designs and get suggestions from different folks. Embody folks with totally different accessibility wants and backgrounds.
These are a number of the questions you’ll be able to ask them to check your UX design techniques:
- Are you able to describe the design and what the web site is for?
- Do you assume all components of the design appear to belong to the identical household?
- Did you discover any variations in model or look between totally different sections?
- Did you discover variations in fonts or coloration types?
- Did any components behaves in another way than you anticipated?
Now you’ve gotten 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 parts and components.
You’ll be able to even discover responsive design options making use of one of the best design practices so you need to use as a base to your tasks.
Extra Figma Sources and Tutorials
Check out new tips to make your net design course of simpler. Create nice UX design techniques working with one of the best assets and templates:
Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].
