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
James Chudley
Decarbonising User Journeys: How minimising enables us to do more with less
2025 • Climate UX Interest Group
Etienne Fang
The Power of Care: From Human-Centered Research to Humanity-Centered Leadership
2021 • Advancing Research 2021
Gold
Bria Alexander
The Big Question about Resilience: A panel discussion
2024 • DesignOps Summit 2024
Gold
Michael Weir
Mixed Methods and Behavioural Science
2023 • Rosenfeld Community
Holly Cole
Panel Discussion: Growing People and Teams
2018 • DesignOps Summit 2018
Gold
Sheri Byrne-Haber
The Importance of Accessible Design Systems
2024 • DesignOps Summit 2020
Gold
Charlotte Vorbeck
Pipeline to Civic Design
2021 • Civic Design 2021
Gold
Ed Mullen
Designing the Unseen: Enabling Institutions to Build Public Trust
2022 • Civic Design 2022
Gold
Victor Udoewa
Radical Participatory Research: Decolonizing Participatory Processes
2022 • Advancing Research 2022
Gold
Robin Beers
Panel: Excellence in Communicating Insights
2024 • Advancing Research 2024
Gold
Milan Guenther
A Shared Language for Co-Creating Ambitious Endeavours
2023 • Enterprise UX 2023
Gold
Erin Weigel
Get Your Whole Team Testing to Design for Impact
2024 • Rosenfeld Community
Jon Fukuda
The Big Question about Innovation: A Panel Discussion
2024 • DesignOps Summit 2024
Gold
Jim Kalbach
Peace is waged with sticky notes: Mapping Real-World Experiences
2018 • Enterprise Experience 2018
Gold
Anna Poznyakov
Get The Most Out Of Stakeholder Collaboration—and Maximize Your Research Impact
2021 • Advancing Research 2021
Gold
Kurdin Bazaz
Culture, DIBS & Recruiting
2021 • Design at Scale 2021
Gold

More Videos

John Cutler

"A story lets people assign the meaning that's powerful to them and then think about the decisions they need to make and align."

John Cutler

The Alignment Trap

November 29, 2023

Samuel Proulx

"If we design for the edges, we get the middle for free."

Samuel Proulx

From Standards to Innovation: Why Inclusive Design Wins

November 19, 2025

Alastair Simpson

"When trust is high, speed goes up and costs go down."

Alastair Simpson

Debunking the Myths of Cross-Disciplinary Collaboration

October 24, 2019

Kit Unger

"People may even forget why you are if you’re conversations that bring the best out of you as a human being."

Kit Unger Lada Gorlenko

Theme 3 Intro

June 10, 2022

JD Buckley

"It takes patience—brick by brick—to move things forward in large organizations."

JD Buckley Margot Dear Jim Kalbach Janaki Kumar

COMMUNICATE: Discussion

June 14, 2018

Husani Oakley

"Language is critical to shared understanding and shared context."

Husani Oakley

Theme Two Intro

June 6, 2023

Llewyn Paine

"If you don’t need a designer to create designs, what happens to designers?"

Llewyn Paine

Day 1 Using AI in UX with Impact

June 10, 2025

Scott Plewes

"Math by itself can be misleading and full of biases, but combined with humanities research, it can be very powerful."

Scott Plewes

Why Isn't Your UX Approach Going Viral?: A Mathematical Model

March 28, 2023

Mark Interrante

"Think of AI not as a magic eight ball, but as a highly educated intern that can help with routine tasks."

Mark Interrante Harry Max

AI for Prioritization (3rd of 3 seminars)

July 11, 2024