# In the file: Building Modern Product Workflows in the Age of AI, with Botim | Figma Source: https://www.youtube.com/watch?v=yJP_Can5sIw Recap page: https://rapidrecap.app/video/yJP_Can5sIw Generated: 2026-02-17T08:06:16.09+00:00 --- ## Quick Overview The team at Botim adopted a multi-platform design system approach, using Figma Code Connect to bridge design and code, which allowed them to map 32 core components with high accuracy and avoid discrepancies, ultimately enabling engineers to generate production-ready code directly from design assets. **Key Points:** - Botim identified a critical gap where AI-generated code lagged behind design velocity, leading to inconsistencies between design files and real code. - The solution involved creating a unified, true cross-platform design system using Figma Code Connect to define the API surface (props, variants, defaults) between design components and React/Code. - The initial implementation required a significant 'Design and Dev Cleanup' phase, mapping 32 core components 1:1 between Figma and the codebase. - The system aims for AI-generated UI to compile safely because contracts (the defined API surface) enforce consistency. - The team achieved over 90% accuracy in real-time validation by comparing AI-generated code against the instant design comparison. - The future vision is a 'One Design System – Every Platform' approach, extending Code Connect to iOS and Android beyond the initial web focus. - The team manually documented and iterated on component mappings, as current AI tools like Cursor or Claude were not accurate enough to generate production-ready code from images alone. ![Screenshot at 00:22: The screen shows the initial challenge: developers moving faster than design, with a diagram illustrating AI velocity outpacing the design system, which acts as a bottleneck.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-00-22.jpg) **Context:** This livestream featured Sherizan Sheikh (Chief of Design, Botim) and Nayanika Goje (Design Engineer, Botim), hosted by Pedro Hernandez (Advocacy Manager, Figma), discussing how Botim built modern product workflows by integrating their design system with AI tools, specifically addressing the challenge of keeping design components synchronized with the code in a multi-platform environment. ## Detailed Analysis The presentation detailed Botim's journey in building modern product workflows in the age of AI, focusing on synchronizing their design system with production code. The primary challenge identified was that AI-accelerated development was outpacing the design system, causing discrepancies between Figma designs and actual code. To solve this, they implemented a 'Design \u2194 Code Peace Treaty' centered around Figma Code Connect. This tool allows designers to define the API surface (props, variants, defaults) of Figma components, which is then connected to the code base, creating a single source of truth. The implementation involved four key steps: cleaning up the design system and refactoring the dev library to resolve inconsistencies; building the right team knowledgeable about this vision; learning Code Connect through documentation and trial-and-error; and performing a 1:1 manual mapping of all 32 core components. The presenters emphasized that while AI tools like Cursor or Claude can generate code from images, they lack the contextual understanding required for production-ready code, necessitating human oversight and iteration. The goal is to maintain high accuracy (targeting 80% workflow automation) so that engineers can rely on the design system for component generation, reducing manual CSS management and accelerating multi-platform development (iOS, Android, Web). ### Introduction & Problem - Building modern product workflows in the age of AI - Sherizan Sheikh and Nayanika Goje from Botim discussing their process - Initial problem: AI velocity outpaces design system, causing code/design drift. ### Figma Component Example - Text Field - Demonstrates how components like text fields have many nested properties (size, type, icons) that need consistent mapping between Figma and code. ### Design vs. Code Mismatch - Shows design components (left) and code components (right) being out of sync, highlighting the need for a unified source of truth. ### Design \u2194 Code Peace Treaty - Illustrates the workflow using Figma Code Connect to define the API surface (props, variants, defaults) that bridges the design component and React/Code. ### Implementation Journey - Outlines four phases: 1. Design and Dev Cleanup (1:1 mapping), 2. Component Mapping (connected 32 core components), 3. Learned Code Connect (documentation trial/error), and 4. Implement & Iterate (mini-program development and iteration). ### Challenges Conquered - Resolved inconsistencies, built the right team, learned Code Connect, and achieved 1:1 manual mapping for 32 components. ### Next Steps - Focus on Native Platform Expansion (iOS/Android), API & Data Layer Integration (connecting to backend services), Real Time Validation (90%+ accuracy target), and Pro-to-Production Pipeline (80% workflow automation). ![Screenshot at 00:00: Livestream title slide introducing speakers Sherizan Sheikh and Nayanika Goje from Botim, and the topic: Building modern product workflows in the age of AI.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-00-00.jpg) ![Screenshot at 00:22: Slide showing initial design files \(list of components on left, component properties on right\) and a development environment, illustrating the disconnected state before unification.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-00-22.jpg) ![Screenshot at 01:09: Slide titled 'Both libraries are not in sync', showing visual discrepancy between Design Component in Figma and Code Component.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-01-09.jpg) ![Screenshot at 07:06: Slide illustrating developers moving faster than design, with AI velocity overwhelming the design system bottleneck.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-07-06.jpg) ![Screenshot at 13:30: Slide titled 'Our Pillars' showing Intelligent Agents, Code Connect, and Automated Pipelines as the core strategy.](https://ss.rapidrecap.app/screens/yJP_Can5sIw/00-13-30.jpg)