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
npm i -g @designto/cli
# react + figma example
designto react https://www.figma.com/files/XXX -o mypage.tsxIntegrated usage
- Assistant (Figma plugin) - visit assistant
- code.grida.co (Web IDE for frontend development)
- grida CLI
- @designto/cli
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.
| 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) |
- 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)
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
- preprocessing
- lint
- layout lint
- naming lint
- lint
- design
- layouts
- animations
- constraints
- breakpoints
- code
- documentation
- tsdoc
- single-file module
- multi-file module
- documentation
Layouts
Animations (motions)
Constraints
Breakpoints
designtocode-editor-stateful-demo-min.mov
Visit project (./editor)
Visualization
- See CONTRIBUTING.md for details.
architecture
- See architecture.md