How To Export Files From Figma To Illustrator

In this article, you get a comprehensive, step-by-step guide and basically, everything you’d need to know on how to export files from Figma to Illustrator. Let’s get to it!

figma to illustrator

How to Export From Figma to Illustrator

You can export designs with editable text from Figma to Illustrator by first grouping all selected elements. Then, in the Design panel, under the Export section, select file format as SVG and uncheck Outline Text. Next, right-click your design and select Copy/Paste As > Copy as SVG. Go to your Illustrator file, right-click and select Paste.

To smoothly transfer your design from Figma to Illustrator, follow these detailed steps:

Method 1: Export As SVG To Preserve Editable Text

Step 1: Prepare Your Figma Design

Before exporting, ensure that your Figma design is well-organized and that related elements are grouped together. First, select one element on your frame by clicking on it.

click to select one element in figma to illustrator
Click one element to select it in Figma

Then, select all elements using the keyboard shortcut keys Command + A on Mac.

select all keyboard shortcut command + A – figma to illustrator

Or Ctrl + A on Windows.

select all keyboard shortcut ctrl + A on windows – figma to illustrator

You can group the selected elements together by doing a right-click and selecting Group Selection on the pop-up menu.

group selection in figma to illustrator

Or use the keyboard shortcut Command + G on Mac.

group elements with keyboard shortcut command + G on Mac

Or Ctrl + G on Windows.

group elements with keyboard shortcut ctrl + G on windows

Name your layers and components and double-check for any missing or misaligned objects. To name your Layers, go to the Layers panel on the left side

re-name layers in the layers panel in figma to illustrator
Rename your layers to something recognizable within the grouped layers

Step 2: Export Layers as SVG

In Figma, select the frame or elements you want to export. Then, open the panel on the right side of the Figma app by clicking the Design tab.

select and open design panel in figma

If you don’t see the panel on the right, go to the top menu bar, select View > Panels > Open Design Panel.

select View > Panels > Design panel in top menu bar in figma

Next, scroll to the bottom to find the Export section. Then, select SVG in the drop-down menu next to the Suffix field.

select SVG in drop-down menu in design panel in Figma to Illustrator

Click on the More Options button represented by the three dotted lines on the right-hand side.

select three dotted lines more options button in design panel in figma to illustrator

Then, in the pop-up dialog box, uncheck Outline Text.

settings to export image as svg in Figma

Next, click on the button that says “Export [Name of Your Layer]“.

click Export button in Figma to Illustrator

A dialog box to save your file in SVG appears. Name your file in the Save As field and click the Save button.

export dialog box in figma to Illustrator

This SVG vector format is compatible with Illustrator and preserves your design’s attributes including your text.

Step 3: Import SVG into Illustrator

Open Illustrator and create a new document. Go to the top menu bar and select File > Place, locate the exported SVG file, and click the Place button.

File > Place file from Figma to Illustrator
Select File > Place to import SVG from Figma to Illustrator

Use the cursor that appears to click once on your artboard. This will import the SVG into your Illustrator document.

Alternatively, open your Illustrator document, then drag the SVG file from the folder location onto the opened Illustrator file.

You can now edit and manipulate the imported design as needed.

place and import editable text design from figma to illustrator
Convert editable text and design file from Figma to SVG and open in Illustrator

Once your design is in Illustrator, you may need to make adjustments, such as changing fonts, resizing objects, or tweaking colors. Use Illustrator’s extensive toolset to fine-tune your design as needed.

Method 2: Export As PDF

Besides exporting your design file to SVG format, Figma also allows you to export your design as a PDF, which can be opened in Illustrator. Note that this method may not preserve all design elements as accurately as the SVG format.

Here are the steps:

Step 1: Export Design As PDF

Select the frame or group of elements you want to export. In the Design panel, go to the Export section. Click on the downward arrow and select PDF from the drop-down menu.

Next, click on the button that says “Export [Name of Your Layer]“.

select PDF in export section and click export button in figma to Illustrator

In the Export dialog box, name your file in the Save As field and click the Save button.

export and save as pdf in figma dialog box – figma to illustrator

Step 2: Open PDF in Illustrator

Open your Illustrator app and go to the top menu bar and select File > Open.

go to top menu bar and select file > open in Illustrator

Locate and select your exported PDF file in the dialog box by clicking on the file. Click the Open button.

select PDF file and click open button in Illustrator – figma to illustrator

Your PDF file exported from Figma is now opened in Illustrator.

Method 3: Using Third-Party Plugins

Several third-party plugins and tools can help you streamline the process of exporting from Figma to Illustrator. Some popular options include:

Figmotion: A plugin that allows you to animate and export Figma designs directly into Illustrator.

figmotion plugin – convert figma to illustrator

Magicul.io: A simple online tool that converts Figma files to Adobe Illustrator files.

magicul third-party convertor – figma to illustrator

Figma To Illustrator: FAQs

Can You Convert Figma To Illustrator?

Yes, you can convert Figma to Illustrator by exporting your Figma design to an SVG file. Then, open up the Illustrator file and drag the SVG file onto the Illustrator artboard.

How do I export from Figma to Adobe?

The easiest way to export from Figma to Adobe is to right-click on your Figma design layers. Then, select Copy/Paste As > Copy as SVG. Go to your opened Illustrator file, right-click and select Paste.

copy as svg from figma to illustrator

Final Thoughts On Exporting From Figma to Illustrator

Exporting your design from Figma to Illustrator is a relatively straightforward process if you follow the steps outlined in this article.

By preparing your design, choosing the right export format, and addressing common issues, you can ensure a seamless transition between these two powerful design tools.

So, get started on your next design project and unlock the full potential of both Figma and Illustrator!

Similar Posts