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."
Dig deeper—ask the Rosenbot:
More Videos
"We did all these analyses for each market and then fit the group to be proportional to key hosting and traveling characteristics."
Wyatt HaymanGlobal Research Panels (Videoconference)
August 8, 2020
"Instead of choosing colors and then checking contrast, we define target contrast ratios first and generate colors accordingly."
PJ Buddhari Nate BaldwinMeet Spectrum, Adobe’s Design System
June 9, 2021
"If we center design on people and place before technology, we create more meaningful futures."
Sarah GallimoreInspire Progress with Artifacts from the Future
November 18, 2022
"If you’re doing a lot of work that’s not in your job description, you might actually be doing leadership."
Peter MerholzThe Trials and Tribulations of Directors of UX (Videoconference)
July 13, 2023
"We need to be radically honest about who was in the research rather than blindly trusting generalized findings."
Dr. Jamika D. Burge Mansi GuptaAdvancing the Inclusion of Womxn in Research Practices (Videoconference)
September 15, 2022
"Showing instead of telling really sparks people’s interest and often leads engineers to fix problems even on weekends."
Amy MarquezINVEST: Discussion
June 15, 2018
"You cannot measure feelings meaningfully in a single interview; feelings are emergent and must be measured at scale."
Dane DeSutter Natalie Gedeon Deborah Hendersen Cheryl PlatzBeyond the Console: The rise of the Gamer Experience and how gaming will impact UX Research across industries (Videoconference)
May 17, 2024
"Stop saying rest is a luxury or a privilege. It is not. It is a human right."
Zariah CameronReDesigning Wellbeing for Equitable Care in the Workplace
September 23, 2024
"Ask what helps you work better—this simple question is one of the most important things for colleagues and managers."
Jessica NorrisADHD: A DesignOps Superpower
September 9, 2022
