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
Kate Koch
Flex Your Super Powers: When a Design Ops Team Scales to Power CX
2021 • DesignOps Summit 2021
Gold
Bassel Deeb
Do More With Less: Equip and Lead Design Orgs Through Adversity
2023 • DesignOps Summit 2023
Gold
Bria Alexander
OKRs—Helpful or Harmful?
2022 • DesignOps Community
Bob Baxley
Theme 4: Intro
2024 • Enterprise Experience 2020
Gold
Jim Kalbach
Jobs To Be Done
2021 • Enterprise Community
Amanda Kaleta-Kott
The Joys and Dilemmas of Conducting UX Research with Older Adults
2022 • Advancing Research 2022
Gold
Mansi Gupta
Women-Centric Research: What, Why, How
2023 • Advancing Research 2023
Gold
Ed Mullen
Designing the Unseen: Enabling Institutions to Build Public Trust
2022 • Civic Design 2022
Gold
Deanna Zandt
The Unspoken Complexity of “Self-Care” with Deanna Zandt
2022 • Civic Design Community
Holly Cole
Panel Discussion: Growing People and Teams
2018 • DesignOps Summit 2018
Gold
Theresa Slate
Why Changing Hearts & Minds Doesn’t Work When Promoting DE&I Efforts, but Checklists Do
2023 • DesignOps Summit 2023
Gold
Joseph Williams
Unlocking impact and influence through inclusive hiring in research
2021 • Advancing Research Community
Jesse Zolna
Inviting the Whole Org to Come See For Yourself
2020 • Advancing Research 2020
Gold
Sandra Camacho
Creating More Bias-Proof Designs
2025 • Rosenfeld Community
Eduardo Ortiz
Day 3 Theme Panel
2025 • Advancing Research 2025
Gold
Stephen Anderson
Puzzled? How to Coordinate Humans for Complex Challenges
2021 • Enterprise Community

More Videos

Tina Weisser

"Information is power in organizations, so deploying AI agents means reconsidering who gets access to what data."

Tina Weisser

When AI Agents Meet Reality. Service Design Lessons from a Pilot

February 26, 2026

Kristin Skinner

"A small, dedicated design ops team has incredible leverage and impact."

Kristin Skinner

Opening Keynote: Org Design for Design Orgs

November 6, 2017

Nalini P. Kotamraju

"We built living components as conversation starters, showing instead of telling."

Nalini P. Kotamraju

An Organizational Story: Salesforce Lightning Design System

June 9, 2016

Chris Govias

"Hiring local talent embeds lived experience directly in government decision making."

Chris Govias Mai-Ling Garcia Emily Lessard

Perspectives on Civic Design

September 23, 2021

Eduardo Ortiz

"Trauma among participants and practitioners is an industry problem we can no longer ignore."

Eduardo Ortiz

Theme 3 Intro

March 13, 2025

Crystal Philcox

"I felt like a fake when I didn’t know the details of the Earned Income Tax Credit program, but later I dug in hard and changed that."

Crystal Philcox

The Many Faces of Operations

November 6, 2017

Maria Skaaden

"It’s not about old versus new. It’s about trust and deeply rooted habits."

Maria Skaaden

Continuous Design: One eye on the horizon and the other on the next wave

November 8, 2018

Kathleen Asjes

"Research democratization rarely frees up strategic research time; it often increases facilitation and ops work."

Kathleen Asjes

Research Democratization: the Good, the Bad and the Ugly

March 10, 2022

Weidan Li

"AI synthesis should be considered a human-machine mutual learning process, with AI stimulating new perspectives rather than providing conclusions."

Weidan Li

Qualitative synthesis with ChatGPT: Better or worse than human intelligence?

June 4, 2024