DEV Community

Prudence97
Prudence97

Posted on

3 steps to exporting images from Figma

Doesn't work why

Yesterday, I learnt how to export images from Figma.

It's an exciting discovery since it saved me from using my Google search tool.

(Thank you Google search, see you later📨)

In all of this hunt, I felt it would be nice to share the process. (You're welcome.) Also warm regards to Lamodots who led the hunt.


Reference


Step 1: Highlighting the Image
By clicking on any image or component on the design, you would also have highlighted it.

Image


Step 2: Finding the right frame

On the Left-hand sidebar is usually the Layer section. The Layer section gives you access to each component, that is, text, images etc.

Our job here is to find our right image or right frame.

Finding Image

You should toggle the eye 👁️ and the Lock 🔒 to help you get a single element (image)


Step 3: Exporting the image

On the right-hand sidebar is the Design section. By scrolling upwards you'll get down to the Export section.

It opens up when you hit the plus + button. You can also toggle with the preview↓ button to preview the picture.

Exporting

So hit the Export button to download.


It is done...

Henry& Ray

Feels good 😉


Hi🙋, you can also share your export method. 🤭 I'm looking for a simultaneous all-image download method.

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Figma is my favourite design tool now even ahead of Photoshop 😱

Collapse
 
prudence97 profile image
Prudence97

☺️☺️☺️☺️rightt I'm yet to explore all it beauty but I know I'll love it