Summary
A Design system is not only about standardizing the UI or accelerating design. In the big picture, it can streamline collaboration between design and development. With this goal in mind, an effective Design system is available to both designers and developers in a format that is native to each discipline. However, getting to this point takes time. But what if we can skip ahead with a starter Design system containing both design and coded components that are ready for use? Join our activity sessions to see how you can transform your pixel-perfect designs into pixel-perfect code for modern web applications with Indigo.Design. We will also revisit the typical developer handoff by introducing a re-imagined workflow that minimizes rework. In the end, this approach can free up our focus to run Design-Ops better and deliver value sooner. Part 1 (Thursday): Introducing a starter Design system, and Indigo.Design overview Part 2 (Friday): Reimagining developer handoff, and introducing App builder ? Part 3 (Friday): Indigo.Design overview and exploring the developer workflow
Key Insights
-
•
Indigo.Design provides a seamless bridge between designers' UI kits (Sketch, XD, Figma) and developer-ready Angular code.
-
•
The cloud-based app builder enables real-time collaboration between designers and developers on the same components.
-
•
Code generated by Indigo.Design is a full-fledged Angular app with routing, styles, and assets structured for immediate compilation.
-
•
Global theming is supported, allowing developers or designers to change app-wide brand attributes with one click.
-
•
Instead of CSS specs handed off, developers get complete components with built-in styling hooks and documentation.
-
•
Publishing new design versions creates branches and pull requests in GitHub, streamlining developer updates.
-
•
Indigo.Design currently supports Angular 12/13 code generation; React support is on the roadmap.
-
•
Documentation generation is not yet automated but the system supports integration with tools like Storybook and can coexist with external docs.
-
•
The workflow preserves design fidelity so developers run apps that look exactly like the designs without debate.
-
•
Assets like SVGs and images are automatically managed and placed in the app’s assets folder, ensuring consistent inclusion.
Notable Quotes
"Designers create their designs in Sketch or XD and import them into the cloud app builder, where both designers and developers can collaborate."
"We generate professional Angular applications where developers don't need to copy-paste or handwrite frontend layout code."
"With one click, you can skin the entire application and change brand attributes like typography, coloring, or rounding."
"Publishing changes creates a new branch and pull request in GitHub, making it easy for developers to review and merge."
"The CSS is minimal because components absorb style changes from top-level variables; styles are never duplicated per component instance."
"We don't black box anything — you get all the code structured as a real Angular app, ready to run with npm install and npm start."
"Currently, we target Angular first because many customers use it, but React support is coming soon in our roadmap."
"Accessibility compliance is critical especially for government customers and is something we support and continue improving."
"Indigo.Design is compatible with external documentation tools like Storybook or Zeroheight but doesn't generate all documentation automatically yet."
"At the end of the day, the goal is to guarantee that what you design matches exactly what gets produced in code."
Dig deeper—ask the Rosenbot:
More Videos
"The majority of the participants last through the six-month commitment with only about 5% removed for low engagement."
Wyatt HaymanGlobal Research Panels (Videoconference)
August 8, 2020
"We’re far from done; evolving foundational elements, accessibility, and customization tools will drive Spectrum’s future."
PJ Buddhari Nate BaldwinMeet Spectrum, Adobe’s Design System
June 9, 2021
"Sacramento’s Civic Enrichment Center is an artifact aligning a city around community and future workforce needs."
Sarah GallimoreInspire Progress with Artifacts from the Future
November 18, 2022
"Playing politics in UX leadership is about maximizing relationships ethically to advance your agenda, not about being underhanded."
Peter MerholzThe Trials and Tribulations of Directors of UX (Videoconference)
July 13, 2023
"Separating men and women in research for products like laundry detergent risks reinforcing stereotypes."
Dr. Jamika D. Burge Mansi GuptaAdvancing the Inclusion of Womxn in Research Practices (Videoconference)
September 15, 2022
"You have to understand how your company actually makes money."
Amy MarquezINVEST: Discussion
June 15, 2018
"The Pokémon anime was essentially a game manual, walking players through the journey with emotional stakes."
Dane DeSutter Natalie Gedeon Deborah Hendersen Cheryl PlatzBeyond the Console: The rise of the Gamer Experience and how gaming will impact UX Research across industries (Videoconference)
May 17, 2024
"Jobs always ask for three references. I think I might start asking for three happy employees."
Zariah CameronReDesigning Wellbeing for Equitable Care in the Workplace
September 23, 2024
"If goals aren’t met, remember it’s about the team, not just the individual; many factors are out of your control."
Jessica NorrisADHD: A DesignOps Superpower
September 9, 2022
