Rosenverse
Design Systems To-Go: Reimagining Developer Handoff, and Introducing App Builder (Part 2)

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: Reimagining Developer Handoff, and Introducing App Builder (Part 2)

Gold
Friday, October 1, 2021 • DesignOps Summit 2021
Share the love for this talk
Design Systems To-Go: Reimagining Developer Handoff, and Introducing App Builder (Part 2)
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

  • •

    White-label design systems like Indigo.Design enable easy branding customization with minimal time and effort.

  • •

    The integrated design-to-development pipeline outputs real coded web components (HTML, TypeScript, CSS) instead of static specs.

  • •

    Ab Builder provides a cloud-based collaborative workspace where designers and developers operate on identical visual and functional components.

  • •

    Dynamic data binding in components supports real data from JSON or CMS sources, improving prototype realism and development readiness.

  • •

    Compared to tools like Adobe XD or Zeplin, this solution drastically reduces developer rework by providing pre-built, accessible, and extensible components.

  • •

    Layouts are translated from absolute positioning in design tools to web-based row and flex layouts for accurate responsive rendering.

  • •

    The tool supports multiple design platforms including Sketch, Adobe XD, and soon Figma with plugins to enable smooth importing and exporting.

  • •

    Developers get fully functional components with accessibility, localization, keyboard navigation, and UI behavior built in from the start.

  • •

    Enterprise-ready components like data grids come with advanced features such as filtering, sorting, and grouping embedded out-of-the-box.

  • •

    Design changes pushed to the library notify projects, allowing synchronized updates across multiple products with minimal manual effort.

Notable Quotes

"Changing branding and the look and feel should be possible with very quick and easy interactions, not taking another 10 weeks to customize."

"The components you design in Sketch or XD come with matching coded components in the app builder, so what you design is what you get in code."

"Our approach eliminates the need for developers to inspect design specs to recreate styling and layouts from scratch."

"You get real coded components, not just HTML snippets or style attributes, meaning developers can drag, drop, and extend with hooks already in place."

"The biggest gain is about getting value out sooner, with an 80 percent efficiency improvement from design to running app."

"All our components can be data bound so the developer can point to any data source like CMS or JSON to populate UI elements naturally."

"We translate absolute positioning from design tools into web-based layouts using row and flex concepts familiar to developers."

"The Ab Builder is a collaborative workspace where designers and developers have synchronized component libraries and themes."

"Our tool is not partial to Sketch — we support Adobe XD and will soon support Figma, enabling flexible integration in design workflows."

"A mature design system needs both UI kits and matching developer component libraries; we provide both out of the box."

Ask the Rosenbot
Elana Chapman
Getting started with accessibility research
2025 • Rosenfeld Community
Peter Merholz
The Trials and Tribulations of Directors of UX
2023 • Enterprise Community
Victor Udoewa
Radical Participatory Design: Decolonizing Participatory Design Processes
2021 • Civic Design 2021
Gold
Peter Van Dijck
Hands-on AI #1: Let’s write your first AI eval
2025 • Rosenfeld Community
Randolph Duke II
War Stories LIVE! Randy Duke II
2020 • Advancing Research 2020
Gold
Tatyana Mamut
Opening Keynote: Breaking Conway's Law--or How to Work Differently and Not Ship Your Org Chart
2019 • Enterprise Experience 2019
Gold
Alëna Iouguina
Designing Systems at Scale
2018 • DesignOps Summit 2018
Gold
Bob Baxley
Theme 4: Discussion
2024 • Enterprise Experience 2020
Gold
Billy Carlson
Principles of Team Wireframing
2023 • DesignOps Summit 2023
Gold
Jon Fukuda
Theme One Intro
2022 • DesignOps Summit 2022
Gold
Lisa Spitz
Building Trust Through Equitable Research Practices
2022 • Civic Design 2022
Gold
DesignOps and The Great Talent War of 2021
2021 • DesignOps Community
Llewyn Paine
[Demo] Deploying AI doppelgangers to de-identify user research recordings
2024 • Designing with AI 2024
Gold
Kim Lenox
Leading Distributed Global Teams
2019 • Enterprise Community
Frances Yllana
Theme 2 Intro
2024 • DesignOps Summit 2024
Gold
Ariel Kennan
Theme Two Intro
2022 • Civic Design 2022
Gold

More Videos

Mark Interrante

"Prioritization work is a political process, and politics are hard to do in technology."

Mark Interrante Harry Max

AI for Prioritization (3rd of 3 seminars)

July 11, 2024

Patrizia Bertini

"What if we are optimizing ourselves into relevance?"

Patrizia Bertini

The (r)evolution of designOps: It’s Time to Think (really) BIG

September 11, 2025

Shan Shen

"The phrase card sort may not require translation itself, but the activity it represents certainly does."

Shan Shen

Translating UX Terms into Business Contexts

November 29, 2023

Adam Thomas

"Stop, pivot, or invest early—these are the survival metric decisions that save companies."

Adam Thomas

Survival Metrics – Making Change in a Fast, Data-Informed, and Politically Safe Way

December 6, 2022

Robin Beers

"Turning the research lens on both the ‘in here’ organization and the ‘out there’ customer reality helps reveal misalignments and opportunities."

Robin Beers

Research as a Catalyst for Organizational Transformation

March 12, 2021

Sheri Byrne-Haber

"If you’re rewarding designers for delivering on time, great, but if you reward them for delivering accessible products on time, you’ll get better results."

Sheri Byrne-Haber

Accessibility at Scale

June 9, 2021

Joseph Meersman

"Critiques help teams stop being the lone ranger and instead iterate faster together with purpose and clarity."

Joseph Meersman

Sweating the Pixel: Scaling Quality through Critique

June 10, 2021

Deanna Washington

"The next big thing will be knowledge management powered by new no-code and integrative tools."

Deanna Washington Bria Alexander Jon Fukuda Saara Kamppari-Miller Farid Sabitov

Connecting the Ops: Plenary Panel and Closing Circle

September 9, 2022

Aaron Stienstra

"Citizen participation is like eating spinach—everyone agrees it’s good, but few actually do it meaningfully."

Aaron Stienstra Lashanda Hodge

Leveraging Civic Design to Advance Equity and Rebuild Trust in the US Federal Government

December 8, 2021