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) 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 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/ Reference#2 / node-canvas/issues/1733 Reference#1 / node-canvas/issues/1662 Trouble shooting update pulling - git submodule update --init --recursive Features preprocessing lint layout lint naming lint design layouts animations constraints breakpoints code documentation tsdoc single-file module multi-file module Layouts Animations (motions) Constraints Breakpoints Editor (web IDE) designtocode-editor-stateful-demo-min.mov Visit project ( ./editor ) Visualization Contributing See CONTRIBUTING.md for details. architecture See architecture.md
