Design Systems To-Go: Introducing a Starter Design System, and Indigo.Design Overview (Part 1)
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
-
•
Building and maintaining a custom design system often requires a dedicated team and significant overhead, which can be a deal breaker for small teams or agencies.
-
•
Many organizations end up with a Frankenstein design by mixing elements from various popular design systems without cohesion.
-
•
Indigo.Design offers a white-label, customizable starter design system aiming to fit diverse niches and verticals.
-
•
Matching design and developer toolkits in native formats (Sketch, XD, Figma, Angular) creates smoother workflows and reduces handoff friction.
-
•
The Indigo.Design plugin allows real-time theme customization, generating entire color palettes and typography schemes from base inputs.
-
•
The system automatically converts absolute design layouts into responsive flex layouts during handoff to save designers and developers time.
-
•
Cloud-based prototyping enables pixel-perfect sharing, stakeholder feedback, and integrated usability testing with video recording.
-
•
Open-source style hooks and fully accessible source code empower developers to localize and customize UI for different regions and languages.
-
•
A major goal is to eliminate wasteful debates over pixel-level differences by automating fidelity in design-to-code translation.
-
•
Indigo.Design does not seek to replace existing tools like Zeplin or InVision but to complement design and developer toolchains with integrated capabilities.
Notable Quotes
"Design systems has always been a beginning, like a seed, and design ops basically serves as the nurture."
"For a design system to be effective, it should be available to both designers and developers as a matching set and in a format that is native to each discipline."
"Sometimes different teams use different tools, so you may need a design system for Sketch for one team but then for XD for another."
"You end up with something which I call Franken design because it’s kind of a mix and match of many different things, but it’s anything but a real design system."
"We try to provide a lot more patterns because for newbie designers or product owners, patterns help them put together flows quickly."
"With the Indigo.Design plugin, you can profoundly change how the whole design system looks by just tweaking primary or secondary colors."
"Once you use Indigo.Design in Sketch or XD, you’re just a few clicks away from having a running Angular app based on our developer toolkit."
"Our handoff process turns absolute layout into a flex layout structure, so you get responsiveness out of the box without copying screens for each size."
"Final versions often do not look exactly like the original design, so we want to invest our time in process improvement, not arguing over pixels."
"You want designers to use the UI kit like any other UI kit, and developers to modify the code they’re familiar with, all matched perfectly."
Or choose a question:
More Videos
"Preciousness around ‘pure’ design language can shut down collaboration with curious stakeholders."
Kevin BethuneGatekeepers and Servant Leadership
January 30, 2020
"Design is often seen as the wireframe people, a subsidiary of product rather than a strategic partner."
Alfred KahnA Seat at the Table: Making Your Team a Strategic Partner
November 29, 2023
"People who work in government tech are some of the most passionate because they believe in the mission."
Elena Naids Liza McRuerThe Power of Difficult Conversations: A Case Study on How We Introduced Design Ops in the Federal Government Space
October 2, 2023
"Nearly 45% of seniors 65 and older don’t have wired internet at home, so don’t rely solely on online research."
Amanda Kaleta-Kott Lea Martin, PhDThe Joys and Dilemmas of Conducting UX Research with Older Adults
March 11, 2022
"If the system is difficult, the users have a big burden upon them. And in some cases, that’s just how it is."
Fredrik MathesonFirst-time users, longtime strategies: Why Parkinson’s Law is making you less effective at work – and how to design a fix.
June 8, 2016
"You can just ask Siri to turn on VoiceOver—no installs, no approvals needed, making it easier to test."
Sam ProulxMobile Accessibility: Why Moving Accessibility Beyond the Desktop is Critical in a Mobile-first World
September 8, 2022
"Most user researchers do not get tapped to solve grand challenges or outdated business models."
Peter LevinSolve a Problem Here, Transform a Strategy There: Research as an Occasion for Expanding Organizational Possibility
March 25, 2024
"Don't just flip the switch and say go talk to customers; you have to set guardrails and train people."
Janelle EstesUX Research Trends
January 28, 2021
"You can never be sick enough to help the sickest people."
Deanna ZandtThe Unspoken Complexity of “Self-Care” with Deanna Zandt
July 21, 2022
