📚 Read the full article on UXPin’s blog: A Guide to Code to Design
What is Code to Design?
Code to design is a UX workflow developed by UXPin using Merge technology. With Merge, designers import UI coded components into the design editor and use them to build fully interactive prototypes–a process called component-driven prototyping.
Component-driven prototyping gives designers all the benefits of code without needing to write or learn a programming language.
A code-to-design workflow bridges the gap between designers and engineers. They still speak different languages, but a technology like Merge facilitates the translation between design and development.
Design teams work with visual UI elements, while engineers work with the code powering them–the same component from two perspectives.
Teams working with a design system benefit most from this code-to-design workflow.
With design-to-code workflow, teams work with two versions of the design system:
- Image-based UI kit for design tools
- UI component library for programming
Code to design eliminates this separation because design teams and engineers use the same component library from the same repository–creating a true single source of truth.
How Does Code to Design Work in UXPin?
Product teams have two options when importing code components into UXPin:
- Import a product design system
- Import an open-source UI library (MUI, Bootstrap, Ant Design, etc.)
Check how to do it.
Continue reading the article at UXPin 👉 A Code to Design Guide
