Skip to main content
Nidhin_Kuttikkattu_Rajeevan
Active Member
January 16, 2023
Question

Exporting a particular image

Hi

I wish to export a particular layer from my figma file. I refer this link.
https://www.figma.com/developers/api#get-file-nodes-endpoint
But when I try to run the cURL command, I am getting the entire screen. For example, if the screen size is 1920x1080, and if I try to export an image of size 100x100, it is still returning an image URL of 1920x1080

curl -H ‘X-FIGMA-TOKEN: myAccesstoken’ ‘https://api.figma.com/v1/images/myFileID?ids=**525%3A4832&t=jDeGTNemBZ14AaSq-0**&format=png’

Basically can we give a particular layer item instead of 525%3A4832&t=jDeGTNemBZ14AaSq-0? When I change different layer items, 525%3A4832&t=jDeGTNemBZ14AaSq-0 is not changing in the URL. it is the nodeId

This topic has been closed for replies.

13 replies

Gleb
Power Member
January 17, 2023

You need to set the scale property (https://www.figma.com/developers/api#get-images-endpoint) to render an image of a specific scale.

Nidhin_Kuttikkattu_Rajeevan
Active Member
January 17, 2023

Thank you Gleb for your time and kind reply. But could I ask,
scale will set the image size only right?
Also, can we mention X,Y,Width and Height to export exactly a specific node item in the layer? Or my understanding about node is different?

Gleb
Power Member
January 17, 2023

If you want to export an image at a specific width or height, you need to mathematically calculate the scale you need to set based on the current width/height of the node and the desired one. scale = exportWidth / currentWidth

Nidhin_Kuttikkattu_Rajeevan
Active Member
January 17, 2023

but how to specify the X and Y

image

So here, I basically wish to export a blue rectangle only.

Nidhin_Kuttikkattu_Rajeevan
Active Member
January 17, 2023

Two problems I am facing here.

  1. I can’t tell the cURL query string that, I want blue only. Because, when I select any of them, the node ID is same.

  2. When I try export, it select the whole screen.

Gleb
Power Member
January 17, 2023

Every node has a unique ID. GET images endpoint allows you to render a specific node. So to render the blue rectangle, you need to pass its ID into the GET images endpoint in the ids array as instructed in the docs.

Nidhin_Kuttikkattu_Rajeevan
Active Member
January 17, 2023

Yeah, but when I select any of them, Blue/Red/Green or black, when I check the URL in browser, all has same node ID. It is not changing.

I clicked red, URL is,
https://www.figma.com/file/8t6EONL87Rm02AxSungh6S/NodeStudy?node-id=3%3A40&t=j6gymbWWmVFRIHDL-0

I clicked blue URL is
https://www.figma.com/file/8t6EONL87Rm02AxSungh6S/NodeStudy?node-id=3%3A40&t=j6gymbWWmVFRIHDL-0

See the node-id is same in both.

Gleb
Power Member
January 17, 2023

The ID in the URL will not change because the URL only reflects the ID of the top-level frame where you have something selected. To find the exact ID of an object, you either need to use the plugins API (figma.currentPage.selection[0].id) or find this object via the REST API by some known properties (such as name, position, etc.) after getting the whole file via GET file endpoint.

Nidhin_Kuttikkattu_Rajeevan
Active Member
January 17, 2023

OK. So if I write a new plugin, can I include this cURL in the typescript plugin? I am trying to iterate through the scenegraph, export each layer image I want. I saw some figma plugins but it didn’t work. So I am switching to cUrl way

Gleb
Power Member
January 17, 2023

You don’t need to use REST API if you are already using plugins API and only need to export certain nodes. You can export nodes as images via plugins API. But I don’t have an example of that.

If necessary, you can also use REST API within the plugin by using fetch if you only build it for yourself and plan to use it privately.