Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javierarce/figma-components-analyzer
A tool to improve consistency and structure to design systems property names
https://github.com/javierarce/figma-components-analyzer
components design design-system figma figma-api
Last synced: 6 days ago
JSON representation
A tool to improve consistency and structure to design systems property names
- Host: GitHub
- URL: https://github.com/javierarce/figma-components-analyzer
- Owner: javierarce
- License: gpl-3.0
- Created: 2024-08-30T15:42:29.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-09-12T13:00:33.000Z (21 days ago)
- Last Synced: 2024-09-24T00:02:20.993Z (10 days ago)
- Topics: components, design, design-system, figma, figma-api
- Language: JavaScript
- Homepage: https://javierarce.github.io/figma-components-analyzer/
- Size: 93.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Figma Components Analyzer
This project provides a tool to analyze component variants in a Figma file. It
extracts information about component properties, their types, possible values,
and usage across different components.
The goal of this tool is to help design teams identify inconsistencies and
potential improvements in the naming, structure, and usage of component
variants. This information is valuable for ensuring consistency and
predictability in the design system.
### Online version
You can run the tool directly from [this page](https://javierarce.github.io/figma-components-analyzer).
## Features
- Fetches component data from a specified Figma file
- Exposes variant properties and values across all components in the file
- Provides a downloadable version of the analysis as a JSON file
## Prerequisites
- A Figma account and a personal access token
- A Figma file ID that you want to analyze
## Installation
1. Clone this repository:
```
git clone https://github.com/javierarce/figma-components-analyzer.git
cd figma-components-analyzer
```
2. Install dependencies:
`npm install` or `yarn`
3. Create a `.env` file in the root directory with the following content:
```
FIGMA_TOKEN=your_figma_personal_access_token
FIGMA_FILE=your_figma_file_id
```
Replace `your_figma_personal_access_token` with your Figma personal access
token and `your_figma_file_id` with the ID of the Figma file you want to
analyze.
## Usage
Run the analysis script:
`node index.js` or `yarn start`
This will output the analysis to the console and also save it as `analysis.json` in the project directory.
## Output
The analysis provides the following information for each property:
- Property name
- Number of times the property is used
- Property type (e.g., `BOOLEAN`, `VARIANT`, `INSTANCE_SWAP`)
- Possible values for the property
- List of components that use the property
## Example Output
```
Variant property analysis
State (15)
Type: VARIANT
Values: Default, Hover, Pressed, Disabled
Used in: Button, Checkbox, Radio Button
Size (12)
Type: VARIANT
Values: Small, Medium, Large
Used in: Button, Input Field, Dropdown
Show icon (4)
Type: BOOLEAN
Used in: Button, Checkbox
...
```
## Contributing
Contributions are welcome! Please feel free to submit a pull request.