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
-
•
Design systems should be available as matching sets for both designers and developers in native formats to be most effective.
-
•
Building and maintaining a custom design system can require a dedicated team, which may be overhead for smaller teams or agencies.
-
•
Using multiple off-the-shelf design systems or mixing them often results in a fractured "Franken design" lacking cohesion.
-
•
A white-label flexible design system like Indigo Design that supports theming and customization is valuable across various industries and niches.
-
•
Indigo Design supports Sketch, Adobe XD, and will soon support Figma, paired with a developer toolkit producing pixel-perfect Angular applications.
-
•
Theming in Indigo Design allows changing primary colors that automatically generate palettes, plus typography customization with local fonts.
-
•
The workflow includes cloud-based prototyping and usability testing with task navigation and stakeholder feedback collection.
-
•
Their handoff process intelligently converts absolute design layouts into responsive flex layouts, saving time and enabling fluid responsiveness out of the box.
-
•
Indigo Design aims to support scalability and localization by enabling multiple themes, customizable style hooks, and documented developer APIs.
-
•
The approach encourages teams to adopt and adapt the starter design system locally with their own rituals, rather than relying only on tooling for governance.
Notable Quotes
"Design systems have 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 in their native formats."
"Sometimes different teams use different tools, so you might need a design system for Sketch for one team and for Figma for another."
"If you pick a design system based on big brands and mix them over time, you end up with 'Franken design'—a lack of cohesion."
"Patterns are more valuable than just components because they help quickly put together a whole experience or flow."
"With Indigo Design, changing the primary color automatically updates the whole palette in seconds."
"You’re just a few clicks away from having a fully running Angular app in your browser based on your design."
"The handoff transforms absolute layouts into responsive flex layouts, so you don’t copy screens for different sizes anymore."
"Designers and developers should continue using tools they love, but connected through workflows that bridge their worlds."
"Investing your time in improving the process is better than discussing if something is off by a pixel or color."
Or choose a question:
More Videos
"You need strong regional players with negotiation skills to navigate the split loyalties in global teams."
Adam Cutler Karen Pascoe Ian Swinson Susan WorthmanDiscussion
June 8, 2016
"UX directors often feel like this poor person in the middle here getting pulled in all these directions."
Peter MerholzThe Trials and Tribulations of Directors of UX (Videoconference)
July 13, 2023
"Human biases are the real problem behind algorithmic bias, not the algorithms themselves."
Lisa WelchmanCleaning Up Our Mess: Digital Governance for Designers
June 14, 2018
"Every small action contributes to a larger impact in the fight against climate change."
Vincent BrathwaiteOpener: Past, Present, and Future—Closing the Racial Divide in Design Teams
October 22, 2020
"Design your processes around learning, have blameless post mortems and celebrate failures especially."
Brenna FallonLearning Over Outcomes
October 24, 2019
"Never be afraid to get into good trouble; start by asking why."
Tricia WangSpatial Collapse: Designing for Emergent Culture
January 8, 2024
"Marital status mattered because car buying decisions often involve family members, not just the individual."
Edgar Anzaldua MorenoUsing Research to Determine Unique Value Proposition
March 11, 2021
"Leadership buy-in is really important—having an executive who understands the value of knowledge creation, distribution, application, and evaluation."
Designing Systems at Scale
November 7, 2018
"A lot of developers are way too confident they write perfect code; testing bug fixes often reveals hidden issues."
Erin WeigelGet Your Whole Team Testing to Design for Impact
July 24, 2024
