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
Joseph Meersman
Sweating the Pixel: Scaling Quality through Critique
2021 • Design at Scale 2021
Gold
Emily Williams
When UX Research and Institutional Racism Collide: A Case Study
2021 • Advancing Research 2021
Gold
Jim Kalbach
Peace is waged with sticky notes: Mapping Real-World Experiences
2018 • Enterprise Experience 2018
Gold
Samuel Proulx
Designing beyond caricatures: Embracing real, diverse user needs
2024 • Advancing Service Design 2024
Gold
Emily DiLeo
Stronger Together: Lessons Learned from UX Research Ops
2024 • DesignOps Summit 2024
Gold
Alexandra Schmidt
Enterprise UX Playbook
2022 • Enterprise Community
Peter Merholz
Design at Scale is People!
2021 • Design at Scale 2021
Gold
Saara Kamppari-Miller
Cartography for Design Communities
2025 • DesignOps Summit 2025
Gold
Louis Rosenfeld
You’ve got Gold! A Rosenverse demo with Lou Rosenfeld
2026 • Designing with AI 2026
Gold
Bria Alexander
Day 3 Welcome
2024 • DesignOps Summit 2024
Gold
Jon Fukuda
Storytelling for DesignOps
2023 • DesignOps Community
Shipra Kayan
How we Built a VoC (Voice of the Customer) Practice at Upwork from the Ground Up
2021 • DesignOps Summit 2021
Gold
Jim Kalbach
Jazz Improvisation as a Model for Team Collaboration
2017 • DesignOps Summit 2017
Gold
JJ Kercher
A Roadmap for Maturing Design in the Enterprise
2018 • Enterprise Experience 2018
Gold
Farid Sabitov
Automatization for Large Enterprise Teams
2024 • DesignOps Summit 2020
Gold
Laine Riley Prokay
Carving a Path for Early Career DesignOps Practitioners
2022 • DesignOps Summit 2022
Gold

More Videos

Dr. Karl Jeffries

"Creativity fuels design, design fuels innovation."

Dr. Karl Jeffries

The Science of Creativity for DesignOps

January 8, 2024

Amy Marquez

"Making your chief legal officer your best friend as a designer makes a lot of sense."

Amy Marquez

INVEST: Discussion

June 15, 2018

Steve Portigal

"Breaking enterprise into small segments lets you apply research methods effectively at scale."

Steve Portigal Chris Chapo Kelly Goto Christian Rohrer

Discussion

May 13, 2015

Alicia Mooty

"Dedicated staffing gives designers deep vertical mastery but limits horizontal experience."

Alicia Mooty

Design Staffing Models

September 30, 2021

Ana Maria Montero Barrantes

"For the right audience, if applied correctly, humor and music can move people in many ways."

Ana Maria Montero Barrantes Aditi Dhar Michelle Kaplan Nate Osborne Matt Laurence

The Authentic UX Talent Show

January 8, 2024

Lada Gorlenko

"If your users are happy, that anecdotal feedback often carries more weight early than quantitative metrics."

Lada Gorlenko Sharbani Dhar Sébastien Malo Rob Mitzel Ivana Ng Michal Anne Rogondino

Theme 1: Discussion

January 8, 2024

Sofia Quintero

"We made it a priority from day one to support data exports so customers can leave without wasting weeks migrating data."

Sofia Quintero

The Product Philosophy Behind EnjoyHQ

March 10, 2021

Laura Klein

"When things start to go bad, we’re going to pull the plug on it immediately—that helps build trust."

Laura Klein

Unique challenges of innovation in enterprises

April 23, 2020

Andrew Michael

"Typically, data analytics teams are big and well-funded, while UX research teams are smaller and struggle for resources."

Andrew Michael

Building a Product Insights Team

March 10, 2022

Latest Books All books