{"id":6859,"date":"2022-02-01T19:21:30","date_gmt":"2022-02-01T19:21:30","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=6859"},"modified":"2022-02-01T19:28:00","modified_gmt":"2022-02-01T19:28:00","slug":"figma-how-to-export-without-background","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/figma-how-to-export-without-background\/","title":{"rendered":"How to export without background (Figma tutorial)"},"content":{"rendered":"\n

Here\u2019s a guide on how to export components from Figma without background, as well as some common problems and how to fix them.<\/strong><\/p>\n\n\n\n

What is Figma?<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

Why export a Figma file without the background?<\/h2>\n\n\n\n

There could be many different reasons why you\u2019d want to export a file from Figma without background. For example, perhaps you\u2019ve made an illustration and don’t want the black\/white\/colored background to be exported. <\/p>\n\n\n\n

I suggest that you should<\/em> 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. <\/p>\n\n\n\n

Now, I\u2019m not entirely sure exactly what you want to export without the background, but I\u2019ll assume that you mean the block of color behind the design or illustration you\u2019ve made. And here\u2019s how to do that.<\/p>\n\n\n\n

Figma Tutorial: How-to export without background<\/h2>\n\n\n\n
  1. Go into the design file or draft in question<\/li>
  2. Click on the component (artboard, frame, group, etc) that you want to export without background<\/li>
  3. Find the \u201cFill\u201d section on the right menu > Uncheck \u201cShow in exports\u201d <\/li><\/ol>\n\n\n\n

    See the screenshot below for a visual guide on how to export without background.<\/p>\n\n\n\n

    \"figma<\/figure>\n\n\n\n

    And that\u2019s how easy it is! Hope it helps.<\/p>\n\n\n\n

    If it doesn\u2019t work: Alternatives<\/h2>\n\n\n\n

    If it doesn\u2019t work, here are a few possible reasons.<\/p>\n\n\n\n

    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\u2019t locked something that shouldn\u2019t be locked.<\/p>\n\n\n\n

    Another reason could be that you have grouped and layered your visual components inefficiently. <\/p>\n\n\n\n

    You may need to select all the elements that you do want to<\/em> export and group them. That way, you have separated that group of content from the background. Now, try the guide again.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Here\u2019s a guide on how to export components from Figma without background, as well as some common problems and how to fix them<\/p>\n","protected":false},"author":1,"featured_media":6861,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-6859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":1,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",1280,720,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54-768x432.png",768,432,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",1280,720,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",1280,720,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",800,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2022\/02\/2BDDEC1F-7D7A-4847-B5FB-22819648EE54.png",1200,675,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":1,"uagb_excerpt":"Here\u2019s a guide on how to export components from Figma without background, as well as some common problems and how to fix them","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=6859"}],"version-history":[{"count":4,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6859\/revisions"}],"predecessor-version":[{"id":6864,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6859\/revisions\/6864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/6861"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=6859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=6859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=6859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}