OxyScan

About this plugin

Introduction

OxyScan 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,

Installation

To install the OxyScan Plugin, follow these steps:

1. Open Figma
2. Go to the “Plugins” menu.
3. Search for OxyScan
4. Click the “Install” button next to the plugin’s name.

User Guide

OxyScan 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 Helpers

• Design System are the atomic part of your design system
• Modules 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 page

1. On your Figma page, click on the Ressources Menu, then Plugins
2. Select OxyScan plugin
3. The 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 compliant
• a layer with 🧩 as prefix, +1 is added to Modules
• a layer with 🧰 as prefix, the layer is ignored
• a hidden layer, the layer is ignored
• a visible layer without prefixed icon and without children layer, +1 is added to not compliant
• a 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 compliant
• a font with one element customised, +1 is added to non-DS compliant

All Figma feature are skipped:

• Figjam arrows
• Frames, Groups, Auto-layouts, Sections

Support

If you need further assistance, you can reach out to us by using this mail: [email protected]