# Quick Guide - FigmaMind
This guide explains in a simple and direct way how FigmaMind works.
## What is it?
It's a tool that extracts components from Figma and transforms them into a standardized JSON format that can be used by developers in their applications.
## How does it work?
1. **Extraction**: The system accesses the Figma API and extracts component data
2. **Processing**: Analyzes the data structure and identifies components
3. **Transformation**: Applies specific rules for each component type
4. **Serialization**: Saves processed data in standardized JSON format
## Simplified Flow
```
Figma URL → Extractor → Raw Data → Processor → Processed Data
```
## How to use?
### 1. Extract components from Figma
```bash
node scripts/fetch-figma.js https://www.figma.com/design/your_figma_file
```
This command will:
- Fetch data from the Figma file
- Process this data to extract components
- Save the results in `examples/output/`
### 2. Use the API
Start the server:
```bash
node src/index.js
```
Send a request to transform components:
```bash
curl -X POST http://localhost:3000/transform \
-H "Content-Type: application/json" \
-d '{"figmaUrl":"https://www.figma.com/design/your_figma_file"}'
```
## Main Files
- **scripts/fetch-figma.js**: Script to fetch and process data from Figma
- **src/index.js**: API server
- **src/services/figmaService.js**: Figma API access service
- **src/processor/processor.js**: Component processor
- **src/transformers/index.js**: Transformers for each component type
## What can you do with this?
1. **Design Systems**: Extract components from a Design System in Figma and keep your code updated
2. **Documentation**: Generate automatic component documentation
3. **Integration**: Integrate Figma designs directly into your applications
4. **Versioning**: Track component changes over time
## Supported Component Types
- Buttons
- Headers
- Lists
- Texts
- Input fields
- Radio buttons
- Code fields
## Practical Usage Example
1. **Designer creates a component in Figma**
2. **Developer runs the script**:
```bash
node scripts/fetch-figma.js https://www.figma.com/design/project_file
```
3. **System extracts and processes the component**
4. **Developer uses the resulting JSON in their application**
## Tips
- Use the `node-id` parameter in the Figma URL to extract only a specific component
- Check the examples in `examples/output/` to understand the data format
- Documentation files contain detailed information about internal workings
## Need Help?
Consult these files:
- `README.md`: General information about the project
- `FigmaMind-process.md`: Technical details about the process
- `test-report.md`: Test results