Design System compliance made easy with Design System Radar for Figma
Imagine a personal assistant who meticulously sifts through every element of your mockups, scrutinizing the consistency of styles and spacing against your design system. Not only that, but it also has a knack for spotting hidden component instances in your mockups. I present to you this solution: Design System Radar, a Figma plugin that I developed.
This plugin is not just a tool; it’s a design companion that simplifies and optimizes your workflow. You know those moments when you wonder if everything is perfectly aligned with the design system, or when you’re looking to quickly identify those specific components? Well, this plugin is the answer to those situations.
Why?
As a Lead UI Design System, I’ve personally encountered a recurring problem among many designers: the difficulty of ensuring that their creations strictly adhere to the established design system. This issue becomes more pronounced with the increasing complexity of mockups, where components and frames interlock in ever more sophisticated ways.
This complexity makes analyzing each element for compliance in terms of styles and spacing extremely laborious. The challenge is further compounded when designers innovate by developing custom components for their specific projects, which must nevertheless harmonize with the overall guidelines of the design system.
The addition of new variables in Figma updates and the coexistence of older styles further increase the workload, making manual verification not only tedious but also time-consuming. Faced with these observations from my professional experience, the idea of creating a plugin capable of simplifying and optimizing this process was born.
How?
To address this issue, the plugin I developed focuses on analyzing color though Figma variables and checking spacing. It detects if each “node” (frame, stroke, text, etc.) is linked to a variable and, if not, flags it in a table grouping non-compliant “nodes”. Users can thus easily make the necessary modifications to update the associated style. A style ratio has also been integrated to calculate the percentage of variable coverage applied to the selection, allowing for a quick assessment of variable compliance with “nodes”. Regarding spacing, the plugin uses a table of values accepted by the design system (for example, 0, 2, 4, 8, 12, 16, 24, etc.) and flags any different value in the paddings or spacings of autolayout frames. Finally, an “Instances” feature detects all component instances in the selection and checks if each instance comes from the design system’s UI kit, based on a tag in the description of the parent component.
This plugin is extremely useful for designers seeking to achieve near-perfect compliance with development tokens, but also for design system managers who wish to measure and observe the adoption and good integration practices of the foundation layer of a design system. This is particularly important in a context where developers work with tokens.
Below, you will find the link to the plugin page.
https://www.figma.com/community/plugin/1343901111880993775/design-system-radar
