We're live! Xenon is Officially in Beta [0.6.0]

February 2, 2022
Written by Jonathan

Beta is Underway

I am incredibly excited to share with you this app my team and I have been working on feverishly for many months now. It's called Xenon and it lets you convert Figma designs into WordPress, automatically. I wanted a way to automatically convert Figma designs into WordPress without having to manually rebuild the same layouts twice. It slows down our agency work and kills productivity, so we set out to find a solution. Many months of hard work later and here we are.

We're now in the beta phase of the app. Right now, Xenon does a lot of extremely impressive things such as generating your entire page structure, adding in styling such as spacing, colors, shadows, and more. It even let's you add custom classes so if you're using a framework like OxyNinja Core or Automatic, you can use those classes to handle all your styling.

Auto-layouts in Figma also map directly to flex layout controls in Oxygen, so if you set an auto-layout of horizontal in Figma, that becomes a flex-direction of horizontal in Oxygen.

Near Term Focuses

One of the main things we're actively working on is background images in Figma mapping correctly to background images in Oxygen. The way Figma handles background images as fills means it's difficult for us to map that into Oxygen, but we're working on it.

We have received a slew of  fantastic feedback and we're super excited to make each and every release better and better. We've also uncovered even more best-practices for use in your Figma document such as avoiding masks and rectangles for now.

Known Limitations

There are some minor things you'll want to be aware of for now:

  • A disorganized Figma file will export into a disappointing result in Oxygen. Your Figma document needs to be organized for best results. Read more on that here.
  • Figma doesn't allow negative margin when using auto-layouts, so overlapping sections will need to have their negative margin set directly in Oxygen.
  • Responsive settings and classes need to be added (if you didn't add classes during export in Xenon)
  • Using borders will result in a placeholder div as Figma only allows borders on all sides or no sides. It currently does not support CSS style borders such as border-bottom, etc.



Thanks to everyone for your incredible wave of support and for you reading this. We genuinely appreciate you.

-Jonathan, Rinn, and Zach