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: 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
Sam Proulx
Understanding Screen Readers on Mobile: How And Why to Learn from Native Users
2023 • Advancing Research 2023
Gold
Ana Ferreira
Designing Distributed: Leading Doist’s Fully Remote Design Team in Six Countries
2024 • DesignOps Summit 2020
Gold
Bria Alexander
Reflect and Chart Forward
2021 • Civic Design 2021
Gold
Dave Malouf
Closing Keynote: Amplify. Not Optimize.
2019 • DesignOps Summit 2019
Gold
Charlotte Lee
Theme 1 Intro
2021 • Civic Design 2021
Gold
Louis Rosenfeld
Discussion: What Operations can teach DesignOps
2017 • DesignOps Summit 2017
Gold
Erin Weigel
Real-world lessons to improve your conversion rates
2024 • Rosenfeld Community
Smitha Papolu
Theme 3 Discussion
2019 • Enterprise Experience 2019
Gold
Dave Hoffer
UX Job Search AMA #2 with Joanne Weaver and Dave Hoffer
2025 • Rosenfeld Community
Abbey Smalley
Today’s Design Ops and Programs Landscape & Career Paths
2023 • DesignOps Summit 2023
Gold
Joerg Beringer
Scaling User Research with AI: Continuous Discovery of User Needs in Minutes
2025 • DesignOps Summit 2025
Gold
Jorge Arango
Design as an Antidote to VUCA
2019 • Enterprise Community
Kate Kalcevich
Designing inclusively with AI
2024 • Designing with AI 2024
Gold
Ariel Kennan
Theme 2 Intro
2021 • Civic Design 2021
Gold
Nick Cochran
Growing in Enterprise Design through Making Connections
2019 • Enterprise Community
Tristin Oldani
Turning awareness into action with Climate UX
2025 • Climate UX Interest Group

More Videos

Megan Blocker

"Researchers must shift from gatekeepers of knowledge to coaches who help others understand what to trust."

Megan Blocker Marieke McCloskey Renee Reid

Positioning insight: Structuring teams, roles and careers for a changing research landscape

March 13, 2025

Ryan Matthew

"The style component was developed in two minutes rather than taking a few days to create and document."

Ryan Matthew Alex Kurchev

Bridging Design and Code: AI-Powered Design System Integration

September 11, 2025

Saara Kamppari-Miller

"If we are working on something that does not ladder up to our KSPs, then we should not be working on it."

Saara Kamppari-Miller Nicole Bergstrom Shashi Jain

Key Metrics: Comparing Three Letter Acronym Metrics That Include the Word “Key”

November 13, 2024

Erin Hauber

"Empathy applies to us too—we needed to understand how our own people were feeling about these layered changes."

Erin Hauber

Design is Not the Frosting on the Scaled Agile Layer Cake

October 24, 2019

Sheryl Cababa

"Most people’s fears about AI are actually fears about capitalism."

Sheryl Cababa Ethan Marcotte Milena Pribic

Day 2 Panel

June 5, 2024

Matt LeMay

"High-performing cross-functional teams self-organize around shared goals even with ambiguous roles."

Matt LeMay

You Don’t “Get” Anyone to Do Anything

December 6, 2022

Ed Mullen

"The plumbing of government—the unseen systems, processes, people, and policies—are design opportunities too."

Ed Mullen

Designing the Unseen: Enabling Institutions to Build Public Trust

November 16, 2022

Sharbani Dhar

"Finding the right method for the problem is important; don’t drink the Kool-Aid just because the preacher says to."

Sharbani Dhar

Breathing Room for Delight

January 8, 2024

Iram Shah

"Transparency is the basis for trust and respect among employees and leadership."

Iram Shah

Closing Keynote: The View from the Top

June 4, 2019