GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → gridaco → designto-code

gridaco / designto-code

Licence: Apache-2.0 license
Design to code engine. A design ✌️ code standard. Supports React, Flutter and more.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Labels

sketchcode-generationflutterfigmadesign-to-codeworks-with-vueworks-with-svelteworks-with-reactworks-with-flutter

Projects that are alternatives of or similar to designto-code

Tauri
Build smaller, faster, and more secure desktop applications with a web frontend.
Stars: ✭ 25,383 (+29075.86%)
Mutual labels:  works-with-vue, works-with-svelte, works-with-react, works-with-flutter
Design-Resources
A curated list of design resources from design templates, stock photos, icons, colors, and much more.
Stars: ✭ 943 (+983.91%)
Mutual labels:  sketch, figma
Figma-to-HTML
Figma to HTML/React and truly responsive
Stars: ✭ 27 (-68.97%)
Mutual labels:  figma, design-to-code
boring-avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
Stars: ✭ 3,582 (+4017.24%)
Mutual labels:  sketch, figma
vscode
Builder.io for VSCode - turn designs into code!
Stars: ✭ 139 (+59.77%)
Mutual labels:  figma, design-to-code
tiles
Programmatic code generation
Stars: ✭ 78 (-10.34%)
Mutual labels:  code-generation
AUXify
Introduces macro/meta annotations @ aux, @ self, @ instance, @ apply, @ delegated, @ syntax and String-based type class LabelledGeneric
Stars: ✭ 25 (-71.26%)
Mutual labels:  code-generation
Sketch-Page-Logic
It can help you drawing page logic in the sketch
Stars: ✭ 24 (-72.41%)
Mutual labels:  sketch
islpy
Python wrapper for isl, an integer set library
Stars: ✭ 58 (-33.33%)
Mutual labels:  code-generation
fling
A fluent API generator
Stars: ✭ 20 (-77.01%)
Mutual labels:  code-generation
Beef
Business Entity Execution Framework
Stars: ✭ 95 (+9.2%)
Mutual labels:  code-generation
figma-plugins-stats
📈 A CLI to get live and historical stats for your Figma plugins
Stars: ✭ 53 (-39.08%)
Mutual labels:  figma
RTLPLZ
Plugin for Figma to write RTL text
Stars: ✭ 30 (-65.52%)
Mutual labels:  figma
diverseui-sketch-plugin
Fill your designs with photos of diverse users. Resource for images, avatars, and content.
Stars: ✭ 70 (-19.54%)
Mutual labels:  sketch
typed-astunparse
Python 3 AST unparser with type comments support.
Stars: ✭ 27 (-68.97%)
Mutual labels:  code-generation
graphql-x-sketch
Querying a Sketch file with the flexibility of GraphQL
Stars: ✭ 24 (-72.41%)
Mutual labels:  sketch
nmodl
Code Generation Framework For NEURON MODeling Language
Stars: ✭ 42 (-51.72%)
Mutual labels:  code-generation
FSharpWrap
Utility that automatically generates F# modules and functions based on your F# project file's references
Stars: ✭ 14 (-83.91%)
Mutual labels:  code-generation
symbol-namer
A plugin to help you rename symbol instances. Rename symbol instances to their override text values, or set and use a default name.
Stars: ✭ 17 (-80.46%)
Mutual labels:  sketch
print-export-sketchplugin
Exports a PDF for printing
Stars: ✭ 85 (-2.3%)
Mutual labels:  sketch
View All Similar Projects ➔

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

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

Architecture

Read architecture.md

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].