Coded components will finally become the source of truth in UI design
Updated February 15, 2021. See this twitter thread for details.
In 2018, I wrote about an emerging trend of tools that mingle visual design and code in ways that are notably different from typical “screen design” tools for drawing pictures of screens and creating no-code prototypes.
While this trend still seems early in the curve of adoption, I’m hopeful that this is the direction that things are eventually going. There are market signals to back this up. For example, Modulz raised $4.2M in seed funding in March of 2020.
Some common themes among these tools include attributes such as:
- Designing with live data in an application environment vs. static mockups
- Themes and reusable design tokens
- Components that are production-ready, reusable, and iteratively designed or enhanced over time
- Real-time team collaboration features that allow multiple people to work on a design simultaneously
- Styleguides and Component Libraries as a means of communicating design specifications and fueling consistency
- Integrations that allow for bi-directional import/export to screen design tools
- Connections to any popular back end that supports a product team’s code-base
The Airtable list below is just a simple roundup of tools. If I missed anything, please get in touch via email or on Twitter.
I’m personally looking forward to a tool with these characteristics, becoming the dominant design solution for UX and UI Visual Designers. Let me know if I missed any other examples.
Illustration credit: Feather icons “pen-tool”
