Rosenverse

This video is only accessible to Gold members. Log in or register for a free Gold Trial Account to watch.

Log in Register

Most conference talks are accessible to Gold members, while community videos are generally available to all logged-in members.

Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)
Gold
Friday, October 1, 2021 • DesignOps Summit 2021
Share the love for this talk
Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)
Speakers: George Abraham and Stefan Ivanov
Link:

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."

Ask the Rosenbot
Ricardo Martins
Unlocking the power of advanced quantitative methods
2025 • Advancing Research 2025
Gold
Kristen Honey
"Let’s Talk About Data and Crisis”: Public Digital Service Delivery = Open Data + Human Centered Design
2021 • Civic Design Community
Chris Engledowl
A Mixed Method Approach to Validity to Help Build Trust
2023 • QuantQual Interest Group
Dave Malouf
The Past, Present, and Future of DesignOps: a 2-part DesignOps Community Call (Part 2)
2022 • DesignOps Community
Mark Templeton
Creating a Legacy: the ultimate experience
2017 • Enterprise Experience 2017
Gold
Bria Alexander
Opening Remarks
2021 • DesignOps Summit 2021
Gold
Briana Thomas
The Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams
2024 • DesignOps Summit 2024
Gold
Michael Polivka
Scaling Design through Relationship Maps
2017 • DesignOps Summit 2017
Gold
Mark Interrante
Collaboration Flows in Product Development
2017 • Enterprise Experience 2017
Gold
Louis Rosenfeld
GenAI for UXers: A Rosenbot Demo and Discussion
2025 • Designing with AI 2025
Gold
Nathan Shedroff
Redefining Value: Bridging the Innovation Culture Divide
2015 • Enterprise UX 2015
Gold
Tamara Kartoziia
Think global, adapt local: how service design accelerated B2B market entry by 6 months
2025 • Advancing Service Design 2025
Conference
Rittika Basu
Age and Interfaces: Equipping Older Adults with Technological Tools
2023 • Advancing Research Community
Indi Young
Thinking styles: Mend hidden cracks in your market
2025 • Rosenfeld Community
Bas Raijmakers, PhD (RCA)
What Design Research can Learn from Documentary Filmmaking
2022 • Advancing Research 2022
Gold
Brian T. O’Neill
Does Designing and Researching Data Products Powered by ML/AI and Analytics Call for New UX Methods?
2022 • QuantQual Interest Group

More Videos

Nalini Kotamraju

"What happens if research does not report into UX? What might happen if we uncouple research from UX?"

Nalini Kotamraju

Research After UX

March 25, 2024

Dean Broadley

"If you want to go fast, go alone; if you want to go far, go together."

Dean Broadley

Not Black Enough to be White

January 8, 2024

Denise Jacobs

"Racism is by design, and there's no way to counter it unless we counter it with design."

Denise Jacobs Nancy Douyon Renee Reid Lisa Welchman

Interactive Keynote: Social Change by Design

January 8, 2024

Kim Fellman Cohen

"Our team’s improvement wasn’t the final state—we set ambitious goals to be in the 80th to 90th percentile next year."

Kim Fellman Cohen

Measuring the Designer Experience

October 23, 2019

George Aye

"What is design’s relationship to power and privilege? Which humans do we center when we say human-centered design?"

George Aye

That Quiet Little Voice: When Design and Ethics Collide

November 16, 2022

Nathan Curtis

"Google’s Material Design has echoes of design decisions flowing through many of their applications."

Nathan Curtis

Beyond the Toolkit: Spreading a System Across People & Products

June 9, 2016

Greg Petroff

"We want to know agents better than they know themselves to drive tailored, contextually relevant solutions."

Greg Petroff

The Compass Mission

March 10, 2021

Chloe Amos-Edkins

"If you don’t do local research before launching a product, you risk disastrous failure."

Chloe Amos-Edkins

A Cultural Approach: Research in the Context of Glocalisation

March 27, 2023

Mackenzie Cockram

"85% of people were leaving after viewing only one page, showing severe bounce issues."

Mackenzie Cockram Sara Branco Cunha Ian Franklin

Integrating Qualitative and Quantitative Research from Discovery to Live

December 16, 2022