Here’s a guide on how to export components from Figma without background, as well as some common problems and how to fix them.
What is Figma?
Figma is a cloud-based design software where you can create designs, illustrations, and other graphics for free. You can then export those files easily, in a wide range of formats.
Why export a Figma file without the background?
There could be many different reasons why you’d want to export a file from Figma without background. For example, perhaps you’ve made an illustration and don’t want the black/white/colored background to be exported.
I suggest that you should export illustrations made in Figma without the background, especially if you need the file in SVG format. This is good because illustrations that will be used as a visual asset in future design files are much easily manageable with a transparent background.
Now, I’m not entirely sure exactly what you want to export without the background, but I’ll assume that you mean the block of color behind the design or illustration you’ve made. And here’s how to do that.
Figma Tutorial: How-to export without background
- Go into the design file or draft in question
- Click on the component (artboard, frame, group, etc) that you want to export without background
- Find the “Fill” section on the right menu > Uncheck “Show in exports”
See the screenshot below for a visual guide on how to export without background.
And that’s how easy it is! Hope it helps.
If it doesn’t work: Alternatives
If it doesn’t work, here are a few possible reasons.
Firstly, you may have accidentally locked some layer or element somewhere in your file. Try checking all the components and make sure that you haven’t locked something that shouldn’t be locked.
Another reason could be that you have grouped and layered your visual components inefficiently.
You may need to select all the elements that you do want to export and group them. That way, you have separated that group of content from the background. Now, try the guide again.
