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
Leisa Reichelt
The Five Dysfunctions of Democratized Research at Scale
2020 • Advancing Research 2020
Gold
Charlotte Lee
Theme 1 Intro
2021 • Civic Design 2021
Gold
Uday Gajendar
Day 1 Welcome
2024 • Designing with AI 2024
Gold
Vanessa Varin
Tools are moments. Capabilities compound.
2026 • Rosenfeld Community
Saara Kamppari-Miller
Theme Three Intro
2022 • DesignOps Summit 2022
Gold
Maria Taylor
Knowledge is Power: Managing the Lifeblood of the Design Org
2023 • DesignOps Summit 2023
Gold
Uday Gajendar
Leading through the long tail of trauma
2022 • Advancing Research Community
Juhan Sonin
Design Now! The Agenda for Action
2025 • Rosenfeld Community
Dave Malouf
The Past, Present, and Future of DesignOps: a 2-part DesignOps Community Call (Part 2)
2022 • DesignOps Community
Malini Rao
Lessons Learned from a 4-year Product Re-platforming Journey
2021 • Design at Scale 2021
Gold
Kit Unger
Theme 2: Introduction
2021 • Design at Scale 2021
Gold
Phil Hesketh
Designing Accessible Research Workflows
2021 • DesignOps Summit 2021
Gold
Ted Neward
Theme 4: Enterprise Organizational Journey
2019 • Enterprise Experience 2019
Gold
Indi Young
Paying Better Attention to the Problem with Indi Young
2019 • Advancing Research Community
Sam Proulx
Understanding Screen Readers on Mobile: How And Why to Learn from Native Users
2023 • DesignOps Summit 2023
Gold
Peter Van Dijck
Building the Rosenbot
2024 • Designing with AI 2024
Gold

More Videos

Greg Nudelman

"The biggest thing for me is that bots bring our human values to AI and help curb abuses."

Greg Nudelman

Designing Conversational Interfaces

November 14, 2019

Bud Caddell

"Susan Sogato will talk about culture as a key driver of customer success and its operational impact."

Bud Caddell

Theme 2 Intro

September 30, 2021

Billy Carlson

"Hierarchy is almost subconscious — you can design for how our eyes are naturally drawn to elements."

Billy Carlson

Pro-level UI Tips for Beginners

September 9, 2022

Robert Fabricant

"The table needs to be larger, longer, or maybe a circle of people without a table to include more voices."

Robert Fabricant Sahibzada Mayed Nidhi Singh Rathore

Industry junctures: Paths forwards for UXR and the critical decisions that get us there [Advancing Research Community Workshop Series]

October 2, 2024

Gillian Salerno-Rebic

"Journeys Spark drove a 50% CTR increase by speeding up persona-driven content optimization with AI before human validation."

Gillian Salerno-Rebic Mark Micheli

From Insight to Impact: How JourneySpark Used WEVO Pulse + Pro to Drive a 50% Lift in Ad Engagement

June 11, 2025

Victor Lombardi

"The maps lose scientific accuracy but gain understanding by simplifying complex data into color keys that people interpret quickly."

Victor Lombardi Ted Booth HK Dunston Andrew Otwell

Bridging Design and Climate Science

February 14, 2024

Lada Gorlenko

"From fast-paced tech worlds, you will appreciate the patience and perseverance it takes to move an old champion."

Lada Gorlenko

Theme 1: Intro

January 8, 2024

Dan Willis

"The more specific a story gets, the more universal the themes are felt by everybody."

Dan Willis

Enterprise Storytelling Sessions

June 3, 2019

Emily Williams

"Showing is better than telling, especially when it comes to equity."

Emily Williams Nora Fiore

When UX Research and Institutional Racism Collide: A Case Study

March 12, 2021