Optimizing Code Quality

Figma is a designer tool built without code generation in mind. Here are 2 things to take note of when converting Figma designs to code

Responsive Code

The best output optimization settings for responsive code depends on how your design is structured. You can use the table below to decide on the best settings for your output code

Design Features	Best Setting	Reason
Design utilises autolayout from topmost frame to children	❌Auto-Fix ❌Fix-Misaligned	Using full autolayout gives you full control over the output, while the autofixer makes assumptions about how div nesting, and responsiveness of absolute positioned nodes
Design is mostly autolayout	✅Auto-Fix ❌Fix-Misaligned	For parts without autolayout, firejet can automatically add flexbox instead of using absolute for everything
No / Minimal autolayout	✅Auto-Fix ❌Fix-Misaligned	The auto-fixer is able to add flexbox even for complicated designs, as long as they are largely aligned
No / Minimal autolayout and nodes that should be aligned are slightly misAligned by 5-10px	✅Auto-Fix ✅Fix-Misaligned	FireJet is able to nest nodes as required to create better groups. However, this causes extra nesting which may not be developer friendly
Abstract design which is not meant to be aligned or in flexbox	❌Auto-Fix ❌Fix-Misaligned	For the most pixel-perfect results, disabling auto-fix is best but results in more absolute positioned designs

Each of the optimisers have their pros and cons:

Optimiser	Pros	Cons
Auto-Fix	1. Better nesting and flexbox grouping of absolute positioned children	1. May not be good if the design was meant to be absolute and not flexbox 2. May cause groups that are not undesirable
Fix Misaligned	1. Able to utilise flexbox even more, rather than missing out on forming groups because items are accidentally misaligned	1. May cause alot of nested HTML elements which is undesirable 2. Computing result takes extra long, may be laggy for large frames 3. May be slightly buggy because we are still working on it

note

The ☑ Auto Fix checkbox detects possible frames that could be flex containers and converts them accordingly. However, this may not work 100% of the time and is not a fool-proof way to generate quality code

Solution

Ensure your designs are using Figma's Auto-Layout feature as much as possible. To learn more about the Auto Layout feature, refer to the Figma documentation here

Here is a tutorial on how you can prepare your Figma design to export it with responsive output

Watch Video

Breakpoint Behaviour

Figma designs are static and don't account for mobile and desktop breakpoint behaviour. As such, the plugin has no way of knowing how you wan't your elements to behave at different breakpoints

Solution

Convert your designs by chunks at the component level. (i.e. convert one component at a time) This will make it easier for you to add in your own custom breakpoint behaviour in production

tip

If you are confident that there isn't much breakpoint behaviour to program, or if your final design is pretty much static, feel free to convert at page level at one go