Skip to content

gridaco/code

Folders and files

NameName
Last commit message
Last commit date
Jul 7, 2023
Jun 1, 2023
Apr 14, 2023
Aug 8, 2022
Nov 10, 2023
May 31, 2023
Apr 14, 2023
May 25, 2023
Nov 3, 2022
Dec 13, 2023
Jun 17, 2023
Jul 7, 2023
Aug 1, 2022
Jul 4, 2023
Dec 11, 2023
May 24, 2023
Mar 29, 2023
Dec 1, 2022
Jul 5, 2023
May 29, 2023
Aug 2, 2022
Jul 28, 2022
Jun 12, 2023
Dec 1, 2022
Feb 26, 2021
Dec 12, 2023
Dec 1, 2022
Jun 18, 2023
Aug 2, 2022
Aug 3, 2022
Dec 13, 2023

Repository files navigation

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

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

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

Grida's design to code. design node visualization snapshot

Contributing

architecture