Advanced Settings

We have additional developer-focused settings that can be accessed on clicking the Advanced Settings button

After selecting the Figma design, you can open up Advanced Settings tab

Advanced Settings Menu

Post design selection after clicking on Advanced Settings button

• Using Flex and Absolute based Styling: If you have an auto-layouted design, you can turn the 'Flex styling' option ON, which will generated CSS Flex properties in the code and make the entire design's code properly responsive. By turning it OFF, you'll have absolute-based styling which will have absolute properties and percentage-based CSS scaling of the end output

• Specify Component Width: You can define the width of the generated component that is required in the code and we'll automatically resize the design to fit in the requirements. This is primarily done to resolve the issue of de designers designing on a different scale than what the developer requires in the final code output

• Dualite Semantics: Turning it on geenerate human-readable classNames and properties to make the code easily understandable

Example of Dualite AI Semantic Output

Here's an example of the kind of code output. The first image shows the design elements named as "Frame 165", "Frame 162" etc but the converted code shows proper props like 'loginheadertitle'

For getting more information around component mode and how to effectively use it. Refer to this guide here.