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:
- Utilize auto layouts in Figma, which map to flex properties in Oxygen such a horizontal, vertical, middle align, etc
- 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
Open any document in Figma, grab the full URL and paste it in the document ID field.
Xenon will automatically strip out the document ID, or you can grab just the ID and paste it in.
Your document ID will look something like this: 2e37nIZlapRkY9Ql2GCOqI
Auto Layouts, Groups, and Frames
Auto layouts in Figma are the absolute best way to get a strong export result in Xenon, and they’re just a great way to layout your document more easily. These can be applied to almost any Group or Frame, which are the essential building blocks of your Figma document. Auto layouts map to Containers, Grids, etc. Otherwise, Xenon does its best to interprit your layout but results will not be as accurate as when you use Auto Layout.
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.
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 Containers and Grids after your export based on how your organized your document.
This is especially useful if you’re utilizing utility classes, or you just want Xenon to generate your DOM and your Global Styles take over.
One-click copy shortcodes
After you’ve clicked “Generate” you’ll see the exported Blocks. Click anywhere in the box to have them copied to your clipboard. Now, move over to your WordPress install.
Paste in Your Blocks
- Navigate to any post or page and edit the post with Gutenberg
- Add a new paragraph and simply paste the code in your clipboard.
- Your layout is now ready to use in Blocks!