Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gridaco/code
Design to Code Engine
https://github.com/gridaco/code
code-generation design-to-code figma figma-html figma-react flutter works-with-flutter works-with-react works-with-svelte works-with-vue
Last synced: 23 days ago
JSON representation
Design to Code Engine
- Host: GitHub
- URL: https://github.com/gridaco/code
- Owner: gridaco
- License: apache-2.0
- Created: 2021-02-26T21:56:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-24T10:04:46.000Z (8 months ago)
- Last Synced: 2024-05-23T02:23:27.885Z (5 months ago)
- Topics: code-generation, design-to-code, figma, figma-html, figma-react, flutter, works-with-flutter, works-with-react, works-with-svelte, works-with-vue
- Language: TypeScript
- Homepage: https://grida.co/code
- Size: 31.6 MB
- Stars: 210
- Watchers: 6
- Forks: 26
- Open Issues: 89
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- stars - gridaco/code - Design to Code Engine (TypeScript)
README
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](https://code.grida.co)**
## Usage
```bash
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](https://github.com/gridaco/assistant)
- [code.grida.co](https://code.grida.co) (Web IDE for frontend development)
- [grida CLI](https://github.com/gridaco/cli)
- [@designto/cli](./cli)
## Supported Design Tools
We support importing designs from Figma with our [figma-sdk](https://github.com/gridaco/figma-sdk). You can also design components with [scenes](https://github.com/gridaco/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](./www/README.md)
- 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](https://github.com/Automattic/node-canvas)
If you see error like this while installing dependencies,
```txt
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
```bash
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](https://github.com/Automattic/node-canvas/issues/1733#issuecomment-761703018)
- [Reference#1 / node-canvas/issues/1662](https://github.com/Automattic/node-canvas/issues/1662#issuecomment-1465269869)
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)
https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov
Visit project ([`./editor`](./editor/))
Visualization
## Contributing
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
**architecture**
- See [architecture.md](./architecture.md)