Design-to-code
Bridging the gap between design and development, design-to-code transforms design prototypes into functional software code.
Articles
An Efficient Design-to-Code Handoff Process Using Uno Platform For Figma — Smashing Magazine
Smashing Magazine - 17 November 2023
Effective collaboration between designers and developers is vital to creating good user experiences. However, bridging the handoff between design and …
Tools
Alva
Create living prototypes with code components.
BuilderX
BuilderX is a screen design tool which codes React Native for you.
Flow
Animate Sketch designs in seconds and export production ready code.
HTML Sketchapp
HTML Sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.
Hadron
A development environment for designers and developers who work together towards the same goal.
Haiku
Create React and Vue components directly from your designs.
Laska
A visual editor to create user interfaces for React Native.
Lona
Tools for building design systems and using them to generate cross-platform code, Sketch files, and other artifacts.
Modulz
Like Sketch but with interactive components, box model layout and React export.
Plasmic
The fast and fun visual builder for React.
React Sketch.app
Render React components to Sketch; tailor-made for design systems
React Studio
Create app flows and components. Express their properties and data linkage visually. Get code immediately.
Sketch2React
A 100% free front-end solution for Sketch app that lets you build real code prototypes and even very simple websites. No plugins, only using the built-in tools.
Supernova
Supernova allows you to create animations, navigations, localizations, get production code.