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
Dave Malouf
Theme 3: Introduction and Provocation
2024 • DesignOps Summit 2020
Gold
Dave Malouf
The Future of DesignOps
2024 • DesignOps Summit 2020
Gold
Aras Bilgen
Research Democratization: A Debate
2023 • Advancing Research 2023
Gold
Max Gadney
Assessing UX jobs for impact in climate
2024 • Climate UX Interest Group
Kate Koch
Flex Your Super Powers: When a Design Ops Team Scales to Power CX
2021 • DesignOps Summit 2021
Gold
Louis Rosenfeld
How AI will Change DesignOps Tooling
2023 • DesignOps Summit 2023
Gold
Erin Weigel
Testing and Experimentation Tools
2026 • Advancing Research 2026
Conference
Rachael Dietkus, LCSW
The power to heal and harm
2025 • Advancing Research 2025
Gold
Helen Armstrong
Augment the Human. Interrogate the System.
2023 • Enterprise UX 2023
Gold
Jack Moffett
UX Metrics That Matter and The Future of our Design at Scale Conference: A Community Conversation
2022 • Enterprise Community
Lisa Welchman
Cleaning Up Our Mess: Digital Governance for Designers
2018 • Enterprise Experience 2018
Gold
Tutti Taygerly
Make Space to Lead
2021 • Design at Scale 2021
Gold
Jim Kalbach
Jazz Improvisation as a Model for Team Collaboration
2017 • DesignOps Summit 2017
Gold
Jonathan Fairman
Integrating generative AI into enterprise products: A case study from dscout
2024 • Designing with AI 2024
Gold
Tracy McGoldrick
IBM User Experience Program—The What, Why and How
2021 • Advancing Research Community
Lija Hogan
Contexts of Use: A Framework for Connection
2021 • Civic Design 2021
Gold

More Videos

Kit Unger

"If growth board content overlaps with quarterly business reviews, don’t do both; instead, inject an outcome mindset into existing meetings."

Kit Unger Jackie Ho Veevi Rosenstein Vasileios Xanthopoulos

Theme 2: Discussion

January 8, 2024

Mariesa Lenz

"No bee micromanages another; they have different roles and contribute independently but in sync."

Mariesa Lenz

What Beekeeping Taught me about Product Teams

October 29, 2025

Jesse Zolna

"Doing research is not always the most natural transition for people who don't really care about research."

Jesse Zolna

Inviting the Whole Org to Come See For Yourself

March 30, 2020

Catt Small

"Creating evergreen documents enables asynchronous influence — it’s not about being in the room all the time, it’s about having your voice heard."

Catt Small Micah Bennett Brian Carr Jessica Harllee

What's Next for ICs: Exploring Staff and Principal Designer Roles

February 22, 2024

Louis Rosenfeld

"There’s a difference between generating prompts and actually generating useful design outputs that fit your unique vision."

Louis Rosenfeld Billy Carlson Jon Fukuda Maria Taylor

How AI will Change DesignOps Tooling

October 3, 2023

Sheryl Cababa

"Systems thinking requires collaborating with diverse stakeholders rather than working in isolation."

Sheryl Cababa

Expanding your Design Lens with Systems Thinking

March 28, 2023

Saara Kamppari-Miller

"Metrics are always a conversation, they shouldn’t be a covenant."

Saara Kamppari-Miller Nicole Bergstrom Shashi Jain

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

November 13, 2024

John Devanney

"Learning and knowledge management isn’t just about quality of work, it’s deeply tied to retaining people and motivation."

John Devanney

The Design Management Office

November 6, 2017

Erika Flowers

"With Mural, information is delivered two ways, not just one; everyone can contribute and view together."

Erika Flowers

Introduction to MURAL for UX

June 11, 2021