YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution

This article introduces YYF2C, a one-stop solution developed by Baidu & YY Interactive Team that combines Figma and AI to generate development code from design files. The solution addresses the pain points of converting design mockups to code for activities and backend requirements.

YYF2C Components: The ecosystem includes Figma plugins, Chrome plugins, f2c-server, and VSCode plugins, offering features such as static code generation, light logic support, cross-platform code output, component marking, SaaS services, layer inspection, and variable export.

Static Code Generation: The system achieves high-fidelity conversion of Figma designs, including multi-layer structures, linear gradients, and text rendering. Compared to other market tools, YYF2C demonstrates superior handling of transparency, layer structure, font colors, shadows, and spacing.

AI-Powered Semanticization: AI capabilities are integrated to improve code readability by generating semantic class names for the converted static code.

Light Logic Tags: Users can add layer tags (Layer Tags) to enable advanced features: bg (background export), var (React component props), list/item (list components), subComp (component splitting), slot (replacement slots), module (separate directory extraction), and tab-related tags (tabList, tabPanel, tabSlider).

Component Marking: Enables integration with existing component libraries, generating code for RN components, admin components, and business activity components.

DSL Platform: Uses Domain-Specific Language to convert design language into specific code languages through customizable converters, supporting different DSL packages for various code generation needs.

SaaS Service: A product management service that uploads and manages generated artifacts, enabling integration with low-code platforms. Internal teams have achieved approximately 15% efficiency improvement.

Dev Mode Alternative: Provides layer inspection functionality and Chrome plugins to address the loss of window.figma API access in view-only mode after Figma started charging for Dev Mode.