{"schema":"https://www.layerpath.com/schemas/public-document/v1","version":1,"id":"/learn/how-to-export-svg-from-figma","route":"/learn/how-to-export-svg-from-figma","canonical":"https://www.layerpath.com/learn/how-to-export-svg-from-figma","title":"How to Export SVG From Figma","h1":"How to Export SVG From Figma","description":"Learn how to export SVG files from Figma with our step-by-step guide. Enhance your design workflow and create scalable graphics effortlessly.","archetype":"tutorial","blocks":[{"type":"heading","depth":1,"children":[{"type":"text","value":"How to Export SVG From Figma"}]},{"type":"paragraph","children":[{"type":"text","value":"This guide provides a step-by-step process to export SVG files from Figma. Follow these steps to efficiently export your design assets."}]},{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9h5fbma0014kz0d3y74xe68/tour","canonicalUrl":"https://share.layerpath.com/e/cm9h5fbma0014kz0d3y74xe68/tour","id":"cm9h5fbma0014kz0d3y74xe68"},{"type":"list","ordered":true,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Open Your Figma File"}]},{"type":"text","value":" – Launch Figma and open the design file containing the element you want to export."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Select the Element"}]},{"type":"text","value":" – Click on the shape, icon, text, or frame you want to export as SVG."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Go to the Right Panel"}]},{"type":"text","value":" – On the right-hand side, scroll down to the "},{"type":"strong","children":[{"type":"text","value":"Export"}]},{"type":"text","value":" section."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Click the “+” Icon"}]},{"type":"text","value":" – Press the "},{"type":"strong","children":[{"type":"text","value":"“+”"}]},{"type":"text","value":" button to prepare the element for export."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Choose SVG Format"}]},{"type":"text","value":" – From the dropdown, select "},{"type":"strong","children":[{"type":"text","value":"SVG"}]},{"type":"text","value":" as the export format."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Click “Export [Layer Name]”"}]},{"type":"text","value":" – Hit the "},{"type":"strong","children":[{"type":"text","value":"Export"}]},{"type":"text","value":" button and choose the location to save your SVG file."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Done"}]},{"type":"text","value":" – Your element is now exported as a clean SVG and saved to your device."}]}]}]}],"tours":[{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9h5fbma0014kz0d3y74xe68/tour","canonicalUrl":"https://share.layerpath.com/e/cm9h5fbma0014kz0d3y74xe68/tour","id":"cm9h5fbma0014kz0d3y74xe68"}],"plainText":["How to Export SVG From Figma","This guide provides a step-by-step process to export SVG files from Figma. Follow these steps to efficiently export your design assets.","https://share.layerpath.com/e/cm9h5fbma0014kz0d3y74xe68/tour","Open Your Figma File – Launch Figma and open the design file containing the element you want to export.\nSelect the Element – Click on the shape, icon, text, or frame you want to export as SVG.\nGo to the Right Panel – On the right-hand side, scroll down to the Export section.\nClick the “+” Icon – Press the “+” button to prepare the element for export.\nChoose SVG Format – From the dropdown, select SVG as the export format.\nClick “Export [Layer Name]” – Hit the Export button and choose the location to save your SVG file.\nDone – Your element is now exported as a clean SVG and saved to your device."]}