https://github.com/nqh-public/scheemer
Framer Plugin for exporting component metadata and structure as JSON
https://github.com/nqh-public/scheemer
component-export design-tools framer framer-plugin json-export metadata react typescript
Last synced: 29 days ago
JSON representation
Framer Plugin for exporting component metadata and structure as JSON
- Host: GitHub
- URL: https://github.com/nqh-public/scheemer
- Owner: nqh-public
- License: mit
- Created: 2025-10-31T08:32:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-31T08:39:34.000Z (8 months ago)
- Last Synced: 2025-10-31T10:28:22.168Z (8 months ago)
- Topics: component-export, design-tools, framer, framer-plugin, json-export, metadata, react, typescript
- Language: TypeScript
- Size: 92.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Scheemer - Framer Component Exporter
Framer Plugin that exports component metadata and structure as JSON files.
## What It Does
Runs inside Framer editor to extract:
- **Component structure** - Nested children hierarchy
- **Visual properties** - Colors, backgrounds, gradients, borders, opacity
- **Layout properties** - Flex, padding, gap, alignment, constraints
- **Text properties** - Fonts, sizes, weights, colors, alignment
- **Position/sizing** - x, y, width, height, pins, aspect ratios
Supports:
- Regular frames
- Component instances (with control props)
- Component masters (when editing components)
## Quick Start
### 1. Install Dependencies
```bash
cd framer-plugin
npm install
```
### 2. Start Development Server
```bash
npm run dev
```
Starts plugin at `https://localhost:5173`
### 3. Load in Framer
1. Open Framer Desktop App
2. Open your project
3. Click **Plugins** in toolbar
4. Select **Development** → **Open Plugin URL**
5. Enter: `https://localhost:5173`
6. Accept SSL certificate
### 4. Use Plugin
1. Select frames/components on canvas
2. Plugin lists them with metadata
3. Check items to export
4. Click **Download** → Downloads JSON files
## Output Format
Each exported file contains:
```json
{
"name": "Button",
"type": "component-instance",
"nodeType": "ComponentInstanceNode",
"structure": {
"id": "abc123",
"name": "Button",
"visible": true,
"locked": false,
"childrenCount": 3,
"children": [...]
},
"properties": {
"width": 120,
"height": 40,
"backgroundColor": "#007AFF",
"borderRadius": 8,
"padding": 12,
...
},
"componentInfo": {
"identifier": "component-id",
"componentName": "Button",
"controls": {...}
}
}
```
## Full Documentation
See [framer-plugin/README.md](./framer-plugin/README.md) for:
- Complete installation guide
- Plugin UI features
- Data structure reference
- Development workflow
- Troubleshooting
## Use Cases
**Design-to-Code Translation**:
- Export component specs as JSON
- Parse structure/properties programmatically
- Generate React components matching design
**Component Documentation**:
- Extract component variants and their properties
- Document design system components
- Track component structure changes
**Design QA**:
- Compare exported specs against implementation
- Validate dimensions, spacing, colors
- Verify component hierarchy
## Project Structure
```
apps/scheemer/
├── README.md # This file
└── framer-plugin/ # Framer Plugin source
├── src/
│ ├── app.tsx # Main plugin UI (568 lines)
│ ├── main.tsx # Entry point
│ └── components/ # UI components (Button, Checkbox, ScrollArea)
├── package.json
├── vite.config.ts
└── README.md # Plugin documentation
```
## Contributing
Contributions are welcome! Please:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
## License
MIT - See [LICENSE](LICENSE) file for details