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

  • Indigo Design system provides a white-label design system that is easily customizable with minimal effort, unlike more rigid legacy systems.

  • The AB Builder creates a shared cloud workspace where designers and developers access identical component libraries and themes.

  • Design components created in Sketch can be imported and transformed into real web code—HTML, TypeScript, and CSS—with interactive capabilities.

  • AB Builder supports live data binding from JSON or CSV sources, allowing designers to preview real data-driven interfaces.

  • Unlike tools such as XD or Figma, which offer only code snippets or specs, this workflow delivers fully coded components ready for immediate use and extension by developers.

  • Enterprise-grade components like data grids come with built-in features such as sorting, filtering, and grouping, reducing custom development effort.

  • The layout approach translates Sketch's absolute positioning into web-friendly row and flexbox layouts for responsiveness.

  • Theme management is streamlined, enabling one-click theme creation with dynamic color palettes that apply seamlessly across projects.

  • Using this system, teams can achieve approximately 80% efficiency gains in the design-to-development handoff process.

  • Support for multiple design tools (Sketch, XD, Figma) ensures flexibility and integrates into existing design workflows.

Notable Quotes

"Changing branding and different aspects of the design system should be possible with very quick and easy interactions."

"We provide a set of over 500 icons, including domain-specific ones for healthcare, finance, and programming."

"You get real coded components and layouts that developers can drag, drop, and extend immediately without rebuilding."

"The AB Builder is a collaborative workspace accessible by both designers and developers."

"We support data binding so lists and other components can be populated with real content from JSON or CMS."

"This approach gives you a nearly pixel-perfect one-to-one match between design and the compiled app."

"Unlike tools like XD or Figma, we don’t just show specs, we ship actual components with hooks and accessibility built-in."

"The grid component isn’t just a basic table — it offers enterprise features like filtering, sorting, and grouping out of the box."

"You can publish your design from Sketch directly into the cloud and get it running as a web app in minutes."

"We’re aiming for an 80% gain in efficiency to get your value out sooner from design to development."

Ask the Rosenbot
Savannah Carlin
[Case Study] Don't botch the bot: Designing interactions for AI
2024 • Designing with AI 2024
Gold
Craig Brookes
"Just Make it Look Good" and Other Ways We're Misunderstood
2021 • Design at Scale 2021
Gold
Dave Hora
A Research Skills Evolution
2021 • Advancing Research 2021
Gold
Tanya Snook
Designing the team experience: Building culture through onboarding (Videoconference)
2021 • Enterprise Community
Lada Gorlenko
Theme 1: Discussion
2024 • Enterprise Experience 2020
Gold
Bria Alexander
Opening Remarks Day 2
2024 • Advancing Research 2024
Gold
Ariel Kennan
Theme Two Intro
2022 • Civic Design 2022
Gold
Dave Hoffer
UX Job Search AMA with Joanne Weaver and Dave Hoffer
2025 • Rosenfeld Community
Sam Proulx
Accessibility: An Opportunity to Innovate
2022 • Advancing Research 2022
Gold
Jane Reid
Self-care in User Research (Videoconference)
2020 • Advancing Research Community
Lily Aduana
5 Reasons to Bring Your Recruiting in-House (and How To Do It)
2021 • Advancing Research 2021
Gold
Dan Willis
Enterprise Storytelling Sessions
2016 • Enterprise UX 2016
Gold
Louis Rosenfeld
Becoming a Civic Designer: Making the Move from Private to Public Sector
2022 • Civic Design 2022
Gold
Jacqui Frey
Flow and Superfluidity for Design Orgs
2018 • DesignOps Summit 2018
Gold
Steve Chaparro
Bringing Into Alignment Brand, Culture and Space (Videoconference)
2020 • DesignOps Community
Indi Young
Thinking styles: Mend hidden cracks in your market
2025 • Rosenfeld Community

More Videos

Alex Hurworth

"Restoration is not just about replanting trees; it’s about rebuilding entire ecosystems."

Alex Hurworth Bonnie John Fahd Arshad Antoine Marin

Designing a Contact Tracing App for Universal Access

October 23, 2020

Laine Riley Prokay

"Building connections early in their career could create even more opportunities further along their career path."

Laine Riley Prokay Lisa Gordon

Carving a Path for Early Career DesignOps Practitioners

September 9, 2022

Eniola Oluwole

"You won’t know what success looks like until you put something out there and see how it works in practice."

Eniola Oluwole

Lessons From the DesignOps Journey of the World's Largest Travel Site

October 24, 2019

Nathan Shedroff

"Most strategy is done pretty poorly; it's misleading, sloppy, and often ignored after it's produced."

Nathan Shedroff

Double Your Mileage: Use Your Research Strategically

March 31, 2020

Sam Proulx

"Voice control on mobile goes beyond digital assistants and can fully control the device for users who cannot use touch."

Sam Proulx

Mobile Accessibility: Why Moving Accessibility Beyond the Desktop is Critical in a Mobile-first World

November 17, 2022

Feleesha Sterling

"It’s important to socialize the research program internally so teams get excited and take initiative."

Feleesha Sterling

Building a Rapid Research Program (Videoconference)

May 18, 2023

Neil Barrie

"Overlaying cultural dialogue on journey maps reveals impactful insights that need to be validated but are promising."

Neil Barrie

Widening the Aperture: The Case for Taking a Broader Lens to the Dialogue between Products and Culture

March 25, 2024

John Devanney

"Design systems help bridge the gap between design and development, but collaboration remains key."

John Devanney

The Design Management Office

November 6, 2017

Katy Mogal

"Find the curious partners who will do some of the evangelizing for you to their peers."

Katy Mogal

But Do Your Insights Scale?

March 12, 2021