Unified Layers & Clean Code
There are several plugins and even development agencies that claim to be able to convert your design to code. But Quest is the only one that writes that code in a truly usable fashion. We don’t simply duplicate each device view (Figma frame) you made and combine it into the HTML, we actually unify them together. For instance you can have just one nav bar DIV in Quest that’s controlled by CSS with media Queries instead of 3 nav bars for Desktop, Tablet & Mobile views like other plugins. This produces the cleanest code you can get from design and in many cases cleaner than most hand coding.
If you’re not sure what that means or it doesn’t affect you since you think you don’t need to see the code, there’s 2 major benefits to this.
The Benefits:
- 1.The code structure allows you to easily see and manage sections of the web pages in one place, not bloating the page with duplications making it difficult to read and set up.
- 2.By having your design layers unified, adding and managing features and actions only have to be done one time, not each time in each place on each breakpoint.
How do you set up your page for Unified Layers?
Instead of trying to teach HTML and DIV structure, basically each device view you design needs to have a matching layer structure or at least for the layers you want to be unified. By telling us the exact order of things across breakpoints, Quest will take care of the magic of writing the clean code for you.
To make use of unified layers:
- 1.Make sure all frames, groups and layers in your design match layer order across all device views.
- 2.Make sure the naming matches as well.
- 3.Make sure the Y position is relatively the same between layers. For instance, if you have a “nav”, “content” and “footer” frame in all breakpoints, make sure that the “content” frame is relative between “nav” and “footer” in all. If it were below the footer then unification would not work. This is because Quest uses flex to set things up and not absolute positioning so this is important to make sure the code is clean.
You don’t need to remember this exactly. You can go into Quest to test and see what became unified and check out how to fix it pretty easily which we’ll show you later in this lesson.
In the example above, we have 2 unified frames in Figma with the layers in the correct order. One is a design for Desktop and one for Mobile. The order of the layers in each top-level frame match exactly, and thus when you import it into Quest the layers will be unified.
In the example above, looking at the imported layers in Quest, you will see them on the left-side panel marked with a blue icon to tell you that they are unified and thus, adding features and actions to them will work across all breakpoints. To view all the different frames you imported, remember to click on the device icons to change what breakpoint you’re looking at. Depending on how the layers were set up, some layers may not be unified.
Fixing and Reviewing Unified Layers
If a layer is not unified, it will be missing the blue unified icon on the layer row. To see why this may be, simply right-click on any layer or layer group in the left-side panel and it will pop-up a message to help you figure out why that layer, group or children of the group are missing the unification.
In the example above, the group of “Top L” in the mobile breakpoint is not unified with the desktop version. Right-clicking reveals that the first child of that group does not match and that either the naming is wrong, the order of the children is not the same or even that one layer in that group does not exist in both breakpoints.
In the example above, the Y position of some of the layers are sequenced differently. In Mobile breakpoint, the “Logo” frame in Figma is actually above the “Right side nav” frame but the reverse is true in the Desktop breakpoint.
In this case this might not be clear because the difference is only 2 px in the Desktop so at first glance, it might not be obvious why things are not getting unified. This is why we built this pop-up panel so you can get in there and see what the issue is and go back to your design file, make the quick adjustments and report to fix the problem. So again, understanding the basics of how unified is important but you can always go into Quest and get feedback as to what is different and how to fix it to make things work.
Pro Tip:
None of the rules of unification are required to make your page work as a live HTML page. If the benefits mentioned earlier matter to you, then we highly recommend setting up your pages for this.
But alternatively, you can also just set up SOME things for unification and not all things. It’s not an all or none situation.
For instance, you may just wish to have all the links in your “hero” section be unified so you only have to set them up once. Or just want to make sure your forms or videos on the page are unified so their settings go across all breakpoints. The best way to do this is to make a top-level “Unified” frame where you make sure everything matches exactly and then another frame at the same layer order with all the other stuff you don’t care about being unified. This will speed up the setup and you get the benefit of easier page setup and cleaner code for things you care most about.
Examples:
If you want to poke around and see more sample projects that are unified, most of the Quest samples here are unified: https://quest.ai/samples