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
Roy Opata Olende
How Zapier Uses ‘All Hands Research’ to Increase Exposure to Users
2020 • Advancing Research Community
Dan Donald
Design Systems as a Vehicle for Systemic Change
2023 • DesignOps Community
Dantley Davis
Leadership & Diversity—A Fireside Chat with Dantley Davis
2020 • Enterprise Community
Cara Maritz
The Art of Extrapolation
2023 • Advancing Research 2023
Gold
Lin Nie
When Thought-worlds Collide: Collaborating Between Research and Practice
2021 • Advancing Research 2021
Gold
Justin Entzminger
Risk and Reward: How to Diversify the Field of Civic Innovators and Designers
2022 • Civic Design 2022
Gold
Benjamin Wiedmaier
Redefining Toolkits: Unbundling to Create a Perfect Match
2025 • Advancing Research 2025
Gold
Bob Baxley
Leading with Design Operations Past and Present
2019 • DesignOps Community
Anna Poznyakov
Get The Most Out Of Stakeholder Collaboration—and Maximize Your Research Impact
2021 • Advancing Research 2021
Gold
Shanti Mathew
Civic Design at Scale: Introducing the Public Policy Layer Cake
2021 • Civic Design 2021
Gold
Steve Portigal
Discussion
2015 • Enterprise UX 2015
Gold
Tracy McGoldrick
IBM User Experience Program—The What, Why and How
2021 • Advancing Research Community
Asia Hoe
Partnering with Product: A Journey from Junior to Senior Design
2023 • Design in Product 2023
Gold
Leisa Reichelt
The Five Dysfunctions of Democratized Research at Scale
2020 • Advancing Research 2020
Gold
Dave Hora
Advice for Establishing Research
2022 • Advancing Research Community
Tiffany Cheng
Designing in a Pandemic: Integrating Speed and Rigor
2022 • Design at Scale 2022
Gold

More Videos

Sofía Delsordo

"The design mindset was way more important than the bureaucratic mindset."

Sofía Delsordo Kassim Vera

Public Policy for Jalisco's Designers to Make Design Matter

December 8, 2021

"Good UX is good business."

Product and Design at Bloomberg: A 15-year Evolution

December 6, 2022

Liza Pemstein

"I want to encourage excitement about research and gradually mold people into better researchers."

Liza Pemstein Jane Davis

Scaling Research Via an Ops First Model at Clever

March 27, 2023

Kara Kane

"Civic design and government design practice have reached many milestones in the past 10 years."

Kara Kane

Theme One Intro

November 16, 2022

Mark Interrante

"AI can accelerate prioritization tasks, but the final judgment must come from humans who understand context."

Mark Interrante Harry Max

AI for Prioritization (3rd of 3 seminars)

July 11, 2024

Sam Proulx

"If you build accessible shopping with these four keys, compliance with legal standards like WCAG will naturally fall into place."

Sam Proulx

Online Shopping: Designing an Accessible Experience

October 3, 2023

Rich Mironov

"Most product managers are wide, most UX and engineers are deep — that’s just the nature of the roles."

Rich Mironov

How Can Product Managers and UXers Help Each Other (and Why are Product Folks so Annoying Sometimes)?

December 6, 2022

Juhan Sonin

"If someone says hell no, don’t stop, keep going."

Juhan Sonin

Design Now! The Agenda for Action

September 4, 2025

Mansi Gupta

"The trust gap stems from being repeatedly failed by a system, not innate risk aversion or imposter syndrome."

Mansi Gupta

Drawing from Feminist Practice to Make Inclusive Design Operational

September 9, 2022