Rosenverse
Design Systems To-Go: Introducing a Starter Design System, and Indigo.Design Overview (Part 1)

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: Introducing a Starter Design System, and Indigo.Design Overview (Part 1)

Gold
Thursday, September 30, 2021 • DesignOps Summit 2021
Share the love for this talk
Design Systems To-Go: Introducing a Starter Design System, and Indigo.Design Overview (Part 1)
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

  • Building and maintaining a custom design system often requires a dedicated team and significant overhead, which can be a deal breaker for small teams or agencies.

  • Many organizations end up with a Frankenstein design by mixing elements from various popular design systems without cohesion.

  • Indigo.Design offers a white-label, customizable starter design system aiming to fit diverse niches and verticals.

  • Matching design and developer toolkits in native formats (Sketch, XD, Figma, Angular) creates smoother workflows and reduces handoff friction.

  • The Indigo.Design plugin allows real-time theme customization, generating entire color palettes and typography schemes from base inputs.

  • The system automatically converts absolute design layouts into responsive flex layouts during handoff to save designers and developers time.

  • Cloud-based prototyping enables pixel-perfect sharing, stakeholder feedback, and integrated usability testing with video recording.

  • Open-source style hooks and fully accessible source code empower developers to localize and customize UI for different regions and languages.

  • A major goal is to eliminate wasteful debates over pixel-level differences by automating fidelity in design-to-code translation.

  • Indigo.Design does not seek to replace existing tools like Zeplin or InVision but to complement design and developer toolchains with integrated capabilities.

Notable Quotes

"Design systems has always been a beginning, like a seed, and design ops basically serves as the nurture."

"For a design system to be effective, it should be available to both designers and developers as a matching set and in a format that is native to each discipline."

"Sometimes different teams use different tools, so you may need a design system for Sketch for one team but then for XD for another."

"You end up with something which I call Franken design because it’s kind of a mix and match of many different things, but it’s anything but a real design system."

"We try to provide a lot more patterns because for newbie designers or product owners, patterns help them put together flows quickly."

"With the Indigo.Design plugin, you can profoundly change how the whole design system looks by just tweaking primary or secondary colors."

"Once you use Indigo.Design in Sketch or XD, you’re just a few clicks away from having a running Angular app based on our developer toolkit."

"Our handoff process turns absolute layout into a flex layout structure, so you get responsiveness out of the box without copying screens for each size."

"Final versions often do not look exactly like the original design, so we want to invest our time in process improvement, not arguing over pixels."

"You want designers to use the UI kit like any other UI kit, and developers to modify the code they’re familiar with, all matched perfectly."

Ask the Rosenbot
Kelly Goto
Emotion Economy: Ethnography as Corporate Strategy
2015 • Enterprise UX 2015
Gold
JP Allen
Navigating the UX Tools Landscape
2021 • DesignOps Summit 2021
Gold
Sheri Byrne-Haber
The Importance of Accessible Design Systems
2024 • DesignOps Summit 2020
Gold
Kristin Skinner
Theme 1 Intro
2021 • DesignOps Summit 2021
Gold
Daniel Korczynski
Why AI Is Bad at Research (and how to make it actually useful)
2026 • Advancing Research 2026
Gold
Sean McKay
Whole Product Thinking: Expanding beyond problem and solution space thinking
2024 • Rosenfeld Community
Louis Rosenfeld
Discussion: What Operations can teach DesignOps
2017 • DesignOps Summit 2017
Gold
Marc Rettig
Discussion
2015 • Enterprise UX 2015
Gold
Dr. Karl Jeffries
The Science of Creativity for DesignOps
2024 • DesignOps Summit 2020
Gold
Bria Alexander
Opening Remarks
2021 • Design at Scale 2021
Gold
Louis Rosenfeld
Founder’s Welcome
2022 • Design in Product 2022
Gold
Angelos Arnis
Our Fragmented Identity
2026 • Rosenfeld Community
Saara Kamppari-Miller
DesignOps for Inclusive Design and Accessibility
2022 • DesignOps Community
Sharbani Dhar
Breathing Room for Delight
2024 • Enterprise Experience 2020
Gold
George Hinchliffe
Delivering Amazing Experiences
2021 • Design at Scale 2021
Gold
Bria Alexander
Opening Remarks
2023 • DesignOps Summit 2023
Gold

More Videos

Lena Shenkarenko

"Community input is invaluable in crafting solutions that work for everyone."

Lena Shenkarenko

Collaborative Wireframing for Creating Team Alignment and Shipping Better Products

October 21, 2020

Lada Gorlenko

"No matter the circumstances, the answer to 'Can we?' is always yes, we can."

Lada Gorlenko

Theme 2 Intro

June 9, 2022

Ruzanna Rozman

"When we pivoted because of business decisions, we felt anxious but kept adapting together."

Ruzanna Rozman

Getting in Flow with Your Team

January 8, 2024

David Sternberg

"Friction isn’t just annoying; it’s a force that reshapes behavior and can slow or stop user flow."

David Sternberg

Uncovering the hidden forces shaping user behavior

July 17, 2025

Louis Rosenfeld

"Inclusion means not just who’s on the program but who you’re researching and collaborating with as you create your presentation."

Louis Rosenfeld Jemma Ahmed Christian Crumlish Uday Gajendar Chris Geison

Coffee with Lou #3: What Makes for a Successful UX Conference Presentation?

May 2, 2024

Ana Maria Montero Barrantes

"The only rule is to maintain your smile and just to feel the being that have fun."

Ana Maria Montero Barrantes Aditi Dhar Michelle Kaplan Nate Osborne Matt Laurence

The Authentic UX Talent Show

January 8, 2024

Iulia Cornigeanu

"Big data tells you what is happening; small data explains why it’s happening."

Iulia Cornigeanu

QuantQual Book Club: Small Data

March 8, 2024

Jorge Arango

"I wouldn’t want AI to think for me; these tools are to help me grow, not replace my thinking."

Jorge Arango

AI as Thought Partner: How to Use LLMs to Transform Your Notes (3rd of 3 seminars)

May 3, 2024

Jason Mesut

"Development is often best supported through pragmatic peer activities—not just training or conferences."

Jason Mesut

Shaping design, designers and teams

November 8, 2018