design-to-code
what is design to code and how does it work?
DESIGN TO CODE
- figma to flutter
- figma to react
- figma to html/css
- figma to vue
- sketch to flutter
- sketch to react
- sketch to vue
- sketch to html/css
By "design". What does it mean?
The term design here stands for the UI/UX design source file made by human designers. There are various tools currently available such like Figma, Sketch, XD, and Upcomming Grida Studio
Taking more deeper look, the design data tree is represented with Reflect -- A design standard that Grida developed / adopted. (Yes, this is that Reflect that also provided as a UI Library)
TL;DR -- You can convert your design to code from Figma, Sketch, and XD.
By "code". What does it mean?
The term code here stands for some language or syntax tree that is adoptable for standard development environment. We supprort Flutter, React, HTML/CSS, Vuew, Svelte.
Taking more deeper look, Reflect Core DSL represents the layout, component, data, styling as a single tree.
Making Bridged Design to code as a industry standard
We are maintaining Design to code as an open source like all other technology and projects so it can be placed as industry standard.
The design standard is based on "Refect Design" which is a design system / framework that can be used for design and both development. It's philosophy, goal is to be a uni design system that can represent all designs in the world. that's why we put so much time to make standard structure by studying 10 most popuar design systems, 20 front end design frameworks and the base computer graphics standard.
For example, Reflects defines button as som sort of abstract concept that contains speciific rules. This rule and definitoin is based on more than 40,000 Real world button examples so that it can be solid and represent all the buttons available in the world.