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
Sofia Quintero
Beyond Tools: The Messy Business of Implementing Research Repositories
2022 • Advancing Research 2022
Gold
Sean McKay
Coexisting with non-researchers: Practical strategies for a democratized research future
2025 • Advancing Research 2025
Gold
Jon White
Unsticking Research for Better Information Flow
2026 • Advancing Research 2026
Gold
Tala Tayebi
Voice and influence in an age of noise
2026 • Advancing Research 2026
Gold
Angelos Arnis
State of DesignOps: Learnings from the 2021 Global Report
2021 • DesignOps Summit 2021
Gold
Steve Portigal
Discussion
2015 • Enterprise UX 2015
Gold
Elizabeth Churchill
Exploring Cadence: You, Your Team, and Your Enterprise
2017 • Enterprise Experience 2017
Gold
Nalini P. Kotamraju
An Organizational Story: Salesforce Lightning Design System
2016 • Enterprise UX 2016
Gold
Billy Carlson
Tips to Utilize Wireframes to Tell an Effective Product Story
2023 • Enterprise UX 2023
Gold
Alicia D. Johnson
Disasters and the 21st Century
2021 • Civic Design 2021
Gold
Sam Proulx
Prototype Reviews, People With Disabilities, and You
2021 • Civic Design 2021
Gold
Dave Hora
A Research Skills Evolution
2021 • Advancing Research 2021
Gold
Billy Carlson
Pro-level UI Tips for Beginners
2022 • DesignOps Summit 2022
Gold
Alla Weinberg
Healing Toxic Stress
2024 • DesignOps Summit 2024
Gold
Sarah Barrett
The "How" of Enterprise Information Architecture
2023 • Enterprise UX 2023
Gold
Steve Krug
Don’t Make Me Think 3.0: What Endures and What Evolves in UX
2026 • Advancing Research 2026
Gold

More Videos

Lavy Kumar

"Bringing tasks directly into meetings lets you work where collaboration is happening without jumping between tools."

Lavy Kumar Kat Temple Shan Sebastian Tara Jensen Jenn Chou

Future of Work

June 9, 2021

Andreas Huebner

"I’m most excited to get back in the office because I miss that culture and feeling like I’m working with friends every day."

Andreas Huebner Amy Takata Craig Brookes

What Is It Like To Be Part of The UX Team at Compass?

March 11, 2021

Ricardo Martins

"Cluster analysis is very useful if you want to avoid a one-size-fits-all approach to product or service design."

Ricardo Martins

Unlocking the power of advanced quantitative methods

March 12, 2025

Monty Hammontree

"The fastest way to gain influence is to get somebody else promoted."

Monty Hammontree

The Future of UX Research

December 3, 2020

Benjamin Real

"We realized that the extended design discipline needed to regain some design ops activities to function properly."

Benjamin Real

Showing the Value of DesignOps by Not Having a DesignOps Team

October 21, 2020

Kate Towsey

"You've got to slow down to go fast; make space in your schedule to think strategically."

Kate Towsey

Ask Me Anything (AMA) with Kate Towsey

April 2, 2025

Steve Portigal

"Trust is built by showing you’re there to help make them succeed, not just push your agenda."

Steve Portigal Chris Chapo Kelly Goto Christian Rohrer

Discussion

May 13, 2015

Sam Proulx

"Accessible experiences are better experiences for everyone whether you are a person with a disability or not."

Sam Proulx

Online Shopping: Designing an Accessible Experience

March 28, 2023

Sam Proulx

"Involving people with disabilities throughout the product development cycle is crucial, from prototype reviews through to acceptance testing."

Sam Proulx

Prototype Reviews, People With Disabilities, and You

October 1, 2021