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

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
• 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