In the file: Building Modern Product Workflows in the Age of AI, with Botim | Figma

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.

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).