gridaco/code: Design to Code Engine · GitHub

Name		Name	Last commit message	Last commit date
.github		.github
.vscode		.vscode
branding		branding
ci/report		ci/report
cli		cli
code		code
data/figma-archives		data/figma-archives
docs		docs
dsl		dsl
examples		examples
lib		lib
packages		packages
sandbox		sandbox
scripts		scripts
testing		testing
ui		ui
www		www
.gitignore		.gitignore
.gitmodules		.gitmodules
.nvmrc		.nvmrc
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
tsconfig.json		tsconfig.json
turbo.json		turbo.json
yarn.lock		yarn.lock

Repository files navigation

Design to Code

Design to code engine. A design ✌️ code standard.

Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.

npx designto react https://www.figma.com/files/XXX

Or.. 👩‍💻 Try designto-code from browser IDE

Usage

npm i -g @designto/cli

# react + figma example
designto react https://www.figma.com/files/XXX -o mypage.tsx

Integrated usage

Assistant (Figma plugin) - visit assistant
code.grida.co (Web IDE for frontend development)
grida CLI
@designto/cli

Supported Design Tools

We support importing designs from Figma with our figma-sdk. You can also design components with scenes DSL, or use our built-in drag & drop editor.

Platforms / Frameworks

Frameworks		channel	bundler	reflect-ui	material-ui	tailwind	packager
ReactJS	✅	stable	esbuild	(wip)	(wip)	(wip)	npm, local, git
Flutter	✅	beta	dart-services	(wip)	Yes (native)	No	pub, local, git
React Native	✅	beta	expo	(wip)	No	No	expo, local, git
SolidJS	✅	beta	esbuild	(wip)	No	(wip)	npm, local, git
Vanilla (html/css)	✅	stable	vanilla	(wip)	No	(wip)	local, cdn
Svelte	✅	beta	svelte	(wip)	No	(wip)	npm, local, git
Vue	(wip)	dev	vue	(wip)	No	(wip)	npm, local, git
Android (Jetpack)	(wip)	dev	Not supported	(wip)	Yes (native)	No	local, git
iOS (SwiftUI)	(wip)	dev	Not supported	(wip)	No	No	local, git

React

ReactJS
styled-components	✅
@emotion/styled	✅
css-modules	✅
inline-css	✅
@mui/material	(wip)
breakpoints	(wip)
components	(wip)

ReactNative

ReactNative
StyleSheet	✅
styled-components/native	✅
@emotion/native	✅
react-native-linear-gradient	(wip)
react-native-svg	(wip)
expo	(wip)

Vanilla (html/css)

Vanilla
reflect-ui	right-aligned
css	✅
scss	are neat

Flutter

Flutter
material	✅
cupertino	(wip)
reflect-ui	(wip)

Svelte

Svelte
styled-components	✅
@mui/material	(wip)

Vue
styled-components	✅
@mui/material	(wip)

SolidJS

Solid
solid-styled-components	✅
inline-css	✅

iOS Native

iOS
SwiftUI	(wip)

Android Native

Android
Jetpack Compose	(wip)

Usage

REST API
Linting (coming soon)
Custom Tokenizer (coming soon)
Custom Assets Repository (coming soon)
Custom Cache (coming soon)
Custom Cursor (coming soon)
Plugins (coming soon)

Running locally

git clone https://github.com/gridaco/code.git
cd code

yarn
yarn editor
# visit http://localhost:6626

Trouble shooting

Our visual testing library uses node-canvas, which requires some additional dependencies. If you run into issues, please see the node-canvas documentation

If you see error like this while installing dependencies,

node-pre-gyp ERR! node -v v18.17.0
node-pre-gyp ERR! node-pre-gyp -v v1.0.10
node-pre-gyp ERR! not ok

Try this

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
brew install python@2 # since python2 is no longer available on brw, you can also use this link. https://www.python.org/downloads/release/python-2718/

Trouble shooting