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
Alicia Mooty
Design Staffing Models
2021 • DesignOps Summit 2021
Gold
Briana Thomas
The Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams
2024 • DesignOps Summit 2024
Gold
Dave Hoffer
UX Job Search AMA #3 with Joanne Weaver and Dave Hoffer
2025 • Rosenfeld Community
Amy Paris
Delivering Equity: Government Services for All Ages, Languages, Sexual Orientations, and Gender Identities
2021 • Civic Design 2021
Gold
Robin Beers
Navigating organizational systems: Rethinking researcher’s role in driving change
2025 • Advancing Research 2025
Gold
Jeff Ephraim Bander
Eye Tracking Gamechanger: Why Smartphone Eye Tracking will Revolutionize Your UX Research
2022 • Advancing Research 2022
Gold
Alla Weinberg
People Are Sick of Change: Psychological Safety is the Cure
2023 • DesignOps Community
Erin Weigel
Get Your Whole Team Testing to Design for Impact
2024 • Rosenfeld Community
Peter Morville
The Architecture of Understanding
2015 • Enterprise UX 2015
Gold
Sydney Lawson
Anatomy of a Strong User Panel
2026 • Advancing Research 2026
Conference
Alla Weinberg
Design Teams Need Psychological Safety: Here’s How to Create It
2022 • DesignOps Summit 2022
Gold
Tess Dixon
C'mon Get Happy
2021 • DesignOps Summit 2021
Gold
Ignacio Martinez
Fair and Effective Designer Evaluation
2024 • DesignOps Summit 2024
Gold
Louis Rosenfeld
Welcome / Housekeeping
2023 • Enterprise UX 2023
Gold
Bethany Brown
Rewiring operations with service design and AI
2025 • Advancing Service Design 2025
Gold
Husani Oakley
Theme Three Intro
2023 • Enterprise UX 2023
Gold

More Videos

Daniel Gloyd

"Meisner taught actors to respond truthfully in the moment, prioritizing presence over preconceived ideas."

Daniel Gloyd

Designing From the Inside Out: How Method Acting Can Inspire Design Research

February 12, 2026

Deirdre Hirschtritt

"Starting meetings with simple icebreakers or sharing pronouns and locations really breaks the ice and builds relationships."

Deirdre Hirschtritt Cesar Paredes Marie Perrot

Research is Only as Good as the Relationships You Build

November 17, 2022

Benjamin Real

"We chose to focus on research because we wanted to mirror, a bit more robust, the capability of the design teams to understand client needs."

Benjamin Real

Maturity Models: A Core Tool for Creating a DesignOps Strategy

October 1, 2021

Max Gadney

"You can look at a company’s impact reports and funding sources to sniff out if something feels too good to be true."

Max Gadney Andrea Petrucci Joshua Stehr Hannah Wickes

Assessing UX jobs for impact in climate

August 14, 2024

Lada Gorlenko

"Seb is career UXer fresh at Canadian railways with a steep learning curve."

Lada Gorlenko

Theme 1: Intro

January 8, 2024

Feyikemi Akinwolemiwa

"If it feels uncomfortable, you’re probably doing something right."

Feyikemi Akinwolemiwa

Play to innovate: How curiosity and experimentation transform UX

March 11, 2026

Bria Alexander

"If you feel uncomfortable or unsafe engaging in this community, we want to know about it."

Bria Alexander

Opening Remarks

March 29, 2023

Llewyn Paine

"Replacing the entire body with an avatar future-proofs against unanticipated identifiers like tattoos or moles."

Llewyn Paine

[Demo] Deploying AI doppelgangers to de-identify user research recordings

June 5, 2024

Bria Alexander

"OKRs are not one-size-fits-all; you have to shape them based on your organizational context and culture."

Bria Alexander Benson Low Natalya Pemberton Stephanie Goldthorpe

OKRs—Helpful or Harmful?

January 20, 2022