Design to Code
Design to code engine. A design
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..
Usage
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
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
Linting Custom Tokenizer Custom Assets Repository Custom Cache Custom Cursor Plugins
Local development
git clone https://github.com/gridaco/designto-code.git
cd designto-code
yarn
yarn editor
# visit http://localhost:6626
Trouble shooting
- update pulling -
git submodule update --init --recursive
Features
- 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
Editor (web IDE)
designtocode-editor-stateful-demo-min.mov
Visit project (./editor)
Visualization
Contributing
- See CONTRIBUTING.md for details.
architecture
- See architecture.md