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
Luz Bratcher
This Is a Talk for Tired People
2022 • Design at Scale 2022
Gold
Joseph Meersman
Sweating the Pixel: Scaling Quality through Critique
2021 • Design at Scale 2021
Gold
Josina Vink
Navigating the pitfalls of systems thinking in service design
2024 • Advancing Service Design 2024
Gold
Jorge Arango
[Demo] How to re-categorize content at scale using LLMs
2024 • Designing with AI 2024
Gold
Smitha Papolu
Theme 3 Discussion
2019 • Enterprise Experience 2019
Gold
Melinda Belcher
Bridging the Gap: Making the Most of the Differences Between Agency and Enterprise
2024 • Enterprise Experience 2020
Gold
Bria Alexander
Theme 1 Intro
2024 • DesignOps Summit 2024
Gold
Mariah Hay
Ethics in Tech Education: Designing to Provide Opportunity for All
2018 • Enterprise Experience 2018
Gold
Andy Warr
Under My (Research) Umbrella: The Benefits and Challenges of Building a Unified Insights Function
2024 • Advancing Research 2024
Gold
Jessica Norris
ADHD: A DesignOps Superpower
2022 • DesignOps Summit 2022
Gold
Michael Polivka
Scaling Design through Relationship Maps
2017 • DesignOps Summit 2017
Gold
Bria Alexander
Opening Remarks
2021 • Design at Scale 2021
Gold
Sol Mesz
Hands or Brains? How to Hire for Strategy, Strategically
2024 • Enterprise Experience 2020
Gold
Laura Klein
Human vs. machine: Testing AI’s ability to synthesize and analyze research
2026 • Advancing Research 2026
Gold
Mark Interrante
Collaboration Flows in Product Development
2017 • Enterprise Experience 2017
Gold
Ned Dwyer
The Future of DesignOps is Tool Consolidation
2024 • DesignOps Summit 2024
Gold

More Videos

Jon White

"Don’t try to tag all historical work at once — tag as you go to avoid re-platforming nightmares."

Jon White Erin May

Unsticking Research for Better Information Flow

March 11, 2026

Luz Bratcher

"What if your value is measured by your being and not by your output?"

Luz Bratcher

This Is a Talk for Tired People

June 10, 2022

Ignacio Martinez

"We built a career path to make evaluations as fair and consistent as possible across roles."

Ignacio Martinez

Fair and Effective Designer Evaluation

September 25, 2024

Bria Alexander

"Design ops is still defining its service offering and must articulate value both internally and to business partners - Zi."

Bria Alexander Patrizia Bertini Peter Boersma Jon Fukuda Dave Malouf Theresa Slate Changying (Z) Zheng

Charting the future of DesignOps: A community workshop

April 18, 2024

Michael Weir

"Eye tracking first fixation shows what’s salient, but repeated fixation and revisit counts tell you what truly interests users."

Michael Weir

Mixed Methods and Behavioural Science

May 26, 2023

Sam Proulx

"Multiple payment providers aren’t just a feature; they’re an accessibility lifeline for people who can’t read or reach their credit card easily."

Sam Proulx

Online Shopping: Designing an Accessible Experience

October 3, 2023

Alla Weinberg

"Psychological safety is the felt permission to be honest, to speak up, and admit mistakes without fear."

Alla Weinberg

People Are Sick of Change: Psychological Safety is the Cure

July 20, 2023

Amy Paris

"If you don’t collect data on somebody, they become invisible and nobody should be invisible."

Amy Paris Danielle Thierry

Delivering Equity: Government Services for All Ages, Languages, Sexual Orientations, and Gender Identities

December 9, 2021

Francesca Barrientos, PhD

"You need to come up with your own definition of design maturity based on your team’s understanding and context."

Francesca Barrientos, PhD

You Need Your Own Definition of Design Maturity

June 8, 2022