March 12, 2024

Application of DevMode Plus and CodeGen technologies for Design2Code service

DevMode Plus is a tool provided by Function12 that combines design optimization algorithms and AI to analyze and explore design information suitable for frontend UI development, supporting developers in their development process.

CodeGen is a tool that automatically converts design data into UI code (React, Flutter, HTML5, etc.) to be utilized by frontend developers.

New features added:

1. (Upgrade) Inspector Panel: A panel providing options for Frontend UI Framework, styles, and assets that can be utilized when writing frontend publishing code.

   A. (Upgrade) Code tab: Generates code tailored to Frontend UI Frameworks (React, Flutter, HTML, etc.) and style frameworks (CSS, Tailwind, Dart, etc.) necessary for publishing.

   a. (Upgrade) Inspector tab: Provides basic style code, tokens, and assets.

   b. (Upgrade) Style tab: Provides style code related to selected objects in the chosen framework.

   c. (Upgrade) Edit tab: A tool for customizing frontend UI code and styles.

   B. (Upgrade) Screen Style tab: Provides styles within the screen.

   C. (New) Assets tab: Allows copying and downloading of tokens (color, font) and assets (vector, image) within the screen.

2. (New) UI Kit Panel:

   A. (New) Figma Components: Provides a list of Figma components.

   B. (New) Project Assets: Allows copying and downloading of tokens (color, font) and assets (vector, image) within the project.

3. (Upgrade) Preview Mode: Allows viewing of analyzed code results through preview mode.