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: 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
Vasileios Xanthopoulos
A Top-Down and Bottom-Up Approach to User-Centric Maturity at Scale
2024 • Enterprise Experience 2020
Gold
Florence Okoye
AfroFuturism and UX Research
2023 • Advancing Research 2023
Gold
Bria Alexander
OKRs—Helpful or Harmful?
2022 • DesignOps Community
Silke Bochat
5 Antifragile Strategies for a DesignOps 2.0
2024 • DesignOps Summit 2024
Gold
Bria Alexander
Welcome
2022 • DesignOps Summit 2022
Gold
Fatimah Richmond
The Future of ReOps as a Strategic Function: A Roadmap for Getting There
2024 • Advancing Research 2024
Gold
Sarah Barrett
The "How" of Enterprise Information Architecture
2023 • Enterprise UX 2023
Gold
Jeff Ephraim Bander
Eye Tracking Gamechanger: Why Smartphone Eye Tracking will Revolutionize Your UX Research
2022 • Advancing Research 2022
Gold
Bria Alexander
Opening Remarks
2021 • DesignOps Summit 2021
Gold
Kristin Skinner
Group Activity: A Deep Dive Into Value and Outcomes
2019 • DesignOps Summit 2019
Gold
Kim Fellman Cohen
Measuring the Designer Experience
2019 • DesignOps Summit 2019
Gold
Chris Engledowl
A Mixed Method Approach to Validity to Help Build Trust
2023 • QuantQual Interest Group
Carol Scott
Avoid Harming Your Team and Users: Promoting Care and Brand Reputation with Trauma-Informed UX Practices
2025 • Rosenfeld Community
Max Gadney
Assessing UX jobs for impact in climate
2024 • Climate UX Interest Group
Surya Vanka
Unleashing Swarm Creativity to Solve Enterprise Challenges
2021 • Design at Scale 2021
Gold
John Mortimer
Panel Discussion
2024 • Advancing Service Design 2024
Gold

More Videos

Daniel J. Rosenberg

"AI-generated UX is not about replacing designers, but removing grunt work to focus on higher-order design."

Daniel J. Rosenberg

Designing with and for Artificial Intelligence

August 11, 2022

Dan Mall

"I give every team I work with an 80/20 rule: 80% of your UI can be standard components, and 20% must be custom designed."

Dan Mall

“Ask Me Anything” with Dan Mall, Author of Upcoming Rosenfeld Title, Design that Scales

October 2, 2023

Peter Morville

"The system always kicks back—the consequences of our actions unfold over time."

Peter Morville

The Architecture of Understanding

May 13, 2015

Kyria Stephens

"Gunshots were a routine sound growing up. We became numb to it."

Kyria Stephens Marlon Kerner

Power to Heal: Civic Design in the Aftermath of Tragedy

November 17, 2022

Nathan Shedroff

"You wouldn’t use design thinking to optimize inventory—you use Six Sigma."

Nathan Shedroff

Redefining Value: Bridging the Innovation Culture Divide

May 14, 2015

Kim Fellman Cohen

"If you don’t have the support you need—budget, time, people—your program is at high risk of failure."

Kim Fellman Cohen

Measuring the Designer Experience

October 23, 2019

Bria Alexander

"Supporting different ways people prefer to engage—like asynchronous workshops or prep time—helps introverts and extroverts contribute equally."

Bria Alexander Laura Gatewood Corey Long Daniel Orbach Laine Prokay Deanna Smith

The Big Question about Resilience: A panel discussion

September 23, 2024

Bria Alexander

"Thank you to our sponsors, we could not do this conference without you."

Bria Alexander Louis Rosenfeld

Opening Remarks Day 2

March 26, 2024

Changying (Z) Zheng

"When operations do their job well, people don’t even know it exists until something breaks."

Changying (Z) Zheng

Practical DesignOps: From Ideas to Tools That Teams Actually Use

September 25, 2025