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
Sam Ladner
How Research Can Drive Strategic Foresight
2022 • Advancing Research 2022
Gold
Emily Danielson
“I mean, I can lift a shovel”: Design Skills in Disaster Response
2022 • Design at Scale 2022
Gold
Boon Yew Chew
Making Sense of Systems—and Using Systems to Make Sense of the Enterprise
2023 • Enterprise UX 2023
Gold
Jennifer Strickland
Adopting a "Design By" Method
2021 • Civic Design 2021
Gold
Rachael Dietkus, LCSW
Trauma-Responsive Design: Reimagining the Future of Design Now
2021 • Civic Design 2021
Gold
John Devanney
The Design Management Office
2017 • DesignOps Summit 2017
Gold
Matt Stone
Scaling Empathy, A Case Study in Change Management
2021 • Design at Scale 2021
Gold
Kara Kane
Communities of Practice for Civic Design
2022 • Civic Design Community
Surya Vanka
Unleashing Swarm Creativity to Solve Enterprise Challenges
2021 • Design at Scale 2021
Gold
Susan Weinschenk
Evaluating the Maturity of UX in Your Organization
2020 • Enterprise Community
Dave Malouf
Theme 3: Introduction and Provocation
2024 • DesignOps Summit 2020
Gold
Mark Interrante
AI for Prioritization (3rd of 3 seminars)
2024 • Rosenfeld Community
Kit Unger
Theme 1 Intro
2022 • Design at Scale 2022
Gold
Libby Maurer
Treating Diversity & Inclusion in Hiring as a Design Problem
2019 • Enterprise Community
Kristin Wisnewski
Measuring What Matters
2019 • DesignOps Summit 2019
Gold
John Paul de Guzman
10k Screens Later: How We Became a Data-Driven Design Organization
2024 • DesignOps Summit 2024
Gold

More Videos

Sheryl Cababa

"We have to be deliberate about the long-term change we are creating and consider unintended consequences more explicitly."

Sheryl Cababa

Expanding Your Design Lens with Systems Thinking

February 23, 2023

Caitlyn Hampton

"The agents are brutally honest with their feedback, which helps us prioritize features that actually matter to them."

Caitlyn Hampton Monica Lee Jina Yoon

Compass 101: Growing Your Career In A Startup World

June 11, 2021

Silke Bochat

"Plans are useless, but planning is indispensable. You have to keep moving forwards even if the destination keeps changing."

Silke Bochat

5 Antifragile Strategies for a DesignOps 2.0

September 23, 2024

Christian Rohrer

"Every great user experience begins with meeting a user need at its very core."

Christian Rohrer

Insight Types That Influence Enterprise Decision Makers

May 13, 2015

Jaime Creixems

"Respect your design system rules to ensure consistent experiences across your product and teams."

Jaime Creixems

Best Practices when Creating and Maintaining a Design System

June 7, 2023

Jeff Gothelf

"Disruptive innovation is about changing customer behavior, not shipping features."

Jeff Gothelf

Innovation Studios: the Engines of Enterprise Experimentation

May 14, 2015

Josh Clark

"Sentient design is about proposing direction without imposing it—laying a road in front of the user, but letting them choose."

Josh Clark Veronika Kindred

Sentient Design: New Design Patterns for New Experiences (3rd of 3 seminars)

February 12, 2025

Sarah Rink

"Observers interrupting sessions was a weird behavior we had to manage with clear rules."

Sarah Rink

Remote User Research: Dos and Don'ts from the Virtual Field

June 11, 2020

Alexandra Schmidt

"The current design education system doesn't always prepare designers for the complexity of enterprise challenges."

Alexandra Schmidt

Enterprise UX Playbook

December 1, 2022