Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/makamekm/figma-react
Figma to React Exporter
https://github.com/makamekm/figma-react
cli figma javascript nodejs react
Last synced: 4 months ago
JSON representation
Figma to React Exporter
- Host: GitHub
- URL: https://github.com/makamekm/figma-react
- Owner: makamekm
- License: mit
- Created: 2020-02-18T14:36:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T19:43:38.000Z (about 2 years ago)
- Last Synced: 2024-09-29T06:01:28.997Z (4 months ago)
- Topics: cli, figma, javascript, nodejs, react
- Language: JavaScript
- Homepage:
- Size: 274 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React - Figma
#### This is a tool to help you export Figma project into React mockups
### Installation
`npm i -g figma-react`
### CLI Usage
`figma-react [figma-dev-token] `
or you can provide .env file with the content
```
FIGMA_FILE_KEY=...
FIGMA_DEV_TOKEN=...
FIGMA_PRESET=...
```
### Example with MobX & Gatsby
Run in your terminal the following code, but replace `` with your Figma Dev Token (You can generate it on your profile settings page)
```
npm i -g gatsby-cli figma-react
gatsby new figma-demo https://github.com/makamekm/gatsby-starter-typescript-ioc-mobx
cd figma-demo
figma-react InZsgUaqMorH2q5iapfUDK mobx
npm run dev
```
Then just put into pages/index.tsx the following code and import dependencies:
```
```
### API Usage
```
const figmaReact = require('./figma');
figmaReact.runFigmaReact(options).catch(err => {
console.error(err);
console.error(err.stack);
process.exit(1);
});
```
### Requirements
- Style JSX
### Features
- Customizable Style Plugins
- Customizable Content Plugins
- CLI tool
- Can read .env properties
# Options
- fileKey // * required
- devToken // * required
- dir // default './src/design-system'
- makeDir // default !!process.env.FIGMA_MAKE_DIR
- stylePlugins // default from './figma.style.plugins'
- contentPlugins // default from './figma.content.plugins'
- classPrefix // default 'figma-'
- delIndex // default '??'
- paramsSplitIndex // default '&'
- paramSplitIndex // default '='
- objectIndex // default '.'
- styleDescriptionDelimiter // default '!style!'
- imports // default ['import { observer } from 'mobx-react';']
- decorator // default 'observer'
- classAfterFix // default 'Generated'
- fileAfterFix // default '.generated'
- useBase64Images // default false
- typeFactory // default ({ props: componentProps }) => `string`
- prettierOptions // default
```
{
"parser": "babel",
"semi": true,
"tabWidth": 2,
"printWidth": 140,
"singleQuote": true,
"trailingComma": "none"
}
```
### Development
`npm link`
This repository uses Git Flow