4 Methods You Can Check Your Design System in Figma

0
2


Consistency is essential for a profitable UX design system. Find out about alternative ways to check your design system in Figma.

Design system KitDesign system KitDesign system Kit

Protecting consistency and effectivity throughout design initiatives is crucial.

A great UX design system should embrace all the weather that make up your model’s visible and useful id.

As chances are you’ll already know, one of many fundamental functions of a Figma design system is for everybody concerned within the undertaking to be aligned. That is the place you set your design values and a transparent frequent purpose for everybody to observe.

On this tutorial, we’ll cowl some actionable ideas and pleasant reminders to contemplate to develop a profitable internet design system in Figma.

4 Methods You Can Check 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 might be a wonderful start line.

The truth is, Figma makes use of it as the bottom to outline 4 key components for a profitable design system: 

  1. Rules: the why of a design system
  2. Foundations: the what of your Figma design system
  3. Documentation: the how. That is the place you talk the aim of all components and the way greatest to use them
  4. Processes: the mechanics and governance for managing a design system

So upon getting that down, ensure your Figma design system covers the principle elements resembling: 

  • Sort and sort scales
  • Icons and icon sizes
  • Colours and patterns
  • Clear naming conventions

Now, let’s go over a a couple of methods you may check your design system:

1. Element Consistency 

Have you ever reviewed if all of your design components stay uniform? It’s extremely prompt to run a element consistency testing. Be sure all of the elements throughout completely different screens and states preserve a cohesive model.

A full element consistency check ought to search for uniform shade schemes, sort, and sizing.

Begin your check by responding these questions: 

  • Are all elements compiled in a shared library for straightforward entry?
  • Is our design utilizing too many comparable colours? Can we simplify our colours scheme?
  • Have all designs been reviewed to verify for visible inconsistencies in sort, shade, spacing, and so on.?
  • Have we performed evaluations to catch and share any inconsistencies discovered?

Use UX design system examples for reference. You may also work with a Figma design system template like this one from Envato Components. It might work as a base to develop your element design.

Testing Coloration Scheme Consistency

For instance, we are able to check if our shade scheme reply to our design wants. 

Based on Figma shade design ideas, 60% of shade on display screen needs to be impartial, 30% our main design shade and 10% our secondary or CTA shade.

Variations of colours might be utilized for elements resembling: messaging, standing, precedence or actions. 

Working with our Figma design system template, let’s ensure the colour scheme is accurately utilized to the Alert elements in our design.

Figma design system template color schemeFigma design system template color schemeFigma design system template color scheme

Be sure every state responds to the person’s interactions.

Figma design system template color scheme applied to componentsFigma design system template color scheme applied to componentsFigma design system template color scheme applied to components

Testing Sort Scale Consistency

Your sort system have to be readable and aligned to your model character. Now, for consistency, you need to ensure 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. Be sure your UX design system consists of quite a lot of scales to provide data hierarchy to your design and content material. 

Testing Type Scale Consistency in FigmaTesting Type Scale Consistency in FigmaTesting Type Scale Consistency in Figma

2. Make Positive Naming is Constant 

We would like our naming system to make data simpler to search out and perceive. This manner we ensure our elements will likely be utilized in the proper manner all through the design.

Begin by defining naming conventions. These embrace:

  • Element varieties: 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 possibly can see this utilized in our design. Below the button Class we discover two completely different makes use of: Main and Secondary. The Use is indicated within the button title: Default, Hover, Pressed or Inactive. 

Make Sure Naming is Consistent Make Sure Naming is Consistent Make Sure Naming is Consistent 

Consistency will 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 Check

It’s necessary to check all elements and layouts of our design. By taking a look at 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 format adapt to completely 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 Completely different Display Sizes

The very first thing you are able to do is to create completely different frames to cowl the commonest display screen sizes (e.g., desktop, pill, cell). This manner we are able to look how our elements behave and adapt. 

A great Figma design system template should function a responsive design. For instance, we are able to use this Laundry Providers Template for instance of how each element adjusts to completely different display screen sizes.

Create Frames for Different Screen Sizes in FigmaCreate Frames for Different Screen Sizes in FigmaCreate Frames for Different Screen Sizes in Figma

Use Auto Format and Constraints

Among the finest instruments to make sure design consistency is with Figma’s Auto Format instrument. Apply it to all of your elements and containers.

Constraints assist us management the resizing conduct of our design components.

Study extra about Auto Format and Figma responsive design methods:

4. Check 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. Attempt testing your designs and get suggestions from different individuals. Embrace individuals with completely different accessibility wants and backgrounds. 

These are among the questions you may ask them to check your UX design methods:

  • Are you able to describe the design and what the web site is for?
  • Do you suppose all components of the design appear to belong to the identical household?
  • Did you discover any variations in model or look between completely different sections?
  • Did you discover variations in fonts or shade types?
  • Did any components behaves otherwise than you anticipated?

Now you could have a couple of actionable tricks to check your internet 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 components.

You possibly can even discover responsive design options making use of the very best design practices so you need to use as a base to your initiatives. 

Envato Elements design system templates for FigmaEnvato Elements design system templates for FigmaEnvato Elements design system templates for Figma

Extra Figma Assets and Tutorials

Check out new methods to make your internet design course of simpler. Create nice UX design methods working with the very best assets and templates: 

LEAVE A REPLY

Please enter your comment!
Please enter your name here