Back to Plugins
Design System Radar

Design System Radar

Design System compliance made easy with Design System Radar for Figma

compliancevariablescheckerdesign systemstyles

Plugin Preview

Design System Radar preview

About this plugin

Overview

Design System Radar is a specialized Figma plugin tailored for users of design system. This plugin enhances the user experience by providing robust tools for ensuring compliance with design system's standards, particularly focusing on spacing and style variables. It's an essential tool for designers who aim to maintain high levels of consistency and precision in their designs.


Features

  • Spacing Analysis: The plugin automatically identifies spacing discrepancies within selected frames, instances, and components. It compares these against design system's established spacing guidelines, flagging any non-conformities for review.
  • Style Variable Analysis: Design System Radar detects elements in your designs that are not bound to style variables. This feature is crucial for maintaining uniformity across your design projects.
  • Navigation for Quick Corrections: Users can quickly navigate to any elements that do not conform to design system directly from the plugin's interface, streamlining the design refinement process.


How to use?

Add [ds-radar]to the description of your main components so that they are detected by the "Instances" part of the plugin. And you can provide your own dimension system by entering values (in px) in the "Dimension" part of the plugin.

Plugin Details

Version2
CreatedFebruary 26, 2024
Last UpdatedJuly 1, 2024
Categorydesign-systems
CreatorMartin Molcrette
Stats222 installs, 50 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • https://cdn.tailwindcss.com