search

gridaco / code

Design to Code Engine
https://grida.co/code
Apache License 2.0
225 stars 30 forks source link
code-generation design-to-code figma figma-html figma-react flutter works-with-flutter works-with-react works-with-svelte works-with-vue

readme

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

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) |
Vue3 | **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

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 - update pulling - `git submodule update --init --recursive`

Features

Layouts
Animations (motions)
Constraints
Breakpoints

Editor (web IDE)

https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov

Visit project (./editor)

Visualization ![](./branding/shot-1.png) ![](./branding/shot-1.png) ![](./branding/shot-2.png) ![](./branding/shot-3.png) ![](./branding/shot-4.png) ![](./branding/shot-5.png) ![Grida's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)

Contributing

architecture