Struggling to maintain consistency in your Figma files? With Componly, you can ensure your designs align with your design system, reducing unnecessary custom components and keeping your files ready for development. Follow these steps to audit your Figma files and improve design system adoption.

https://www.youtube.com/watch?v=9ZGpU3exVJs&t=44s

Step 1: Gather Your Credentials

1. Design System ID:

   Obtain your design system's unique ID and jot it down for later use.

2. Figma File ID:

   Navigate to the Figma file you want to scan, and grab its file ID. You can find detailed instructions on how to do this in Componly's documentation under the Figma tab.

3. Figma Personal Token:

   Generate your Figma personal token. Follow Figma's token creation guide for this.

Step 2: Run the Componly Scan

1. Install the Componly CLI:

   If you haven’t already, install the CLI tool:

   npm install -g @componlyco/cli
   

2. Run the Scan Command:

   In your terminal, run the following command:

   npx componly run
   

   Follow the prompts:

   • Enter your Componly key.
   • Provide your Figma personal token.
   • Input the Figma file ID.
   • Optionally, input a specific node or container ID within the file. Skip this by pressing Enter to scan the entire file.
   • Enter your Design System ID.

Step 3: Generate the Adoption Report

1. Choose Report Options:

   When prompted, select the type of report:

   • Choose "Default" unless you need a time-based report (requires at least two scans of the same file).

2. Review the Report:

   The report will include:

   • Adoption Rate: Percentage of components in the file that align with the design system.
   • Component Usage:
     • Most-used design system components.
     • Most-used non-design system components.
   • Styles: Design system and non-design system styles.
   • Deprecated Components: Any outdated components still in use.

Step 4: Dive Deeper with a Full Inventory

If you need a complete inventory of all components (design system and custom) used in the file, run an additional command to generate a detailed JSON file.

Follow the instructions in the CLI to provide the path of the previously generated JSON file.

Step 5: Review and Collaborate