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
Erin Malone
Understanding the past to prepare for the future
2024 • Rosenfeld Community
Taylor Jennings
Repository Retrospective: Learnings from Introducing a Central Place for UX Research
2022 • Advancing Research 2022
Gold
Jane Davis
Strategic Shifts and Innovations in User Research: Navigating Challenges and Opportunities
2025 • Advancing Research 2025
Gold
Jenny Price
From Tradition to Transformation: Unlocking Startup Agility in a Legacy Enterprise
2025 • DesignOps Summit 2025
Gold
Bilan Hashi
The Tension Between Story Collecting and Story Telling in Research
2021 • Advancing Research 2021
Gold
Samuel Proulx
Designing for Disability, Innovating for Everyone
2025 • Advancing Research 2025
Gold
Bram Wessel
Enterprise Information Architecture
2020 • Enterprise Community
Sheri Byrne-Haber
The Importance of Accessible Design Systems
2024 • DesignOps Summit 2020
Gold
Sam Yen
Driving Organizational Change Through Design? Do more of this and less of that
2017 • Enterprise Experience 2017
Gold
Jemma Ahmed
Theme 2 Intro
2024 • Advancing Research 2024
Gold
Bria Alexander
Opening Remarks
2021 • Design at Scale 2021
Gold
Kristen Guth, Ph.D.
Out of the FOG: A Non-traditional Research Approach to Alignment
2023 • Advancing Research 2023
Gold
Lona Moore
Scaling Design Beyond Designers
2021 • Design at Scale 2021
Gold
Alla Weinberg
Cross-Functional Relationship Design
2022 • Design in Product 2022
Gold
George Aye
That Quiet Little Voice: When Design and Ethics Collide
2022 • Civic Design 2022
Gold
Sharbani Dhar
Breathing Room for Delight
2024 • Enterprise Experience 2020
Gold

More Videos

Erin Hauber

"Change is a constant in design, but at USAA it often felt like change within change — inception-like change."

Erin Hauber

Design is Not the Frosting on the Scaled Agile Layer Cake

October 24, 2019

Megan Kierstead

"Our jobs as researchers isn’t really to do research. It’s to influence people and help them make decisions."

Megan Kierstead

You Are a Badass at UX: Overcoming Imposter Syndrome

March 10, 2021

Maggie Dieringer

"We had to show rather than say why design operations roles existed."

Maggie Dieringer

Creating Consistency Through Constant Change

January 8, 2024

Meaghan Waters

"We’ve seen organizations try to run 52 projects with only 36 teams—distraction at its worst."

Meaghan Waters Fotina Koutropoulous

Lack of Product Thinking will Doom Your Legacy Modernization

June 9, 2021

Jemma Ahmed

"The gap between market research and user research is narrowing; their methods and questions are converging."

Jemma Ahmed

Bringing together market and user research

October 17, 2019

Maria Taylor

"Trust is a major enabler for tacit knowledge sharing because people must feel safe to be vulnerable and share their knowledge."

Maria Taylor

Knowledge is Power: Managing the Lifeblood of the Design Org

October 3, 2023

Sam Proulx

"Accessibility is now considered not just a moral necessity and a human right but a business good because accessible products are better and easier for everyone to use."

Sam Proulx

Understanding Screen Readers on Mobile: How And Why to Learn from Native Users

June 6, 2023

Catherine Blizzard

"The team can now tell the World Service what to do, not just what the audience thinks."

Catherine Blizzard

Using Integrated Insight to Drive Growth

March 10, 2022

Randolph Duke II

"I know who you are and I have opinions."

Randolph Duke II

War Stories LIVE! Randy Duke II

March 30, 2020