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:
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.
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.
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.
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.
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.
If you're adding shortcodes to an existing Oxygen website, take note of the shortcode start ID field.
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.
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.
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.
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.