{"id":201732,"date":"2023-05-31T16:05:11","date_gmt":"2023-05-31T15:05:11","guid":{"rendered":"https:\/\/www.markup.io\/?p=201732"},"modified":"2023-10-19T12:12:21","modified_gmt":"2023-10-19T11:12:21","slug":"how-to-export-from-figma","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/","title":{"rendered":"How to export from Figma: a 3-step tutorial"},"content":{"rendered":"\n<p>You&#8217;ve spent hours designing a stunning user interface in Figma.&nbsp;<\/p>\n\n\n\n<p>The colors, typography, and layout are all perfect. \ud83e\udd0c<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-genius.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/Bounce-TV-smart-genius-great-idea-K5YC2HXUjUPjDM3kjj\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>There\u2019s only one thing left before publishing your creation \u2013 getting your stakeholders\u2019 approval.<\/p>\n\n\n\n<p>So how do you export your masterpiece without compromising its quality?&nbsp;<\/p>\n\n\n\n<p>Sure, you can invite stakeholders to collaborate on your design, but that increases the chances of someone unfamiliar with Figma messing it up.<\/p>\n\n\n\n<p>If you\u2019ve already started taking screenshots of your design and emailing them to stakeholders, this blog is for you.<\/p>\n\n\n\n<p>We&#8217;ll walk you through everything you need about exporting from Figma like a pro.&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s dive right in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Table of contents<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#cases\">Figma export use cases<\/a><\/li>\n\n\n\n<li><a href=\"#formats\">What export formats does Figma support?<\/a><\/li>\n\n\n\n<li><a href=\"#steps\">How to export from Figma in 3 steps<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cases\">Figma export use cases<\/h2>\n\n\n\n<p>You might not need to export your Figma file if you plan to use it only within the tool.&nbsp;<\/p>\n\n\n\n<p>However, there are several cases where you might have to export the file.<\/p>\n\n\n\n<p>Scenarios like\u2026<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scenario #1: Sending files for review<\/h3>\n\n\n\n<p>Figma allows users to invite reviewers to view or edit a design. However, we get why you\u2019d prefer downloading your project or prototypes and sharing them with stakeholders in a different way.<\/p>\n\n\n\n<p>Perhaps you don\u2019t want anybody snooping around, checking details like properties, CSS\/HTML code, or the size of specific elements.<\/p>\n\n\n\n<p>Fortunately, Figma does offer view and edit permissions (which you can learn more about from our guide on <a href=\"https:\/\/www.markup.io\/blog\/how-to-use-figma\" target=\"_blank\" rel=\"noreferrer noopener\">how to use Figma<\/a>).&nbsp;<\/p>\n\n\n\n<p>When working with people unfamiliar with Figma, it makes more sense to download your designs before sharing them. You can avoid overwhelming stakeholders by sharing the design via easy-to-understand <a href=\"https:\/\/www.markup.io\/blog\/artwork-approval-software\/\" target=\"_blank\" rel=\"noreferrer noopener\">artwork approval software<\/a> like MarkUp.io.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>, you can keep your Figma design workspace away from inquiring eyes.&nbsp;<\/p>\n\n\n\n<p>Drag and drop your export assets into your MarkUp.io Workspace, create an Image MarkUp, and send it to whomever you want via:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Email invite<\/li>\n\n\n\n<li>Shared link<\/li>\n\n\n\n<li>MarkUp URL<\/li>\n<\/ul>\n\n\n\n<p>Reviewers don\u2019t need an account to pin comments to your projects. This, together with MarkUp.io\u2019s close-to-zero learning curve, make it easy to use with any non-tech-savvy stakeholder.<\/p>\n\n\n\n<p>Here\u2019s how easy it is to <a href=\"https:\/\/www.markup.io\/blog\/what-is-image-annotation\" target=\"_blank\" rel=\"noreferrer noopener\">annotate an image with MarkUp.io<\/a>!&nbsp;<\/p>\n\n\n\n<center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/HOhXSP2lLIs\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen=\"\"><\/iframe><\/center>\n\n\n\n<p><\/p>\n\n\n\n<p>It only takes a few clicks, and *poof* you get pixel-perfect, in-context feedback pinned right to the elements of your design that need edits.<\/p>\n\n\n\n<p>Plus, it also works for live and staged websites!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scenario #2: Keeping track of versions<\/h3>\n\n\n\n<p>You\u2019re old-fashioned. You prefer to keep your version history on your computer. Who are we to judge?<\/p>\n\n\n\n<p>But if you want to give Figma-native, cloud-based version history a try, here\u2019s what to do:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a file version by selecting the <img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"25\" src=\"blob:https:\/\/www.markup.io\/53dacadb-12c5-4f3e-a454-7b0fa2a36028\">menu in your file. Go to File and click <strong>Save to version history<\/strong>.&nbsp; You can also use the shortcut CMD+ Option+S or Ctrl+Alt+S.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-save-version-history.png\" alt=\"An example of creating and saving a new version. \" class=\"wp-image-201758\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-save-version-history.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-save-version-history-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-save-version-history-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Add a title and description to help you identify the version history.&nbsp;<\/li>\n\n\n\n<li>Select <strong>Save<\/strong> to create a new version.<\/li>\n<\/ul>\n\n\n\n<p>You can assign a name to an existing version too.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From the menu at the top bar, click <strong>Show version history<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-show-version-history.png\" alt=\"How to show version history in Figma.\" class=\"wp-image-201752\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-show-version-history.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-show-version-history-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-show-version-history-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Select the version you want to access in the right sidebar.<\/li>\n\n\n\n<li>Select the ellipsis button (<strong>\u2026<\/strong>) next to the version and click <strong>Name this version<\/strong>.&nbsp;&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-name-version.png\" alt=\"How to name a new Figma file version.\" class=\"wp-image-201756\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-name-version.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-name-version-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-name-version-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>To view different file versions at their specific date and time, use the page list to see other pages in the file. Then, click and drag to move around the canvas.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scenario #3: Submitting final drafts for approval<\/h3>\n\n\n\n<p>Some of your collaborators are not designers. As a result, they don\u2019t want to sign up for a design tool just to <a href=\"https:\/\/www.markup.io\/blog\/document-review-and-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">review and approve designs<\/a>.<\/p>\n\n\n\n<p>Sure, you can set your designs to <strong>Public<\/strong> so everyone can see them without having to log in or create an account.<\/p>\n\n\n\n<p>But with this option, you lose the ability to receive <a href=\"https:\/\/www.markup.io\/blog\/visual-feedback-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">visual feedback<\/a>.<\/p>\n\n\n\n<p>So now what?<\/p>\n\n\n\n<p>You can simply export your Figma files, upload them to MarkUp.io, and share them with the world. No sign-up is needed on the reviewers\u2019 side.<\/p>\n\n\n\n<p><em>But won\u2019t there be format conflicts between Figma and MarkUp.io?&nbsp;<\/em><\/p>\n\n\n\n<p><em>Do I need to convert the Figma files before creating MarkUps?<\/em> \ud83d\ude11<\/p>\n\n\n\n<p>Short answer: NO!<\/p>\n\n\n\n<p>Let\u2019s look at the facts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"formats\">What export formats does Figma support?<\/h2>\n\n\n\n<p>Figma supports exports in four popular formats, so you shouldn\u2019t experience any difficulty in uploading them to MarkUp.io.<\/p>\n\n\n\n<p>They include:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PNG Figma file export<\/h3>\n\n\n\n<p>Portable network graphics (PNG) is a bitmap format that\u2019s usually used for preserving high-fidelity images on the internet. The PNG file format is commonly referred to as the lossless bitmap format because it retains the image quality even if it\u2019s compressed.&nbsp;<\/p>\n\n\n\n<p>It\u2019s the preferred format for web and <a href=\"https:\/\/www.markup.io\/blog\/ux-audit\" target=\"_blank\" rel=\"noreferrer noopener\">UX\/UI designs<\/a>.<\/p>\n\n\n\n<p>In other words, you can save and export an image \u2018as is\u2019 without compromising its quality.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JPG Figma file export<\/h3>\n\n\n\n<p>Joint photographic group (JPG) is the popular kid in the file format space, and of course, it\u2019s supported by Figma.&nbsp;<\/p>\n\n\n\n<p>JPG is a pixel-based format with fixed dimensions. This means that compressing a JPG image can result in a low-quality image and file size.&nbsp;<\/p>\n\n\n\n<p>This file format is more widely used in photography than in <a href=\"https:\/\/www.markup.io\/blog\/future-of-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">web designs<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>SVG Figma file export<\/strong><\/h3>\n\n\n\n<p>Scalable vector graphics (SVG) is an XML-based vector format. With it, you can enlarge or reduce any element without losing quality or clarity.&nbsp;<\/p>\n\n\n\n<p>Another feature of SVG formats is that they can be represented in scripts or code, allowing a seamless interface for the developer handoff process.&nbsp;<\/p>\n\n\n\n<p>Do keep in mind that on Figma, you can only export SVGs at 1x.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PDF Figma file export<\/h3>\n\n\n\n<p>Portable document format (PDF) allows you to customize different elements of a design in multiple systems. PDFs are compatible with any device, software, or operating system.&nbsp;<\/p>\n\n\n\n<p>With PDFs, you can share interactive layouts, such as text, images, vector graphics, fonts, etc., in a fixed layout.<\/p>\n\n\n\n<p>Whatever your image format preference is, MarkUp.io supports all of the above, plus more. For instance, you can create design MarkUps with popular file types like<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design files<\/strong>: PDF, JPG, JPEG, SVG, PNG, GIF, BMP, PSD, AI<\/li>\n\n\n\n<li><strong>Text files<\/strong>: TXT, DOC, DOCX, DOCM<\/li>\n\n\n\n<li><strong>Video files<\/strong>: MP4, MPEG, AVI, WebM, Apple ProRes, MKV, etc.<\/li>\n\n\n\n<li><strong>Web content<\/strong>: live websites and staged websites<\/li>\n<\/ul>\n\n\n\n<p>Now there\u2019s one thing standing between you and the review sessions of your dreams. Let\u2019s get the how-to out of the way so you can create your first MarkUp ASAP! \ud83e\udd73<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"steps\">How to export from Figma in 3 steps<\/h2>\n\n\n\n<p>It\u2019s time to&nbsp; show you how to export design files in PNG, JPG, PDF, and SVG formats from Figma.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/lets-get-down-to-business-mulan.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/week-1-I7mKeTz5VEFe8\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you\u2019ve got the <em>Export Original Image<\/em> Figma plugin, you can simply install the design system and run it to start saving original images.&nbsp;<\/p>\n\n\n\n<p>But if not, here\u2019s how to get started. \ud83e\uddd8<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #1: Choose what you want to export<\/h3>\n\n\n\n<p>Start by selecting the file you want to export from Figma. You can do this by navigating to the <strong>Team<\/strong> project within Figma and double-clicking on the file you want to export.<\/p>\n\n\n\n<p>You can either export a specific selection of the design file or export in bulk.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s how to do both.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Export a specific project area&nbsp;<\/h4>\n\n\n\n<p>To share a specific project selection, you\u2019ll need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the layers to be exported.&nbsp;<\/li>\n\n\n\n<li>Add or adjust the export setting.<\/li>\n\n\n\n<li>Click the <strong>Export<\/strong> option at the bottom of the right sidebar.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-layers.png\" alt=\"How to export multiple Figma files at once.\" class=\"wp-image-201754\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-layers.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-layers-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-layers-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Ta-da! Figma will export only what you\u2019ve selected.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Export multiple assets at once<\/h4>\n\n\n\n<p>To export in bulk, you need to use the export list \u2013 selections that you\u2019ve added export settings to.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"25\" src=\"blob:https:\/\/www.markup.io\/f74b9060-9def-45ca-9376-9b08bfa6bb27\">menu &gt; <strong>File <\/strong>&gt; <strong>Export <\/strong>or press Shift+CMD+E on Mac and Shift+CTRL+E on Windows.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export.png\" alt=\"How to export a specific project area.\" class=\"wp-image-201761\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>An <strong>Export<\/strong> dialog box will appear, showing you the selections you\u2019ve got export settings for.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-jpg.png\" alt=\"The Export dialog box in Figma.\" class=\"wp-image-201753\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-jpg.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-jpg-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-jpg-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>When done, check the boxes of the selections you want to export and click on the Export button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #2: Adjust the export settings<\/h3>\n\n\n\n<p>After selecting the elements aka Figma frames you\u2019d like to export, head to the <strong>Export<\/strong> section at the right sidebar.&nbsp;<\/p>\n\n\n\n<p>Choose the formats (JPG, PNG, PDF, SVG) you want to export your animation, sketch, or designs to.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-settings.png\" alt=\"Adjusting the export settings.\" class=\"wp-image-201759\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-settings.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-settings-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-settings-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Depending on your format (PNG or JPG), you can input a custom scale for the exported design.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #3: Export your design files<\/h3>\n\n\n\n<p>When you\u2019re done adjusting the export settings, click the <strong>Export<\/strong> button to export the files from Figma.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-preview.png\" alt=\"How to export your design files.\" class=\"wp-image-201757\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-preview.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-preview-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-preview-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>If you\u2019d like to see what the design file will look like in the format and scale you\u2019ve chosen, click the <strong>Preview<\/strong> button before clicking <strong>Export<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bonus Step: Add your Figma files to MarkUp.io<\/h3>\n\n\n\n<p>We should stop here, but we don\u2019t want to see you going through the stress of attaching exported design files via email or <a href=\"https:\/\/www.markup.io\/blog\/asynchronous-communication-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">asynchronous communication<\/a> tools just to request feedback.&nbsp;<\/p>\n\n\n\n<p>You feel the same way, right?<\/p>\n\n\n\n<p>So, here\u2019s how to add the exported Figma files to yours truly, MarkUp.io.&nbsp;<\/p>\n\n\n\n<p>Visit <a href=\"http:\/\/www.markup.io\" target=\"_blank\" rel=\"noreferrer noopener\">www.markup.io<\/a> and click the <strong>Sign-Up<\/strong> button at the top right corner of the page. If you\u2019re a registered user, select <strong>Login<\/strong>.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"469\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-markup-io.png\" alt=\"MarkUp.io's homepage.\" class=\"wp-image-201755\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-markup-io.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-markup-io-300x160.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-markup-io-768x409.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Once you\u2019ve got access to MarkUp\u2019s Workspace, drag and drop the exported design files to your Workspace or click the <strong>Upload<\/strong> button to add the files to create MarkUps.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-images.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>And now to the fun part \u2013 requesting feedback.&nbsp;<\/p>\n\n\n\n<p>To get reviews from teammates or stakeholders, share your MarkUp with them via a link to <a href=\"https:\/\/www.markup.io\/blog\/design-collaboration-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">start collaborating<\/a>.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"660\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-share.png\" alt=\"How to share a MarkUp.\" class=\"wp-image-201749\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-share.png 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-share-300x225.png 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-share-768x576.png 768w, https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-share-800x600.png 800w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>With MarkUp.io, reviewers can click anywhere on the file to add comments and tag you so you\u2019re notified of their annotation.&nbsp;<\/p>\n\n\n\n<p>By the way, they don\u2019t need a MarkUp.io account to provide feedback on the files.&nbsp;<\/p>\n\n\n\n<p>When implementing stakeholder feedback, you can resolve a comment to transfer it to the feedback archive \u2013 the <strong>Resolved<\/strong> tab \u2013 for easy tracking.<\/p>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>Guess who just improved their Figma skills?&nbsp;<\/p>\n\n\n\n<p>You did! \ud83d\ude80<\/p>\n\n\n\n<p>And yes, we\u2019re super proud of you. Just one more thing, and we can tie this up.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Make Figma reviews easier with MarkUp.io<\/h2>\n\n\n\n<p>You can do more with your exported design files by integrating MarkUp.io into your <a href=\"https:\/\/www.markup.io\/blog\/workflow-management-software\/\" target=\"_blank\" rel=\"noreferrer noopener\">current workflow<\/a>.&nbsp;<\/p>\n\n\n\n<p>MarkUp.io simplifies how you share assets with clients and stakeholders and streamlines how you request and gather feedback, among other things.<\/p>\n\n\n\n<p>It\u2019ll help you minimize <a href=\"https:\/\/www.markup.io\/blog\/feedback-loop-halloween\/\" target=\"_blank\" rel=\"noreferrer noopener\">endless feedback loops<\/a> and ensure everyone in the review process is on the same page.&nbsp;<\/p>\n\n\n\n<p>What are you waiting for?<\/p>\n\n\n\n<p>A 30-day free trial awaits when you <a href=\"https:\/\/app.markup.io\/signup?trial=true?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=export-figma&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">sign up with MarkUp.io<\/a>.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;ve spent hours designing a stunning user interface in Figma.&nbsp; The colors, typography, and layout are all perfect. \ud83e\udd0c There\u2019s only one thing left before publishing your creation \u2013 getting your stakeholders\u2019 approval. So how do you export your masterpiece without compromising its quality?&nbsp; Sure, you can invite stakeholders to collaborate on your design, but &hellip; <a href=\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":201751,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-201732","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to export from Figma: a 3-step tutorial - Markup.io<\/title>\n<meta name=\"description\" content=\"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to export from Figma: a 3-step tutorial - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-31T15:05:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-19T11:12:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\",\"url\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\",\"name\":\"How to export from Figma: a 3-step tutorial - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png\",\"datePublished\":\"2023-05-31T15:05:11+00:00\",\"dateModified\":\"2023-10-19T11:12:21+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to export from Figma: a 3-step tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to export from Figma: a 3-step tutorial - Markup.io","description":"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/","og_locale":"en_GB","og_type":"article","og_title":"How to export from Figma: a 3-step tutorial - Markup.io","og_description":"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.","og_url":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/","og_site_name":"Markup.io","article_published_time":"2023-05-31T15:05:11+00:00","article_modified_time":"2023-10-19T11:12:21+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/","url":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/","name":"How to export from Figma: a 3-step tutorial - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png","datePublished":"2023-05-31T15:05:11+00:00","dateModified":"2023-10-19T11:12:21+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Struggling to export from Figma? Read our guide on the easiest way to export Figma designs. It also covers tips to improve your design review process.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/05\/figma-export-hero.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/how-to-export-from-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"How to export from Figma: a 3-step tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=201732"}],"version-history":[{"count":6,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201732\/revisions"}],"predecessor-version":[{"id":202621,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/201732\/revisions\/202621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/201751"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=201732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=201732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=201732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}