This summary of the video was created by an AI. It might contain some inaccuracies.
00:00:00 – 00:20:36
The YouTube video discusses Doordash's design system called Prism, used by consumers, dashers, and merchants. The team faces challenges such as customizability and platform differences while developing over 38 native mobile components. They emphasize aligning with native platform components and building custom designs to meet specific needs. The importance of upfront documentation and detailed design is stressed to reduce rework. The handoff process involves delivering components and materials efficiently. Code generation using tools like Style Dictionary helps keep design data in sync across platforms. Alignment between designers and engineers is crucial in building components, with a focus on criteria layers and component APIs. Adoption and maintenance strategies tailored to individual code bases are important, with an emphasis on keeping designers and engineers aligned. The work on design systems is likened to a symphony that requires a combination of approaches for success.
00:00:00
In this part of the video, the speakers introduce Doordash’s native mobile design system called Prism. They explain that Prism is used across all three user groups: consumers, dashers, and merchants. The team behind Prism includes system designers, engineers, and accessibility experts who support over 65 product designers and 350 engineers at Doordash. Currently, they have 38 native mobile components for both iOS and Android developed over several years. Challenges faced during the development included decisions on customizability, branding, and platform differences. The speakers hint at a solution to simplify the complexity and hand over to Matt, a Design Systems designer, to discuss how they tackle these challenges.
00:03:00
In this part of the video, the speaker discusses how designers on the Prism team partner with mobile design technologists in three core phases: design direction, detailed design, and handoff. During the design direction phase, designers and engineers align on what they are building and why, considering questions like the component name, appearance, custom vs. native design, naming conventions per platform, style states, and component properties in iOS vs. Android. They utilize resources like the design direction document and design reviews to facilitate productive conversations and alignment within the team. The design reviews serve as an opportunity to present design direction and receive feedback to ensure alignment with the rest of the Design Systems team. This process has helped the team navigate challenging discussions on custom vs. native components effectively.
00:06:00
In this segment of the video, the speaker discusses the importance of aligning on using existing native platform components for flexibility and support in building mobile apps for DoorDash. They emphasize the need for custom designs to meet specific product or brand needs. The speaker reflects on past mistakes, like inconsistencies in building components across different platforms due to lack of alignment. Moving forward, they stress the significance of the design Direction phase to align on foundational questions for component integration. Detail design involves translating agreed-upon ideas into actual builds, considering specs changes between IOS and Android, supporting various states and styles, and understanding component properties across platforms. Designers use resources like component ingredients and spec sheets to capture details and document component specs, behaviors, and styles. Respect for individual platform and tool conventions is also highlighted to ensure consistency across different development environments.
00:09:00
In this part of the video, the speaker stresses the importance of upfront documentation of component expectations to reduce meetings and rework by designers and engineers later in the process. They mention a skipped detail design process, specifically focusing on the slider component that was quickly contributed to libraries without detailed design consideration. The speaker explains the handoff process in Prism design system, emphasizing the delivery of components to product designers and materials to design technologists. They discuss unifying components and styles across platforms and delivering platform-specific components efficiently. The speaker explains the structure of the design system in Figma for Doordash, highlighting a themed component library approach with platform variants to simplify the designer experience. The handoff includes Figma builds, component specs, and semantics for further development. Design technologists then lead the next phases, such as code generation, component build, adoption, and maintenance. The segment transitions to a design technologist, Will, who will discuss code generation further.
00:12:00
In this segment of the video, the speaker explains how they bring designs into code for mobile component libraries using code generation. Components like buttons have multiple semantic properties represented by semantic definitions in code. They use Figma APIs and a library called Style Dictionary to keep definitions in sync across platforms. The Style Dictionary tool transforms design data into code for different platforms, generating Android and iOS code from JSON data. The process completes the design-to-code pipeline for mobile platforms. The video then transitions to Ayanna talking about building components for iOS at Prism Doordash’s design system.
00:15:00
In this segment of the video, the speaker emphasizes the importance of alignment between designers and engineers when building a component to ensure cohesion across platforms. They discuss the process of making elements of a component more explicit through criteria and layers including foundation, information, anatomy, and behavior. Criteria is created for each layer to achieve alignment before building the component in code. The importance of developing the component API to support designer needs and engineer limitations is highlighted. The need to consider variations in design implementations for different platforms such as Swift UI and UI kit in iOS is also mentioned, emphasizing the non-negotiable alignment of the component API. Lastly, the video touches on the ship review process where design technologists and system designers assess the readiness of a component for delivery based on established criteria.
00:18:00
In this part of the video, the speaker discusses the process of adoption and maintenance of components. They emphasize the importance of making components discoverable to designers and engineers through newsletters, sandboxes, and documentation. Additionally, the video highlights that adoption and maintenance strategies are tailored to each individual code base. Finally, the importance of keeping designers and engineers aligned is stressed, noting that the process is not linear but requires a combination of approaches. A brief recap by Camden highlights the challenges and benefits of building mobile native experiences and emphasizes that design systems work is more akin to a symphony than an assembly line.