jxnblk/figma-theme

This repository has been archived on 04/Jul/2019
Stars
137
Rank 266,121 (Top 6 %)
Language
JavaScript
Created over 6 years ago
Updated over 6 years ago

jxnblk/figma-theme

jxnblk

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Generate development-ready theme JSON files from Figma Styles

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-theme as a dev dependency in your project
Get a personal access token for the Figma API
Create a .env file 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.json file 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

mdx-deck

♠️ React MDX-based presentation decks

loading

This could take a while

colorable

Color combination contrast tester

reflexbox

Moved to https://rebassjs.org

fitter-happier-text

Performant, fully fluid headings

repng

React component to PNG converter

palx

🌈 Automatic UI Color Palette Generator

geomicons-open

Open Source Icons for the Web

ok-mdx

Browser-based MDX editor

ram

⚛️ React Application Manager: create and run React (and other) applications – no command line or build setup required

react-x-ray

React CSS Layout Debugger

macro-components

Create flexible layout and composite UI components without the need to define arbitrary custom props

plangular

Create custom SoundCloud players with HTML & CSS

shade

Gradient explorer

mdx-docs

📝 Document and develop React components with MDX and Next.js

paths

Build and edit SVGs in the browser

tachyons-components

React UI components powered by Tachyons with a styled-components like API

mdx-go

⚡ Lightning fast MDX-based dev server for progressive documentation

microicon

SVG icon microservice

static-react

Zero-configuration CLI React static renderer

reline

React SVG line icon components

react-css-grid

React layout component based on CSS Grid Layout and built with styled-components

refunk

🎧 Simple React functional setState

hello-color

gravitons

layouts

Grab-and-go layouts for React

contrast-swatch

🅰️ Image microservice for color contrast information

axs

Stupid simple style components for React

rgx

React grid system based on minimum and maximum widths

nano-component

Fast & simple React component styles in under 1kb

mdx-blocks

vhs

Post-Future CSS Animations

papercraft

Hand-coded SVG lettering

blog

Personal blog on design & development

react-icons

Building SVG Icons with React

system-components

https://github.com/jxnblk/styled-system/tree/master/system-components

Heather

A HyperMinimal Jekyll Theme

rmdi

React Material Design Icons – built with Pixo, Styled Components, and Styled System

geomicons-wired

Geometric Icons

react-static-site-boilerplate

Demo boilerplate for generating a static site with React

rebranch

React context-based, conditional rendering components for A/B experiments

Ashley

A Readable & Responsive Theme for Tumblr

ejsx

Pure JSX templates for rendering static HTML

superbox

DEPRECATED: See https://rebassjs.org/reflexbox instead

live-doc

💫 Convert markdown to live React demos

gatsby-themes

Twipster

css-to-object

dropbar

react-geomicons

React icon component for Geomicons Open

nano-style

React functional CSS-in-JS

horror

😱 React HTML elements with CSS-in-JS

SoundRad

A Radically Simpler & Faster SoundCloud Player

rebass-recomposed

Spectral

Click the Rainbow

skullcat

a avatar fur mrmrs

_gx

DEPRECATED Minimal responsive React grid system based on the Fab Four Technique.

vim-mdx-js

stepkit

bumpkit

rrx

⚛️ Minimal React router using higher order components

type-system

f0

understyle

Functional style utilities for authoring JavaScript style objects

gatsby-theme-mdx-blog

microbeats

Beats Created in Under an Hour

hypercolors

Generative hyperterm color theme

react-cxs

ϟ Alternative React.createElement function which allows style objects to be passed to the className prop to generate CSS

formula

CSS calculator for bulletproof form and button styles that always line up

reaxe

🍬 Syntactic sugar for React.createElement and JSX alternative

tempo

Responsive Grid System

diet-cola

A lightweight styled-components clone for creating React UI component primitives.

hyperterminator

Hyperterm theme for cybernetic organisms

react-fitter-happier-text

React component for fully fluid headings

css-scss

Convert CSS syntax to SCSS with calc, variables, and custom media queries

react-owl

🦉 React layout component based on the lobotomized owl selector and built with styled-components

robox

Higher-order React component for adding style helper props based on understyle

monochrome

hyp

ϟ Functional UI component microlibrary with ES6 tagged template literals

superstyle

CSSOM-JS utility library

universal-components

scrs

hidden-styled

grays

colorable-app

Color constrast checker

principles

My principles of web design

object-style

redeck

DEPRECATED: see https://github.com/jxnblk/mdx-deck

react-component-permutations

Uses propTypes to create an array of React component props to display various permutations.

tag-hoc

React HOC to set an element's tag and remove props

cxs-components

Styled UI component primitives for React - built with cxs

kenburns

Sass mixin for Ken Burns effect background images

json-react

react-media-context

React higher-order component (HOC) to provide context for the currently matched media query.

watch

In case you forget what time it is

react-simple-icons

path-ast

SVG path element command parser/stringifier

simple-modular-scale

Modular scale generator based on an array of ratios

typography-system

mdx-themes