For the best conversion in UiChemy, you need to follow some design guidelines in Figma. To make the process easier you can use the Optimization Companion tool within the UiChemy. The Optimization Companion has many options to semi-automate the process of optimizing your design for the best conversion.
How to Use the Optimization Companion?
To access the Optimization Companion tool follow the steps –
- Select the top level frame of your layout then select the Optimize & Convert option and click the Optimize & Convert button.
- On the next screen click on the Optimization Companion tab.
- It will automatically start to detect the issues. The issues will be grouped into four tabs – Media Optimization, Frame Optimization Phase, Text Optimization and Main Frame Optimization. Some issues can be fixed automatically using the Fix option and some have to be fixed manually. You can also ignore some issues if you want to.
- Fix the issues one by one in each section to open the next section.
- Once the issues are solved click on the Save & Go Back button to save the changes.
Let’s understand each optimization option.
Media Optimization
In this group, you will find issues related to media and options to optimize them.
Lock Multi Layer Media
This option shows all the groups containing multiple elements to create vector images in your layout. If you’ve used multiple elements to create a vector image and grouped them, then you need to lock the group to export it as an individual image, otherwise, each element in the group will be imported as a separate element.
This tab will automatically list all such groups, you can click on them to locate them on the layout and manually lock the group or you can click the Fix button beside each item to lock the group.
You can select multiple groups by clicking the checkboxes or you can select all by clicking the Select All button to select all and fix them. You can also fix all at once by clicking the Fix All button at the top.
Note: At the initial stage we recommend fixing all issues one by one, once you understand how this tool works and how you need to structure your design then you can use the Fix All option.
If you don’t want to lock any group you can click on the Cross (x) icon to ignore it.
If you’ve performed any actions by mistake you can undo that by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such groups and it will again list all the groups that are not locked.
Lock Parent Container of Masked Element
This option will list all the child elements of masked groups. If you’ve used making in your design you need to lock the parent container to export them as a single image, otherwise, the import might not show the desired result.
This tab will automatically list all such child elements, you can click on them to locate them on the layout and manually lock the group or you can click the Fix button beside each item to lock the group.
You can lock all such groups by clicking the Fix All button at the top or you can select multiple groups or select all groups and lock them.
If you don’t want to lock any group you can click on the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such groups and it will again list all the groups that are not locked.
Optimize the Quantity of Images & SVGs
This option will list frames containing images, icons or vectors and show how many assets each frame has. Frames with more assets are listed from top to bottom.
You can click on the Show HeatMap button at the top to show a heatmap on the layout highlighting all the assets with red color.
With this heatmap feature, you can easily check the images, icons or vectors in case group is not locked.
Once everything is done you can click on the Mark as Done button to complete the step.
Frame Optimization Phase
In this group, you will find issues related to frames and options to optimize them.
Detach Instances
This option will list all the instances used in the design. For an optimized conversion you have to detach the instances.
This tab will automatically list all the instances, you can click on them to locate them on the layout and manually detach them or you can click the Fix button beside each item.
You can click the Fix All button at the top to detach all instances at once or you can select multiple instances and detach them.
You can click on the Cross (x) icon if you don’t want to detach any instance.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such groups and it will again list all the groups that are not locked.
If you’ve missed any instance you can click on the Rescan button to recheck and list all undetached instances.
Remove unnecessary groups & frames
This option will list all the unnecessary groups and frames used in the layout. These groups and frames will be converted into individual containers after export. So you should remove such unnecessary groups and frames to keep the exported layout light.
This tab will automatically list all such unnecessary groups and frames, you can click on them to locate them on the layout and click the Fix button beside each item to remove the group or frame.
You can remove all such groups and frames by clicking the Fix All button at the top or you can select multiple groups and frames or select all and remove them.
If you don’t want to remove any group or frame you can click on the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such unnecessary groups and frames and it will again list all unnecessary groups and frames that are not removed.
Convert Groups to Frames
This option will list all the groups that need to be converted to frames in your layout.
Note: Locked groups will not be listed here.
This tab will automatically list all such groups, you can click on them to locate them on the layout and click the Fix button beside each item to convert them to frame.
You can click the Fix All button at the top to convert all such groups into frames or you can select multiple groups or select all and convert them.
If you don’t want to convert any group you can click on the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such groups that are not converted to frame.
Add Frames around the directly placed objects
This option will list all the objects that are directly placed in the main frame. These elements will be ignored while exporting. So you should add a frame around the objects to add to the exported template.
This tab will automatically list all such objects, you can click on them to locate them on the layout and click the Fix button beside each item to add a frame around it.
You can add frames to all such objects by clicking the Fix All button at the top or you can select multiple objects or select all and add frames.
Note: You should add a background color to the frame after it has been added or after conversion to auto layout, otherwise the background might show white in the exported result.
If you want to add any object directly after the conversion in Wordpress, you can click the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such objects and list them.
Remove negative gaps in Frames
This option will list all the frames that are using negative gaps in your layout. A negative value doesn’t work in Flexbox although it works in Figma but the negative value will treated as 0 in the exported template.
This tab will automatically list all such frames, you can click on them to locate them on the layout and click the Fix button beside each item to remove the negative value.
You can click the Fix All button at the top to remove negative values from all such frames or you can select multiple frames or select all and remove the negative values.
If you want to keep the negative values in your layout then you can click the Cross (x) icon to ignore a frame or you can click on the Ignore All button to ignore all such frames.
Note: To achieve the negative value in the exported template you have to add a negative margin manually.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such frames and list them.
Enable Clip Content On Overflowing Frames
This option will list all elements that are overflowing in your layout. Having overflowing elements in your layout can add a horizontal scrollbar in the exported template.
If you want to have overflowing elements in your design then you can ignore this step by clicking the Ignore All button.
This tab will automatically list all the overflowing elements, you can click on them to locate them on the layout then select the parent frame and check the Clip content checkbox to manually hide the overflow or you can click the Fix button beside each item.
If multiple elements are overflowing from the same parent frame then all will be hidden at once, so click the Rescan button to refresh the list.
You can remove overflow from all such elements by clicking the Fix All button at the top.
If you don’t want to remove overflow from any element then you can click on the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
Manage Auto Layout of Standard Frames
This option will list all frames that are not in auto layout in your Figma design. For best conversion, you should set your frames to auto layout.
This tab will automatically list such frames, you can click on them to locate them on the layout and click the Fix button beside each item to add auto layout. While applying auto layout it maintains the frames and layout.
You can click the Fix All button at the top to add auto layout to all such frames or you can select multiple frames or select all and auto layout.
Note: If you have set any distance value in the parent frame to add distance between child elements then that value will be used as Flex gap while converting to auto layout but for better responsiveness, you should change it to Auto.
If you don’t want to convert any frame to auto layout you can click on the Cross (x) icon to ignore it.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck frames that are not in the auto layout.
Manage Auto Layout of Complex Frames
This option will list all frames that are not in auto layout but the user has to apply auto layout manually.
This tab will automatically list such frames, you can click on them to locate them on the layout and then you have to apply auto layout manually.
Once you’ve added auto layout to all such frames click the Fix All button at the top or you can click the Fix Manually button on individual items to complete the step.
You can click the Rescan button to recheck frames that are not in the auto layout but users have to add auto layout manually and list them.
Text Optimization
In this group, you will find issues related to text and options to optimize them.
Split Multi-Colored Text
This option will list all the text elements with multiple colors in the layout. But these texts will be in a single color when exported, so you have to split the texts.
This tab will automatically list all such texts, you can click on them to locate them on the layout and click the Fix button beside and it will split the text based on the number of colors.
Note: After the text is split you might have to do some manual adjustment to fix the layout.
You can split all such texts by clicking the Fix All button at the top or you can select multiple texts or select all and split them.
You can click the Cross (x) icon to ignore any such text.
You can undo any step by clicking the Undo button within 10 seconds.
You can click the Rescan button to recheck for such multi-color texts and list them.
Main Frame Optimization
In this group, you will find issues related to the main frame and options to optimize them.
Remove properties on Main Frame
This option will show if you have any property added to the main frame like gap, horizontal padding, vertical padding, alignment, background color etc. These properties will be ignored in the exported template, so you should remove these properties, otherwise you might get inconsistent results.
You can click the Fix button beside the item to remove all of these properties from the main frame at once.
Once the properties are removed from the main frame you should adjust the sub frames properties like spacing, background etc. to match the design.
You can undo any step by clicking the Undo button within 10 seconds.
Manage Absolute Items in Main Frame
This option will list all frames that are directly placed in the center of the main frame with a Hug width.
This tab will automatically list such frames, you can click on them to locate them on the layout and then you have to set the width equal to the main frame width and it will automatically convert the Hug width to Fixed.
Make sure to align the frame properly.
Once you’ve adjusted all such frames click the Fix All button at the top or you can click the Fix Manually button on individual items to complete the step.
You can click the Rescan button to recheck such frames and list them.
Apply Auto Layout to Main Frame (edited)
This option will show the main frame if the auto layout is not applied.
You can click the Fix button beside the item to convert it into the auto layout. This will change everything from absolute mode to normal which will improve the responsiveness of the layout.
You can undo the step by clicking the Undo button within 10 seconds.
This is how the Optimization Companion tool will help you in optimizing your layout for the best conversion.