OROR Publishes Development Story of Tool Converting Figma AutoLayout and Sizing to CSS Flexbox

The OROR frontend team developed its own tool, OROR Forge, to overcome the limitations of existing commercial Figma to Code tools (such as Amplify Studio and Locofy) in a new service environment requiring frequent design changes and rapid collaboration. The core goals of this tool are generating 'pixel-perfect' code and ensuring practicality optimized for the project's specific environment.

CSS Conversion Logic for Figma Properties

The tool precisely converts Figma's structural concepts into CSS Flexbox and Absolute Positioning.

• AutoLayout -> Flexbox: Maps properties such as display: flex, gap, and align-items. In particular, negative Gap, which is not supported by CSS, is implemented using margin and selectors (> * + *), while the First on Top option is mimicked by setting z-index in reverse order.
• Sizing Conversion: Converts Figma's Fixed, Hug Contents, and Fill Container options to width: px + flex-shrink: 0, width: max-content, and flex: 1 or align-self: stretch, respectively.
• Constraints Conversion: Reproduces position definitions relative to the parent (Left, Right, Center, Scale) in CSS by combining position: absolute, the calc() function, and transform. Precision is improved by calculating offset values for Center alignment.

Text Property and Alignment Handling

Basic text properties such as fontSize, lineHeight, and fontWeight are mapped 1:1. However, Figma's Vertical Alignment has no direct corresponding CSS property and must be implemented using Flexbox (justify-content), while Text Truncate is handled using text-overflow: ellipsis and -webkit-line-clamp.

The next installment will cover the process of converting the generated CSS code into a format usable in practical frameworks such as React.