Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)
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 unifies design and development by creating components that exist both as UI kit symbols in tools like Sketch or XD and as real code components in Angular.
-
•
The system uses heuristics to translate absolute design layouts into responsive web-friendly layouts with relative margins and spacing.
-
•
Developers never have to manually rewrite frontend code; generated apps come as ready-to-run Angular repositories with all routing and styling included.
-
•
Theme changes propagate at the component level automatically, allowing global branding edits with a single click.
-
•
Publishing design changes creates new Git branches and pull requests, enabling controlled and traceable developer updates.
-
•
While Angular is currently the primary code generation target, React and Blazor support are planned, enabling platform choice at code generation time.
-
•
The design-to-code pipeline is one-directional; edits in Indigo.Design push to GitHub but do not sync back to original design tools like Figma or XD.
-
•
Generated components include detailed developer documentation and theming APIs, supporting extensibility and customization.
-
•
The system integrates with existing tools for design documentation and testing, supporting prototypes and user journey recordings in the cloud workspace.
-
•
Accessibility and compliance support is built in but still evolving; government market demands drive strict accessibility features.
Notable Quotes
"We want to leapfrog over individually inspecting things; developers won't have to copy and paste anything."
"One click, I am basically skinning this entire application to apply new brand attributes automatically to every component."
"This is a one-directional link between your design tool and the app builder; design tools don’t get updated by the builder."
"The CSS is only what’s relevant for recreating the layer; components know how to handle theming and styling internally."
"Developers can continue working in their IDEs, just fetching code from GitHub, without leaving their familiar environment."
"Publishing again creates a new branch with changes and a pull request, making collaboration and version control seamless."
"We support Angular first because many early customers use it, but React and Blazor are on our roadmap."
"Accessibility is driven by compliance, especially for government markets with strict keyboard navigation requirements."
"Documentation generation isn’t a core focus yet; we integrate with tools like Storybook and Figma for docs and visuals."
"Your main app stays stable on the main branch, and the app builder changes live on separate branches for safe developer review."
Or choose a question:
More Videos
"Managers were asking for user stories but hadn’t done any analysis or design — they didn’t understand the scope."
Carl TurnerYou Can Do This: Understand and Solve Organizational Problems to Jumpstart a Dead Project
March 28, 2023
"Performance management is really about the employee experience; avoid surprises by coaching continuously on both what and how folks are doing."
Karen PascoeDeveloping Experience Teams and Talent in the Enterprise
June 8, 2016
"Continuous onboarding is like drinking water in sips throughout the day, not a gallon all at once."
Jilanna WilsonDistributed Design Operations Management
October 23, 2019
"The collaboration cycle requires following standards for accessibility, content, design system usage, and IA or you don’t launch your product."
Shawna Hein Kevin HoffmanCreate a Cohesive Civic Design Practice Across Agency, Vendors, and Contracts
November 17, 2022
"Quick fixes rarely exist in these domains because beneath every problem are layers of complexity."
Barb SpantonDoing Work That Matters: A Look Beyond The Idealistic Notion of 'Doing Meaningful Work'
June 10, 2022
"If a feature didn’t align with our core UX principles, it probably didn’t belong in our application."
Briana ThomasThe Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams
September 24, 2024
"Provoking and reframing perspective helps teams get unstuck by thinking in new and surprising ways."
Gina MendoliaTherapists, Coaches, and Grandmas: Techniques for Service Design in Complex Systems
December 3, 2024
"Being fluent in multiple data languages and understanding behavioral and attitudinal data will be essential."
Lija Hogan Milan Mijatovic Sam Proulx Louis RosenfeldThree Years Out: Perspectives on the Near-Term Future of User Research
March 15, 2024
"Design ops is always swinging wildly between priorities, making partners wonder why invest if you’re always going this way or that."
John Calhoun Rachel PosmanTwo Sides of the DesignOps Coin: Teams Ops and Product Ops
January 8, 2024
