Figma Plugin

Export Figma Frame as a Photoshop file

How to export single/multiple Figma Frames as single/multiple PSD files.

Step-by-step Instructions

Introduction

👋 Hello - Thanks for installing this plugin.

As the name suggests - this plugin enables you to export Frames as layered PSD files.
You can export a single or mutlitple frames, with each frame exported as a single PSD file.

Let's get started.

Exporting your frame/s from Figma.

  • In Figma, select a single or mulitple frames.
  • Open the plugin.
  • Hit the 'Export to PSD' button.
  • Do not interact with Figma whilst it's processing the files.
  • Name and save your PSD file or Zip file (if more than 1 frame has been exported).
  • Go ahead and open your PSD file/s in Photoshop.

⚠️ Some notes on text layers.

  • Figma and Photoshop use different font rendering engines.
  • As a result, the appearance of text sizing and weights may vary slightly. This seems to be unavoidable.
  • When opening the PSD file, you'll be prompted with a dialogue box - asking whether you'd like to update the text layers.
    You have 2 options:
  • 1. Choose NO. Then all text layers will remain as displayed in Figma. However, you will be left with little ⚠ on the text layers.
    The moment you double-click on a text layer, it will be rendered by Photoshop's font engine - and will update accordingly.
  • 2. Choose YES. Then all text layers will be rendered by Photohop - which may result in slight changes.
  • Go ahead and open your PSD file/s in Photoshop

⚠️ Also note - that fonts must be available in both Figma and Photoshop. Otherwise - you'll need to change or install the fonts in Photoshop.

Footnotes

From the testing I've conducted, with the exception of slight text layer differences (seemingly unavoidable), all other attributes remain intact when opening the PSD in Photoshop. However, it's worth noting:

  • Figma groups are ungrouped in Photoshop, into single layers
  • Layer effects (eg. gradients) are maintained
  • Vector shapes and images import correctly

However, if there's anything you've noticed that's not working as intended, please get in touch by leaving a comment on the Figma plugin page - and I'll look to get it resolved.

That's it! I hope this plugin helps in your day-to-day.

Whilst this plugin remains free to use, a little support would go a long way.
So if you fancy buying me a coffee, please follow this link ☕.

Thanks so much!
Andrew