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
Malini Rao
Lessons Learned from a 4-year Product Re-platforming Journey
2021 • Design at Scale 2021
Gold
Alnie Figueroa
The Future of Design Operations: Transforming Our Craft
2025 • DesignOps Summit 2025
Gold
Ivana Ng
Level Up Your Program with ProductOps
2024 • Enterprise Experience 2020
Gold
Brad Orego
Bringing Customer Research to More Internal Teams
2022 • Advancing Research 2022
Gold
Roberta Dombrowski
Making Research a Team Sport
2022 • Advancing Research 2022
Gold
Sean Baker
Weaving Knowledge Management into the Fabric of Our Design Practice
2025 • DesignOps Summit 2025
Gold
Jill Fruchter
Inconvenient Insights: The Researcher's Role is to Stay Curious
2023 • Advancing Research 2023
Gold
Samuel Proulx
From Standards to Innovation: Why Inclusive Design Wins
2025 • DesignOps Summit 2025
Gold
Elena Naids
The Power of Difficult Conversations: A Case Study on How We Introduced Design Ops in the Federal Government Space
2023 • DesignOps Summit 2023
Gold
Nathan Shedroff
Redefining Value: Bridging the Innovation Culture Divide
2015 • Enterprise UX 2015
Gold
Alla Weinberg
Healing Toxic Stress
2024 • DesignOps Summit 2024
Gold
Sara Conklin
A UXer’s 12-Month Journey from Climate Concern to Climate Credibility
2025 • Climate UX Interest Group
Luke Roberts
Panel Discussion
2024 • Advancing Service Design 2024
Gold
Cheryl Platz
Demystifying Multimodal Design: The Design Practice You Didn't Know You're Doing
2024 • Rosenfeld Community
Jorge Arango
Scale Smart: AI-Powered Content Organization Strategies
2024 • DesignOps Summit 2024
Gold
Sam Proulx
Designing For Screen Readers: Understanding the Mental Models and Techniques of Real Users
2021 • DesignOps Summit 2021
Gold

More Videos

Lavy Kumar

"Employees can take as much or as little time off as they want, so long as their job gets done."

Lavy Kumar Kat Temple Shan Sebastian Tara Jensen Jenn Chou

Future of Work

June 9, 2021

Andreas Huebner

"Design and research at Compass have become so integrated that we become these powerful partners driving the product vision."

Andreas Huebner Amy Takata Craig Brookes

What Is It Like To Be Part of The UX Team at Compass?

March 11, 2021

Ricardo Martins

"Conjoint analysis reveals how consumers make choices by examining trade-offs they are willing to make."

Ricardo Martins

Unlocking the power of advanced quantitative methods

March 12, 2025

Monty Hammontree

"Learning invalidates being right as the currency of research and product decisions."

Monty Hammontree

The Future of UX Research

December 3, 2020

Benjamin Real

"We didn’t have the maturity of the practice itself to specify the impacts of losing design ops until it happened."

Benjamin Real

Showing the Value of DesignOps by Not Having a DesignOps Team

October 21, 2020

Kate Towsey

"Adoption is crucial; build your community early by involving them in co-design and pilots."

Kate Towsey

Ask Me Anything (AMA) with Kate Towsey

April 2, 2025

Steve Portigal

"Trust is built by showing you’re there to help make them succeed, not just push your agenda."

Steve Portigal Chris Chapo Kelly Goto Christian Rohrer

Discussion

May 13, 2015

Sam Proulx

"Browser autofill isn’t just convenience; it removes barriers to purchase for people with physical disabilities."

Sam Proulx

Online Shopping: Designing an Accessible Experience

March 28, 2023

Sam Proulx

"For screen reader users, you often need to build entirely new prototypes using systems like Microsoft Word or Google Docs to convey semantic information."

Sam Proulx

Prototype Reviews, People With Disabilities, and You

October 1, 2021