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 provides a seamless bridge between designers' UI kits (Sketch, XD, Figma) and developer-ready Angular code.

  • The cloud-based app builder enables real-time collaboration between designers and developers on the same components.

  • Code generated by Indigo.Design is a full-fledged Angular app with routing, styles, and assets structured for immediate compilation.

  • Global theming is supported, allowing developers or designers to change app-wide brand attributes with one click.

  • Instead of CSS specs handed off, developers get complete components with built-in styling hooks and documentation.

  • Publishing new design versions creates branches and pull requests in GitHub, streamlining developer updates.

  • Indigo.Design currently supports Angular 12/13 code generation; React support is on the roadmap.

  • Documentation generation is not yet automated but the system supports integration with tools like Storybook and can coexist with external docs.

  • The workflow preserves design fidelity so developers run apps that look exactly like the designs without debate.

  • Assets like SVGs and images are automatically managed and placed in the app’s assets folder, ensuring consistent inclusion.

Notable Quotes

"Designers create their designs in Sketch or XD and import them into the cloud app builder, where both designers and developers can collaborate."

"We generate professional Angular applications where developers don't need to copy-paste or handwrite frontend layout code."

"With one click, you can skin the entire application and change brand attributes like typography, coloring, or rounding."

"Publishing changes creates a new branch and pull request in GitHub, making it easy for developers to review and merge."

"The CSS is minimal because components absorb style changes from top-level variables; styles are never duplicated per component instance."

"We don't black box anything — you get all the code structured as a real Angular app, ready to run with npm install and npm start."

"Currently, we target Angular first because many customers use it, but React support is coming soon in our roadmap."

"Accessibility compliance is critical especially for government customers and is something we support and continue improving."

"Indigo.Design is compatible with external documentation tools like Storybook or Zeroheight but doesn't generate all documentation automatically yet."

"At the end of the day, the goal is to guarantee that what you design matches exactly what gets produced in code."

Ask the Rosenbot
Daniela Magaña Flores
Ahead of Competition: Learn What UX Benchmarking Can Do for Your Business Today
2022 • Advancing Research 2022
Gold
Russ Unger
Getting Out from Under Everyone: How to Escape the Paralysis of Getting Started
2016 • Enterprise UX 2016
Gold
Dane DeSutter
Beyond the Console: The rise of the Gamer Experience and how gaming will impact UX Research across industries (Videoconference)
2024 • QuantQual Interest Group (Rosenfeld Community)
Jay Bustamante
Navigating the Ethical Frontier: DesignOps Strategies for Responsible AI Innovation
2023 • DesignOps Summit 2023
Gold
Jackie Velasquez-Ross
Talent Acquisition and Our Responsibility (Videoconference)
2020 • DesignOps Community
Dan Hill
Designing for the infrastructures of everyday life
2024 • Designing with AI 2024
Gold
Mackenzie Cockram
Integrating Qualitative and Quantitative Research from Discovery to Live
2022 • QuantQual Interest Group (Rosenfeld Community)
Robin Beers
How to create actionable insight in the face of politics and silos [Advancing Research Community Workshop Series] (Videoconference)
2023 • Advancing Research Community
Sam Proulx
Accessibility: An Opportunity to Innovate
2022 • DesignOps Summit 2022
Gold
Ben Davies
Expert Panel: The Principles of Research Repository Design
2022 • Advancing Research 2022
Gold
Aditi Ruiz
Pulse Check: Empathy Mapping Your Product Manager, Pt. 2
2022 • Design in Product 2022
Gold
Sam Proulx
Online Shopping: Designing an Accessible Experience
2023 • Advancing Research 2023
Gold
Taylor Jennings
Repository Retrospective: Learnings from Introducing a Central Place for UX Research
2022 • Advancing Research 2022
Gold
Jack Moffett
SAFe or Sorry? (Videoconference)
2019 • Enterprise Community
Aiyana Bodi
Three Key Climate Initiatives and How You Can Help
2024 • Climate UX Interest Group (Rosenfeld Community)
Bria Alexander
Opening Remarks
2021 • Design at Scale 2021
Gold

More Videos

"When teams lose a sense of agency, they act strange, cutting corners and racing to get something out the door."

Standardizing Product Merits for Leaders, Designers, and Everyone

June 15, 2018

Simon Wardley

"Space has meaning in a map—if you move components around without reason, it’s no longer a map."

Simon Wardley

Maps and Topographical Intelligence (Videoconference)

January 31, 2019

Sandra Camacho

"There’s a gap between intentions and impact; humility is needed to close it."

Sandra Camacho

Creating More Bias-Proof Designs

January 22, 2025

Darian Davis

"It takes at least one team member to choose to set healthy standards for collaboration."

Darian Davis

Lessons from a Toxic Work Relationship

January 8, 2024

Fisayo Osilaja

"After each interview, I input the transcript into ChatGPT and ask for three key takeaways that I can quickly share with stakeholders."

Fisayo Osilaja

[Demo] The AI edge: From researcher to strategist

June 4, 2024

Uday Gajendar

"There is a common thread in craft: dignity, purpose, utility, and beauty."

Uday Gajendar

The Wicked Craft of Enterprise UX

May 13, 2015

Davis Neable

"Trust is often underestimated but is critical when designers face public critique and feedback."

Davis Neable Guy Segal

How to Drive a Design Project When you Don’t Have a Design Team

June 10, 2021

Eniola Oluwole

"We stopped talking about patterns and consistency and started talking about scalability and speed to connect with stakeholders."

Eniola Oluwole

Lessons From the DesignOps Journey of the World's Largest Travel Site

October 24, 2019

Aurobinda Pradhan

"Product managers feel design is a black box; they want visibility, transparency, and accountability on timelines."

Aurobinda Pradhan Shashank Deshpande

Introduction to Collaborative DesignOps using Cubyts

September 9, 2022