https://github.com/antonvasin/styled-system-figma
Generate theme.js from Figma file
https://github.com/antonvasin/styled-system-figma
design-systems figma styled-components styled-system typescript
Last synced: 3 months ago
JSON representation
Generate theme.js from Figma file
- Host: GitHub
- URL: https://github.com/antonvasin/styled-system-figma
- Owner: antonvasin
- License: mit
- Created: 2018-11-17T11:22:35.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2021-08-03T16:16:24.000Z (almost 4 years ago)
- Last Synced: 2025-02-01T23:35:09.860Z (3 months ago)
- Topics: design-systems, figma, styled-components, styled-system, typescript
- Language: TypeScript
- Homepage:
- Size: 510 KB
- Stars: 28
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# styled-system-figma
Generate theme file for [`styled-system`](https://github.com/jxnblk/styled-system) from [Figma](https://www.figma.com) file.
## Install
```shell
yarn add styled-system-figma
# or
npm install --save styled-system-figma
```
## Example
```ts
import generateTheme from 'styled-system-figma';
import * as Figma from 'figma-js';
const fileId = 'FILE_ID';
const client = Figma.Client({
personalAccessToken: 'FIGMA_TOKEN',
});
client.file(fileId).then(({ data }) => {
const theme = generateTheme(data);
fs.writeFileSync('theme.js', JSON.stringify(theme, null, 2));
});
```
## TODO
- [x] `colors`
- [x] `lineHeights`
- [x] `radii`
- [x] `fontSizes`
- [x] `fontWeights`
- [x] `letterSpacings`
- [ ] `fonts`
- [x] `boxShadows`
- [ ] parse styles for names
- [ ] `textVariants`