Rosenverse
Design Systems To-Go: Indigo.Design Overview and Exploring the Developer Workflow (Part 3)

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
Kim Lenox
Leading Distributed Global Teams
2019 • Enterprise Community
Josh Clark
Sentient Design: Crafting Intelligent Interfaces with AI
2026 • Rosenfeld Community
Maria Giudice
Empowering change: Reigniting purpose, passion and impact in research
2025 • Advancing Research 2025
Gold
Jess Greco
Creating a Basis for Change: Scaling Design Maturity
2022 • Design at Scale 2022
Gold
Kate Koch
Flex Your Super Powers: When a Design Ops Team Scales to Power CX
2021 • DesignOps Summit 2021
Gold
Jerome “Axle” Brown
How to Use Self-Directed Learning to Ensure Your Research Insights are Heard and Acted Upon
2021 • Advancing Research 2021
Gold
Bria Alexander
Reflect and Chart Forward
2021 • Civic Design 2021
Gold
Indi Young
Paying Better Attention to the Problem with Indi Young
2019 • Advancing Research Community
Saara Kamppari-Miller
"Prototype" vs "Prototype"--Breaking Down and Rebuilding Our Understanding of What We Do
2019 • DesignOps Summit 2019
Gold
Peter Van Dijck
Building impactful AI products for design and product leaders, Part 3: Understand AI architectures: RAG, Agents, Oh My!
2025 • Rosenfeld Community
Erin Weigel
Get Your Whole Team Testing to Design for Impact
2024 • Rosenfeld Community
Chris Govias
Perspectives on Civic Design
2021 • Civic Design Community
Pippa Lomas
Paving the Path for Neurodiversity in Design
2023 • DesignOps Summit 2023
Gold
Alnie Figueroa
The Future of Design Operations: Transforming Our Craft
2025 • DesignOps Summit 2025
Gold
Ana Ferreira
Designing Distributed: Leading Doist’s Fully Remote Design Team in Six Countries
2024 • DesignOps Summit 2020
Gold
Russ Unger
Getting Out from Under Everyone: How to Escape the Paralysis of Getting Started
2016 • Enterprise UX 2016
Gold

More Videos

Nalini P. Kotamraju

"The leadership response in business often has to be: we will make the best decision possible given what we know."

Nalini P. Kotamraju

Two Jobs in One: Being a “Leader who is a Researcher” and a “Researcher who is a Leader"

March 10, 2021

Jake Burghardt

"AI can support research operations but shouldn’t replace human judgment or integrated workflows."

Jake Burghardt

Stop wasting research: Unlock more value from research insights

June 24, 2025

Josh Clark

"Large language models are far better at figuring out what you mean than simply giving an answer."

Josh Clark Veronika Kindred

Sentient Scenes and Radically Adaptive Experiences

June 11, 2025

Alla Weinberg

"Mistake celebration meetings normalize errors and allow teams to get ahead of problems quickly."

Alla Weinberg

How to Build and Scale Team Safety

January 8, 2024

Laurent Christoph

"To have higher impact, see the entire cross-functional team as your team, not silos."

Laurent Christoph

Scale the impact of DesignOps in 3D: Diligence, Decision, Discipline

September 17, 2025

Dave Malouf

"How ready are you to sense and respond to the patterns of emergence in your organization?"

Dave Malouf

Theme 3: Introduction and Provocation

January 8, 2024

Christopher Geison

"Layoffs wiped out 20, 50, even 75% of research teams in profitable companies."

Christopher Geison

Theme 1 Intro

March 25, 2024

Kristin Skinner

"Google’s HEART framework is great because different teams—engineering, product, and design—can all use it."

Kristin Skinner Kamdyn Moore

Group Activity: A Deep Dive Into Value and Outcomes

October 23, 2019

Ebru Namaldi

"Designers should have a sense of belonging too. They should be having fun while learning and working."

Ebru Namaldi

Designing the Designer’s Journey: Scaling Teams, Culture, and Growth Through DesignOps

September 11, 2025