All Projects → antonvasin → styled-system-figma

antonvasin / styled-system-figma

Licence: MIT License
Generate theme.js from Figma file

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to styled-system-figma

Welcome Ui
Customizable design system of @wttj with react • styled-components • styled-system • reakit
Stars: ✭ 256 (+884.62%)
Mutual labels:  design-systems, styled-components
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+7896.15%)
Mutual labels:  styled-components, styled-system
web-starter-kit
An opinionated starter kit with styled-system, graphql-hooks, mobx and nextjs (PWA)
Stars: ✭ 17 (-34.62%)
Mutual labels:  styled-components, styled-system
rebass
⚛️ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+30069.23%)
Mutual labels:  styled-components, styled-system
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+27307.69%)
Mutual labels:  design-systems, styled-components
Rimble Ui
React components that implement Rimble's Design System.
Stars: ✭ 357 (+1273.08%)
Mutual labels:  design-systems, styled-components
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
Stars: ✭ 1,835 (+6957.69%)
Mutual labels:  styled-components, styled-system
Design System
Priceline.com Design System
Stars: ✭ 604 (+2223.08%)
Mutual labels:  design-systems, styled-components
Pulse Boilerplate
React based boilerplate for creating scalable and well documented Design Systems. Live demo https://pulse.heartbeat.ua
Stars: ✭ 92 (+253.85%)
Mutual labels:  design-systems, styled-components
veel
Base react styling components using fela with a design system
Stars: ✭ 26 (+0%)
Mutual labels:  design-systems, styled-system
meetup
For organizing the design systems meetup in NYC.
Stars: ✭ 23 (-11.54%)
Mutual labels:  design-systems
currency-converter
💰 Easily convert between 32 currencies
Stars: ✭ 16 (-38.46%)
Mutual labels:  styled-components
personal-blog
✍️ 个人技术博客
Stars: ✭ 79 (+203.85%)
Mutual labels:  styled-components
iconoir
A Simple and Definitive Open-Source Icons Library
Stars: ✭ 2,429 (+9242.31%)
Mutual labels:  figma
next-ts-graphql-apollo-starter
An opiniated Next powered starter which include support for Apollo with GraphQL SSR support, codegen, styled component / system, framer motion and Cypress
Stars: ✭ 18 (-30.77%)
Mutual labels:  styled-system
ModernWpf
Modern styles and controls for your WPF applications without need WinRT
Stars: ✭ 65 (+150%)
Mutual labels:  styled-components
satchel
The little bag of CSS-in-JS superpowers
Stars: ✭ 14 (-46.15%)
Mutual labels:  styled-components
www
🦁 Source files for my personal site
Stars: ✭ 64 (+146.15%)
Mutual labels:  styled-components
saving-goal
React.js, Next.js and TypeScript studies. In this project I tried to apply knowledges from some courses I've taken. Testing with react testing library, styling with styled components, etc.
Stars: ✭ 15 (-42.31%)
Mutual labels:  styled-components
hls-downloader
Web Extension for sniffing and downloading HTTP Live streams (HLS)
Stars: ✭ 834 (+3107.69%)
Mutual labels:  styled-components

styled-system-figma

Generate theme file for styled-system from Figma file.

Install

yarn add styled-system-figma
# or
npm install --save styled-system-figma

Example

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

  • colors
  • lineHeights
  • radii
  • fontSizes
  • fontWeights
  • letterSpacings
  • fonts
  • boxShadows
  • parse styles for names
  • textVariants
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].