Back to Plugins
OxyScan

OxyScan

Design System compliance scanner

oxygencompliancedoctolibdesign-systemscan

Plugin Preview

OxyScan preview

About this plugin

IntroductionOxyScan is a powerful tool designed to allow users to scan a Figma page and provide an overall Design System compliance score and flag non-compliant layers.We can then access those layers in 1 click and update them to make them compliant. This tool enables designers to perform a quick and easy check of their file before handing it over to the developers,InstallationTo install the OxyScan Plugin, follow these steps:Open FigmaGo to the “Plugins” menu.Search for OxyScanClick the “Install” button next to the plugin’s name.User GuideOxyScan is based on a naming convention. In order to be able to compute a Design System Compliance score you must follow this nomenclature and prefix each component according to their type.Design System Components: 💠Modules Components: 🧩Helper Components: 🧰Differences between DS components, Modules and HelpersDesign System are the atomic part of your design systemModules are more complex organisms that are including business logic. They are composed of DS components, here to fasten the Product Designers workflow.Helpers are components regularly used by Product Designers that don't require to enter in the DS, such as OS mobile keyboards, mouse cursors...Run a Scan Follow this steps to perform a analyse on your Figma pageOn your Figma page, click on the Ressources Menu, then PluginsSelect OxyScan pluginThe analysis will run automatically and the results displayed right after.How is the compliance calculated?Oxyscan is scanning each layer one by one.If the scanner if finding:a layer with 💠 as prefix, +1 is added to DS complianta layer with 🧩 as prefix, +1 is added to Modulesa layer with 🧰 as prefix, the layer is ignoreda hidden layer, the layer is ignoreda visible layer without prefixed icon and without children layer, +1 is added to not complianta visible layer without prefixed icon with children layer, the layer is ignored and the scan goes the children layer.a font with declared Font style and Color (from Styles or Variables), +1 is added to DS complianta font with one element customised, +1 is added to non-DS compliantAll Figma feature are skipped:Figjam arrowsFrames, Groups, Auto-layouts, Sections SupportIf you need further assistance, you can reach out to us by using this mail: [email protected]

Plugin Details

Version14
CreatedAugust 1, 2022
Last UpdatedJuly 8, 2024
Categorydesign-tools-other
CreatorMatthieu Vignolle
Stats257 installs, 51 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • none