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
Lada Gorlenko
Theme 1: Intro
2024 • Enterprise Experience 2020
Gold
Jeff Sussna
What DesignOps Can Learn From DevOps
2017 • DesignOps Summit 2017
Gold
Cassini Nazir
The Dangers of Empathy: Toward More Responsible Design Research
2023 • Advancing Research 2023
Gold
Ana Maria Montero Barrantes
The Authentic UX Talent Show
2024 • Enterprise Experience 2020
Gold
Peter Merholz
The Trials and Tribulations of Directors of UX
2023 • Enterprise Community
Kwabena Opoku
Methodological toolkit for unique research impact
2026 • Advancing Research 2026
Gold
Farid Sabitov
Theme Four Intro
2022 • DesignOps Summit 2022
Gold
George Abraham
Design Systems To-Go: Reimagining Developer Handoff, and Introducing App Builder (Part 2)
2021 • DesignOps Summit 2021
Gold
Bill Scott
Lean Engineering: Engineering for Learning and Experimentation in the Enterprise
2015 • Enterprise UX 2015
Gold
Louis Rosenfeld
Opening Remarks
2023 • Design in Product 2023
Gold
Dave Hora
Advice for Establishing Research
2022 • Advancing Research Community
Robin Beers
Panel: Excellence in Communicating Insights
2024 • Advancing Research 2024
Gold
Marc Rettig
The Urge to Migrate
2026 • Rosenfeld Community
Scott Plewes
Why Isn't Your UX Approach Going Viral?: A Mathematical Model
2023 • Advancing Research 2023
Gold
Rachel Garb
Exit Interview #7: Facing a blank slate in retirement when constraints are all you’ve ever known
2026 • Rosenfeld Community
Savina Hawkins
Harnessing AI in UXR: Practical Strategies for Positive Impact
2024 • Advancing Research 2024
Gold

More Videos

Sarah Barrett

"My job wasn’t to do good IA, it was figuring out how to be allowed to do good IA."

Sarah Barrett

The "How" of Enterprise Information Architecture

June 6, 2023

Catt Small

"Visioning can be an antidote to a top-down reactive organization by proposing stable, aligned direction upfront."

Catt Small

Craft a Vision that Actually Gets Shipped

April 30, 2026

Dave Hoffer

"If you don’t have any work, make some spec work just to show your skills."

Dave Hoffer Joanne Weaver

UX Job Search AMA #2 with Joanne Weaver and Dave Hoffer

April 3, 2025

Jane Davis

"The hardest part of any researcher's job is translating insights into action."

Jane Davis

Strategic Shifts and Innovations in User Research: Navigating Challenges and Opportunities

March 11, 2025

Rachael Dietkus, LCSW

"Bias is constantly evolving; awareness requires trusted human relationships, not just technology validation."

Rachael Dietkus, LCSW Llewyn Paine Nishanshi Shukla David Womack

AI: Passionate defenses and reasoned critique [Advancing Research Community Workshop Series]

September 18, 2024

Maria Skaaden

"We pick our battles and show what a great party it is without worrying about pulling everyone in."

Maria Skaaden

Panel Discussion: Methodologies and Work Environments

November 8, 2018

Cheryl Platz

"Customers move from one device to another often because the information density or proximity to the device changes."

Cheryl Platz

Demystifying Multimodal Design: The Design Practice You Didn't Know You're Doing

April 4, 2024

Ron Bronson

"Every problem is a research problem."

Ron Bronson

Design, Consequences & Everyday Life

November 18, 2022

Liam Thurston

"Building a great culture means caring for individuals and creating rituals like recognition and shared learning."

Liam Thurston

Why Your Design Team Is Quitting, And How To Fix It

June 10, 2022