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
John Calhoun
Two Sides of the DesignOps Coin: Teams Ops and Product Ops
2024 • DesignOps Summit 2020
Gold
Changying (Z) Zheng
Navigating Innovation with Integrity
2024 • DesignOps Summit 2024
Gold
Andreas Huebner
What Is It Like To Be Part of The UX Team at Compass?
2021 • Advancing Research 2021
Gold
Tess Dixon
C'mon Get Happy
2021 • DesignOps Summit 2021
Gold
Cassandra Piester
Developing and Deploying Your Design Operations Strategy
2024 • DesignOps Summit 2024
Gold
Ted Booth
Discussion
2016 • Enterprise UX 2016
Gold
Sol Mesz
Hands or Brains? How to Hire for Strategy, Strategically
2024 • Enterprise Experience 2020
Gold
Ellen Chisa
The Values of Design
2023 • Design in Product 2023
Gold
Allan Lowson
Rehashing the Double Diamond: Collaborating across functions with AI-assisted prototyping
2026 • Designing with AI 2026
Gold
Kate Koch
Flex Your Super Powers: When a Design Ops Team Scales to Power CX
2021 • DesignOps Summit 2021
Gold
Billy Carlson
Ideation tips for Product Managers
2022 • Design in Product 2022
Gold
Indra Klavins
A Design Ops Girl in a Dev Ops World
2019 • DesignOps Summit 2019
Gold
Steve Portigal
Discussion
2015 • Enterprise UX 2015
Gold
Kristin Taylor
Building Bridges Across Organizational Silos
2022 • Civic Design 2022
Gold
Bria Alexander
Opening Remarks
2024 • Advancing Research 2021
Gold
Billy Carlson
Principles of Team Wireframing
2023 • DesignOps Summit 2023
Gold

More Videos

Isaac Heyveld

"If you’re managing over 100 design practitioners, it makes sense to start looking at a chief of staff role."

Isaac Heyveld

Expand DesignOps Leadership as a Chief of Staff

September 8, 2022

Peter Van Dijck

"If you build for the next model, even if it can hardly do something now, it will probably do it well in the future."

Peter Van Dijck

Hands on AI #3: Claude Code for UX people

October 22, 2025

Dave Gray

"It’s impossible to be angry with a warm cup of tea in your hand."

Dave Gray

Liminal Thinking: Sense-making for systems in large organizations

May 14, 2015

Sam Proulx

"If we are designing experiences that don’t work for everyone today, we’re designing experiences that in a couple of years will exclude ourselves."

Sam Proulx

Accessibility: An Opportunity to Innovate

June 8, 2022

Wendy Johansson

"We have the same goal in mind – to give the customer the best experience – but we use different tools and languages."

Wendy Johansson

An Education on Design Education for Orgs

June 10, 2021

Bria Alexander

"This is the same conference in so many good ways — good ways are that it’s resilient and there’s a certain steadiness."

Bria Alexander Louis Rosenfeld

Welcome

January 8, 2024

Stephen Pollard

"Organizational culture and values have been essential to ensuring successful delivery."

Stephen Pollard

Closing Keynote: Getting giants to dance - what can we learn from designing large and complex public infrastructure?

November 7, 2017

Uday Gajendar

"Affordances seem to have fallen to the wayside in favor of flat design and revenue optimization."

Uday Gajendar Adam Richardson

From AI to Zeitgeist: Theory as the design antidote to AI hype

March 27, 2025

Leah Buley

"Most service design firms are now focused on digital experience design, close to 70% do that work."

Leah Buley

Closing Plenary: The Crisis of Digital

March 31, 2020

Latest Books All books