Xenon First Time Users Guide

Learn to use Xenon for the very first time and complete your first Figma export.

First of all, welcome! We're super excited to have you here and we hope this tool helps you tremendously.

In this guide, we'll show you how to use Xenon for the very first time. There's a few key things you'll want to take note of to have the most success when migrating your Figma designs in Oxygen.

The main thing to remember is that your Figma document organization is the most vital component to a successful export using Xenon, so start there before jumping into an export immediately.

There are two options for you to consider when organizing your Figma file:

  1. Utilize auto layouts in Figma, which map to flex properties in Oxygen such a horizontal, vertical, middle align, etc
  2. Ignore auto layouts and instead take advantage of utility class frameworks like OxyNinja or Automatic.css. Xenon will generate the DOM for you in Oxygen, organizing all your elements into Divs depending on your grouping in Figma. It will also add text elements, image placeholders, etc. You then add utility classes to handle styling such as spacing, colors, typography, etc.

We find that more seasoned Oxygen users go for option 2, or a blend of both options. If you're newer to Oxygen, but have extensive Figma experience, we find option 1 tends to work best until you're ready to explore utility class frameworks.

Authenticate with your Figma account

Xenon detects whichever Figma account you are logged into and will ask you to allow permissions to access that account.

Should you need to change accounts, login to the appropriate Figma account, come back to Xenon, logout and back in, and the new Figma account will be detected automatically.

Finding your Figma document ID

Your document ID will look something like this: 2e37nIZlapRkY9Ql2GCOqI

You'll paste that ID in the Document ID field, which is how Xenon knows what document to look at.

Open any document in Figma, look in the URL, copy the identifier between the /file/ and node name, which should look something like this: /file/2e37nIZlapRkY9Ql2GCOqI/Xenon-Docs?node-id=0%3A1

Paste that into the Document ID field found in page one of the export flow, or in settings under Figma Document ID.

Auto Layouts, Groups, and Frames

If you aren't using utility classes to handle layouts, you can take advantage of auto layouts in Figma. These can be applied to almost any Group or Frame, which are the essential building blocks of your Figma document. Auto layouts map to flex controls in Oxygen like horizontal and vertical alignment, top/middle/bottom, space-between, etc.

Watch the video demonstration on auto layouts

Selecting elements

Your Figma document elements should now appear on page two of the export flow. Select some or all elements you wish to be included in the export.

If you make changes to your Figma file, refresh this screen in Xenon to see the updates in your next export.

Note: 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.

Be sure you've organized your Figma file for best results.

If you're adding shortcodes to an existing Oxygen website, take note of the shortcode start ID field.

Add classes (optional)

Should you want to add classes to any element, you can do so by adding a comma separated list of class names. Just like in Oxygen, they cannot start with a number and can only have alphanumeric characters separated by underscores or hyphens.

Note: If that class doesn't already exist in your Oxygen install before your import the new shortcodes, it will not appear on your element in Oxygen. Consider running a classes import for your utility framework of choice before importing your shortcodes from Xenon.

Ignore Xenon Style Mapping (Optional)

You'll notice another option near your Select All Elements button that says "Ignore Xenon Style Mapping" which will ignore most things from Figma such as colors, spacing, alignment, etc.

Your content organization utilizing groups and frames is still applied and will not be ignored, so your Figma elements will be still be mapped to divs after your export based on how your organized your document.

This is especially useful if you're utilizing utility classes and want those classes to handle your colors, spacing, layout, and other formatting, or just want Xenon to generate your DOM and you style things manually.

One-click copy shortcodes

After you've clicked generate shortcodes, you'll see the exported shortcodes. Click anywhere in the box to have them copied to your clipboard. Now, move over to your Oxygen install.

Add shortcodes into Oxygen

  1. Navigate to the Oxygen template or page you want to add the shortcodes into.
  2. Expand the +shortcodes box and paste in the shortcodes.
  3. Click the blue Update button in WordPress.
  4. Once the page has reloaded, click edit with Oxygen.
  5. Save your newly imported content once in Oxygen and now you can view it on the front-end.

And you're ready to rock!

NOTE: We strongly recommend you have a known good backup of your website before proceeding with this step. Should you make a mistake, you'll have to revert using a backup as Oxygen shortcodes are not recoverable otherwise.

Do not add a line break or any extra spaces to any shortcodes. It will break all shortcodes and your page will become corrupted.