Learn the best approach to setting up your Figma file for a success export in Xenon.

If You Only Read This

The most important part of your success using Xenon is to group or frame your content in Figma as these elements map directly to Divs in Oxygen, which is what will become your page structure.

Add in either auto-layouts in Figma or utility classes in Oxygen and you will have to do very little styling yourself.

We highly recommend you watch the demonstration video on how to prepare your Figma file before you run your first export: https://xenonapp.com/docs/figma-auto-layouts-video-demonstration/

General Tips

Avoid using “rectangles” in Figma. They do not support auto-layouts and will not act as a wrapper div in Oxygen like a Group or Frame will.

Frames or Groups that have background images will need to be set in Oxygen as Figma doesn’t handle background images in the same way Oxygen does.

While Xenon does correctly map borders into Oxygen, borders in Figma can only be applied to all or no sides of an element, unlike CSS. This is a limitation you’ll have to decide the best approach to solve. Utility classes or styling in Oxygen later are both viable options.

Masks (like for gradient overlays and custom image resizes) result in blank divs, so avoid those where possible and instead style using classes or directly in Oxygen. Instead, crop images instead of using a Figma mask.

Images are unable be pulled from Figma into shortcodes, so make sure you’ve exported your images and uploaded them to your WordPress media library for super quick placement.

If your Figma file is large, it can sometimes cause performance issues. We’d recommend creating another draft Figma file and adding items you intend to export into that document.

Bottom to Top

Figma organizes documents with a bottom to top arrangement. This means that Frames and Groups at the bottom of your document appear first in your layout when you convert into Oxygen shortcodes.

If you have a header layout in Figma, move that to the bottom of your document sidebar. Next you might have a hero section, which would be second from the bottom. Your footer would then be at the top of the sidebar.

You can see in the screenshot below that the header as at the bottom of the sidebar, but it’s at the top of the document layout. This will result in the header coming first in Oxygen, then Hero Section, then How It Works, etc.

Use Frames and Groups

Frames and Groups are the essential building blocks in your Figma document. They are what become Divs in Oxygen. You will want to treat frames like divs.

You can drag frames over the top of existing content to group them together without having to manually sort them into groups via the sidebar.

When it doubt, Frame it out. Make sure to apply auto-layout or utility classes for best results.

For our purposes, there is no real difference between a Frame and a Group. Either one will behave in the same way when exporting with Xenon.

Learn more about auto-layouts.

Use Auto Layouts (Option 1)

Now that you’re using Frames and Groups, you can utilize auto-layouts.

Auto-layouts and flex-box have familiar naming and alignment controls like space-between and utilize a graphical interface to handle alignment for top, center, left, right, etc. Note the orange highlighted section of the image showing auto layout controls.

These alignment controls map directly to Oxygen’s horizontal/vertical, top/middle/center, etc alignment controls.

Auto Layouts should become a key part of your Figma workflow, if it’s not already. Watch the video on preparing an existing Figma file to use auto-layouts .

Auto-layouts map to the ID of the element in Oxygen, so be sure you understand the implications of that.

Without auto layouts, you will need to rely heavily on utility classes.

Figma does add 10px of “space between items” by default when auto-layout is enabled, so be sure to remove that extra spacing if you don’t need it.

Use Framework Classes (Option 2)

If you’ve organized your document in Figma with frames and groups, you’ll find the DOM structure of your page is imported into Oxygen without styling.

Things like margin, padding, colors, typography, alignment, etc will need to be configured with classes.

We find advanced users typically choose this otion.

Learn how to use utility classes in Xenon.

Element Styling

Styles attached to individual elements in Figma are applied to that element’s ID in Oxygen. For instance, a text element given a font color of #ffffff in Figma will have that font color attached to its ID in Oxygen.

Font color, weight, size, font-family, box shadow, stroke, and more are currently mapped styles and will flow from Figma to Oxygen during your export.

If you want to add custom classes to any element, you can do so in Xenon. Every element has a “classes” field next to it. Type in a comma separated list of classes and they will be applied to that element upon export.

Note: If that class doesn’t already exist in your Oxygen install before you import the new shortcodes, it will not appear on the element. Instead, you must add or import the class first.

Images and Vectors

Use images instead of vectors where possible, as images in Figma become image placeholders sized appropriately in Oxygen. Vectors often are made up of numerous sub-elements.

Xenon tries to ignore all of the sub-elements and instead replace it with one image placeholder, but due to the nature of vectors this can sometimes leave numerous extra blank placeholders.