Migrating from Figma to Editor X

Table of contents

1. Installing and accessing the Figma plugin

2. Figma best practices

3. Desktop frames

4. Sections

5. Containers

6. Arranging elements vertically

7. Buttons

8. Migrating to Editor X

9. Working on Editor X

Before we begin

The plugin allows you to create single or multi-page websites, detecting top-level frames in Figma as your desired Editor X pages. 

As well as this, the plugin logic identifies the page structure and components you’ve set up on Figma and converts that content into Editor X elements. 

Your assets will also be transferred over for immediate use on Editor X. 

After the transfer process is complete, you’ll see your design as a new Editor X site. Then, you can start customizing the design’s appearance and behavior for virtually any screen size.

Installing and accessing the Figma plugin

There are 2 ways to access and install the plugin:

1. Go to the plugin menu in your Figma account and search for “Editor X”

2. Search the Figma community for “Editor X”

Best practices for arranging your Figma file for export

For best results, it’s necessary to set up your Figma components in a specific way before you start exporting them to Editor X. 

These are the most important aspects: 

• Setting up your frames

• Building sections and containers (including spacing and positioning)

• Designing elements (e.g. text, colors, media and buttons)

Setting up your desktop frames

Your top-level Figma frame acts as the outermost layer of your site in this export process. 

When creating a frame for the desktop viewport, we recommend you set a minimum frame width of 1001px.

Note: Each frame will be exported to Editor X as a separate page. 

Building sections

Editor X pages are made up of folds of content called sections. These sections help you arrange page content. 

To create a layout that will become a page section, add another frame within the boundaries of your top-level frame. 

Note: The spacing you apply in Figma will dictate how sections are created and separated on Editor X. 

We also recommend that you create a hierarchy of layers in your Figma file that’s the same as the structure you want on your Editor X site. The order of the frames in your Figma file will be reflected on the site. 

In this example, the header frame is at the top of the hierarchy—it’s the first frame in the list and will be the first section on your Editor X site. The second frame represents the second section, and so on. 

A note on section backgrounds 

Editor X supports solid color, image and gradient section backgrounds. 

Background images must be full width in order to properly function on Editor X. You can export either a full width image, or a full width frame/rectangle with an image fill.

Creating containers

On Editor X, a container is a layouting tool that holds and organizes site elements. You can attach any element to a container: text, images, even other containers. 

The plugin will recognize any elements placed in a frame or in a group and put them inside an Editor X container as part of the migration. 

Some quick tips on containers:

If any frames or elements are grouped in your Figma design, but you don’t want them to be placed together in a container on Editor X, ungroup them before you export

Note: After the migration is complete, you can add, edit and delete containers as needed on Editor X.

Arranging elements vertically

To maintain consistent vertical spacing between elements on Editor X sites, you can use stack. Stack prevents elements from overlapping and maintains their order across breakpoints. 

On Figma, you can apply Auto Layout to a frame or group of elements arranged vertically. By doing so, this will place them in a stack on Editor X when the migration is complete. You can edit this behavior on Editor X afterwards, if needed. 

Designing buttons

Editor X supports buttons that contain text, an icon or both. To export a button, create it as a frame or component in Figma. If you want to include an icon, add it as a shape within the component, frame or group you’re using.

This example illustrates how to structure a button with text and an icon on Figma for export to Editor X:

Transferring text & typography styles

The plugin will transfer the font styles and formatting from your Figma file to Editor X. You’ll find them under Site Styles where you can reuse them as needed when editing your site. You can also upload custom fonts to Editor X and adjust your typography as needed. 

Migrating assets to Editor X 

Once you’ve prepared your design following the tips above, you’re ready to start the migration process. With the plugin installed, open your Figma file and, from the plugins panel, select Editor X. 

Note: Each time you use this plugin, you’ll create a new Editor X site, so it’s best to prepare all of your site assets in Figma before you start the transfer process. If needed, you can copy/paste pages between Editor X sites to import content to an existing site. 

Selecting frames 

When migrating your Figma assets to Editor X, you can choose to export a single top level frame, or multiple by multi-selecting top level frames. 

The number of frames selected will be displayed at the top of the preview window on Figma.

Previewing 

In the same preview window, you’ll be able to see the typography, colors, images and shapes (SVGs) that were recognized by the plugin. 

We recommend removing any duplicates and addressing any errors that are shown before beginning the migration. It’s particularly important to check your layers panel for any unnecessary groups and frames.

Once you’re happy with the list of assets you want to transfer, click Export to Editor X.

Typography styles

The plugin automatically recognizes all pieces of text and the styles applied to them, including font, font size, color and formatting. 

After exporting, you’ll find this information attached to your Site Styles on Editor X. The platform will categorize them into 6 styles: 3 heading styles (H1, H2, H3) and 3 paragraph styles (P1, P2, P3). You can apply these styles to any new text box you add to the Editor X site. 

Note: If you’ve used more than 6 styles on Figma, any additional styles will be transferred to Editor X, but will not be attached to any Site Styles. 

Color styles

The plugin also recognizes all colors on Figma frames. This includes colors used on text, buttons, shapes and section backgrounds. 

These colors will be available under Site Styles on Editor X. You can also find these colors by clicking the Color picker in the design tab of the Inspector panel. 

Images

The plugin will identify and extract all images on your Figma file. If any of the images have masks, these will not appear in the preview window. 

However, once the export process is finished, your images will appear as you intended on the Editor X site. You’ll also find all of these images in the Media Manager. 

SVG shapes

Any SVG shapes on your selected Figma frames will be detected and exported to Editor X too. This includes vector groups. You’ll find these exported SVGs in the Media Manager for future use.  

Working on Editor X

Once the migration process is complete, you’re ready to start working with your design on Editor X. Adding responsive behaviors and interactive effects are the final steps towards creating a dynamic online experience. 

The plugin will automatically redirect you to Editor X in a new tab when the transfer is complete. 

If you’re new to Editor X, here are some essential concepts and tutorials we encourage you to explore to get the most out of your creation experience. 

1. Breakpoints. A breakpoint represents a range of screen sizes. For example, on Editor X, the tablet breakpoint represents screen sizes between 751px and 1000px. You can begin by designing for one breakpoint and adjust the design to apply different website behaviors across additional breakpoints, including custom breakpoints. This concept is essential to responsive design. To learn how to tailor your new Editor X site for multiple viewports, check out this breakpoints lesson. 

2. Sizing. Editor X provides fixed and fluid measurement units that let you customize exactly how website elements display. Learn about all the units available here. 

3. Scale text. On Editor X, you can control the size of text at—and between—different breakpoints. This lets you create fluid website behaviors. Explore this lesson on how to use Scale text to achieve this. 

4. Positioning. Depending on where you position website elements, you can create a variety of different designs. To learn how to control positioning on Editor X, check out this lesson. 

5. Layouting tools. Grid, Layouters and Repeaters are 3 powerful layouting tools available on Editor X that let you arrange site content efficiently, with complete control. Explore this lesson to learn how to choose a layouting tool for each section of the site. 

To get a deeper understanding of Editor X, keep exploring the Academy or enroll in Editor X 101. 

If you have any feedback or questions about exporting from Figma to Editor X, you can contact customer support here.