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.tsx
Integrated usage
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
|
ReactJS | |
---|---|
styled-components |
✅ |
@emotion/styled |
✅ |
css-modules | ✅ |
inline-css | ✅ |
@mui/material |
(wip) |
breakpoints | (wip) |
components | (wip) |
ReactNative | |
---|---|
StyleSheet |
✅ |
styled-components/native |
✅ |
@emotion/native |
✅ |
react-native-linear-gradient |
(wip) |
react-native-svg |
(wip) |
expo |
(wip) |
Vanilla | |
---|---|
reflect-ui | right-aligned |
css | ✅ |
scss | are neat |
Flutter | |
---|---|
material | ✅ |
cupertino | (wip) |
reflect-ui | (wip) |
Svelte | |
---|---|
styled-components |
✅ |
@mui/material |
(wip) |
Vue | |
---|---|
styled-components |
✅ |
@mui/material |
(wip) |
Solid | |
---|---|
solid-styled-components |
✅ |
inline-css |
✅ |
iOS | |
---|---|
SwiftUI | (wip) |
Android | |
---|---|
Jetpack Compose | (wip) |
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/
git submodule update --init --recursive
Visit project (./editor
)
architecture