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
Dalia El-Shimy
So You've Got a Seat at the Table. Now What?
2020 • Advancing Research 2020
Gold
Lija Hogan
Doing more with more: Lessons from the Front Lines of Democratization
2022 • Advancing Research 2022
Gold
Abbey Smalley
Scaling UX Past the Size of Your Team
2024 • Enterprise Experience 2020
Gold
Veevi Rosenstein
Building for Scale: Creating the Zendesk UX Research Practice
2024 • Enterprise Experience 2020
Gold
Nora Tejeda
Scaling Design Capabilities at BBVA Through a Self-service Design Model
2021 • Design at Scale 2021
Gold
Erika Flowers
AI-Readiness: Preparing NASA for a Data-Driven, Agile Future
2025 • Designing with AI 2025
Gold
Stephen Pollard
Closing Keynote: Getting giants to dance - what can we learn from designing large and complex public infrastructure?
2017 • DesignOps Summit 2017
Gold
Erin Malone
Understanding the past to prepare for the future
2024 • Rosenfeld Community
Dean Broadley
Not Black Enough to be White
2024 • DesignOps Summit 2020
Gold
Mansi Gupta
Women-Centric Research: What, Why, How
2023 • Advancing Research 2023
Gold
Anna Avrekh
User Research, Design, and Product - A Love Story
2021 • Advancing Research 2021
Gold
Aras Bilgen
Who does the math: A designer’s journey in building an AI-based tutoring app
2025 • Designing with AI 2025
Gold
Maria Giudice
Empowering change: Reigniting purpose, passion and impact in research
2025 • Advancing Research 2025
Gold
Shipra Kayan
Emerging principles for using AI in Design: What the product design team at Miro has learned from deeply integrating AI in their workflow
2025 • Designing with AI 2025
Gold
Josh Clark
Sentient Design, AI, and the Radically Adaptive Experience (1st of 3 seminars)
2025 • Rosenfeld Community
Kristin Skinner
Theme 1 Intro
2021 • DesignOps Summit 2021
Gold

More Videos

Bria Alexander

"Sponsor sessions are not sales pitches; they are content-rich and free to anyone who wants to attend."

Bria Alexander

Opening Remarks

September 9, 2022

Ariel Kennan

"We want regular monthly meetings to keep conversations alive while being doable for everyone’s schedules."

Ariel Kennan

Civic Design in 2022

January 13, 2022

Mariah Hay

"Technology is easy, people are not dealing with people, it takes a lot out of everyone."

Mariah Hay Marina Martin Husani Oakley Eduardo Ortiz

BUILD: Discussion

June 14, 2018

Lija Hogan

"Inclusive design isn't an add-on; it should be part of the minimum viable product to serve diverse human perspectives."

Lija Hogan

Contexts of Use: A Framework for Connection

December 9, 2021

Vanessa Varin

"What's weak feedback? Vague, off target, or late stuff like make it pop or opinions with no owner or next step."

Vanessa Varin

Feedback: The Other F-Word

September 10, 2025

Veevi Rosenstein

"The proof of concept actually worked, but it had to be coded as an internal application, and somebody would have to maintain the tool."

Veevi Rosenstein

Building for Scale: Creating the Zendesk UX Research Practice

January 8, 2024

Megan Blocker

"Good research can be the best thing for the diagnosis of the problem in a strategy."

Megan Blocker Mujtaba Hameed Victor Udoewa

Panel: Excellence in Impact

March 25, 2024

Sheryl Cababa

"Evaluating interventions must loop back to expand understanding of consequences and radiating effects."

Sheryl Cababa

Expanding Your Design Lens with Systems Thinking

February 23, 2023

Harry Max

"All lists are prioritized lists — what's most important should be at the top."

Harry Max Jim Meyer

Prioritization for Leaders (2nd of 3 seminars)

June 27, 2024