jxnblk / Figma Theme
Generate development-ready theme JSON files from Figma Styles
Stars: ✭ 130
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Figma Theme
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+5381.54%)
Mutual labels: tokens, design-systems, css-in-js
Figma Tokens
Official Repo of the Figma Plugin 'Figma Tokens'
Stars: ✭ 134 (+3.08%)
Mutual labels: tokens, styles
design-tokens-generator
Create your Semantic Style Variables (Universal language for developers and designers).
Stars: ✭ 41 (-68.46%)
Mutual labels: design-systems, tokens
system-ui.com
Standards for creating consistent, interoperable user interfaces
Stars: ✭ 64 (-50.77%)
Mutual labels: design-systems, css-in-js
Design System
Priceline.com Design System
Stars: ✭ 604 (+364.62%)
Mutual labels: design-systems, css-in-js
veel
Base react styling components using fela with a design system
Stars: ✭ 26 (-80%)
Mutual labels: design-systems, css-in-js
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-60%)
Mutual labels: css-in-js, styles
foundational-design-system-proto
A prototype for a foundational design system at Shopify
Stars: ✭ 82 (-36.92%)
Mutual labels: design-systems, tokens
Design System Utils
👩🎨 Access your design tokens with ease
Stars: ✭ 465 (+257.69%)
Mutual labels: tokens, css-in-js
Paris
Define and apply styles to Android views programmatically
Stars: ✭ 1,716 (+1220%)
Mutual labels: design-systems, styles
Styled By
Simple and powerful lib to handle styled props in your components
Stars: ✭ 122 (-6.15%)
Mutual labels: styles, css-in-js
Evergreen
🌲 Evergreen React UI Framework by Segment
Stars: ✭ 11,340 (+8623.08%)
Mutual labels: design-systems
Patternlab Edition Node Webpack
The webpack wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
Stars: ✭ 122 (-6.15%)
Mutual labels: design-systems
Vue Cion Design System
CION - Design system boilerplate for Vue.js
Stars: ✭ 119 (-8.46%)
Mutual labels: design-systems
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+8107.69%)
Mutual labels: design-systems
Skin
Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
Stars: ✭ 126 (-3.08%)
Mutual labels: styles
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-10.77%)
Mutual labels: styles
Styled Jsx Plugin Sass
Plugin to add Sass support to styled-jsx. Warning this is a Proof Of Concept plugin.
Stars: ✭ 115 (-11.54%)
Mutual labels: css-in-js
Styled Typography
Typograpy components for react and styled-components
Stars: ✭ 113 (-13.08%)
Mutual labels: css-in-js
figma-theme
Generate development-ready theme JSON files from Figma Styles
- Parse Styles from a Figma file ID
- Works with Styled System and other CSS-in-JS setups
- Built with figma-js
npm i figma-theme
Getting Started
- Install
figma-themeas a dev dependency in your project - Get a personal access token for the Figma API
- Create a
.envfile with your access token
FIGMA_TOKEN=<personal-access-token>- Alternatively add an environment variable for
FIGMA_TOKEN
- Add an npm run script:
figma-theme <figma-file-id> - Run the script to create a
theme.jsonfile based on Figma Styles
Options
Options can be passed as CLI flags or included in a figma-theme object in your package.json
-
--out-dir: output directory (default current working directory) -
--metadata: include additional metadata from the Figma API
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].