The UX of Illustrating my way to Figma
My journey on how to import Illustrator files into Figma
Introduction
In the last couple of years, notably last year, designers have changed mainly their workflows to integrate Figma into their daily lives. But, except for maybe the digital arts and print design industry, everyone is affected by this tool targeted toward product designers in the tech industry. I am one of those designers who jumped ahead and canceled all my existing subscriptions last year to shift to Figma.
But I recently found a few old print-illustration files designed in Adobe Illustrator. So I went through many hoops to figure out the best way to convert old Illustrator files to Figma. I will explain my whole process here so that others don’t have to go through the same. But let’s brush up on the basics first.
What is Illustrator?
Adobe Illustrator is a vector-based design tool that enables designers to create posters, symbols, logos, patterns, icons, etc. It is functional across desktop and mobile devices and creates print, web, apps, video, animations, and more designs.
What is Figma?
Figma is a web browser-based design application built for team-based collaborative design projects. Figma has vector-based tooling capable of creating illustrations, making interactive prototypes, and generating code for developer hand-off. Figma is also accessible for an individual without team collaboration capabilities.
What are Vectors?
Tools like Figma and Adobe Illustrator create vector graphics composed of lines, curves, and color blocks defined by mathematical objects called “vectors.” Designers can move, resize, or change objects' colors with vectors without losing quality because the mathematical equations change with the user’s actions.
I wanted to convert this Illustrator file with 20+ illustrated artboards. But, as you can see from the snapshot above, it has many objects and many anchor points, and I couldn’t afford to lose any details.
Does Figma support the import of Illustrator files?
Currently, Figma cannot import/process Adobe Illustrator (.ai) files. Designs have to be converted by following either of the four paths:
- Open an Illustrator file ► Copy or drag everything to Figma.
- Open an Illustrator file ► Export to.SVG format (file-export-SVG) ► Open the.SVG file in Figma.
- Open Illustrator file in Adobe XD ► Export to.SVG format (file-export-SVG) ► Open the.SVG file in Figma.
- Open Illustrator file in Adobe XD ► Use Copy SVG Code plugin ► Paste SVG code in Figma.
I followed path #3 since I didn’t have Illustrator installed on my machine because XD is free to install.Sidenote: Expect XD to occupy 500MB+ of your storage space.
Working through import issues
XD to Figma seems to be a straight path, but it is not. It is an absolute nightmare for complex print-friendly illustration files with lots of artboards and hundreds of valuable objects outside the artboards. Here are some of the issues that I faced with the conversion.
- Every artboard was converted to a separate .svg file. So, 20 artboards = 20 SVG files 🤮.
- Copy and paste from XD converts the artboard to a flat image.
- Due to this, other anchor points were introduced for complex curves, and there were breaks in the tracks. This could have been introduced due to rounding off the curve path values.
- I don’t even know how to explain this one. Beyond a certain level, SVGs cannot handle all the complex mathematical curves Illustrator stores in its files. The SVG file is still very much vector, but the paths have been damaged at various random places. So I need to check the entire path-by-path file to accept the Figma file.
Web tools to the rescue
- Cloud Convert — https://cloudconvert.com/ai-to-svg — Cloud Convert allows me to upload an Illustrator file and download a converted .svg file, which I can then open in Figma. Unfortunately, Cloud Convert only gave me one artboard. The first artboard. All others were lost in the conversion.
Result:
- Only exported the first artboard out of thirteen.
- Import issues that required additional work.
- Zamzar — https://www.zamzar.com/convert/ai-to-svg/ — Zamzar provides me the same flexibility as Cloud Convert. Zamzar gave me the same result as XD, splitting the file into multiple artboards, which I have to import to Figma. Also, no preview. Just a dump download.
Result:
- Similar output as SVG Export in XD and import into Figma.
- No Preview.
- Import issues that required additional work.
- Magicul —https://magicul.io/converter/ai-to-figma— Magicul is a bit different, where it lets me upload an Illustrator file and get a Figma file directly in return. Magicul showed me the first artboard as a preview and gave me an option to convert all artboards to a Figma file through a paid conversion.
The output from Magicul was astounding; it showed me everything the file had. You can see from the glimpse above; that my file had more things outside the artboards than that inside, which no other tool other than XD was able to show but not export to SVG unless they had an artboard of their own. I am delighted by the results and recommend the tool since it gave me the expected results I needed in the least number of steps.
⚠️ Don't get confused by the name, Magicul web-tool doesn't only do XD-to-Sketch conversion. They support other formats too.
Additionally, upon inspecting, I noticed that it broke no paths during the conversion process, which is excellent—no extra work and corrections.
Result:
- Exported all thirteen artboards plus all the objects that were outside the artboards
- No broken paths.
- I showed a preview for only the first artboard but detected that there were more artboards.
- Exported the Illustrator file directly to Figma file format.
Differences among tools
The journey from Illustrator to Figma was long. Still, it displayed the gap in the design ecosystem where two design apps are not easily made to talk to each other because of app-specific file formats. Magicul’s AI to Figma converter gave me the output I needed without taking me for a ride around the 🌎. Something to consider if you are struggling with the same problem.
Conclusion: Why Magicul?
As you can see from the process flow above, it took me just one step to convert my print-illustration file from Illustrator to Figma file using Magicul as an intermediatory tool. The only downside of using Magicul is paying the premium cost of 49$/file for up to 50 artboards (Illustrator costs around $19.99 per month with an annual commitment). Still, I believe the best part is that it saved me a lot of time I would have spent resolving’ import-related issues. Additionally, it is web-based, similar to Figma, which saves me a ton of time installing system-resource heavy tools like XD and Illustrator that I don’t use primarily for work.
If you have always been working on Sketch or Figma, this write-up might not be for you. Unfortunately, many old designers in the industry have used Illustrator for a few of their projects and always struggle to convert between formats. Illustrator designs that can cause a fair bit of pain might include the ones that have multi artboards, design style guides, icon sets, and print media resources like billboards and flyers.
I hope this write-up helped some of you in making the right decision. Thanks a lot for your time. Happy designing!
