Exporting a particular image

REST API
1

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

2

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

3

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?

4

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

5

but how to specify the X and Y

image

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

6

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.

7

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.

8

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.

9

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.

10

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

11

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.

12

Yeah, just for this purpose, I learned how to write plugins for figma. Started with the youtube tutorials, and tried to run some github based examples. I know how to iterate through the document, hide layers show layers etc. :blush:

You can export nodes as images via plugins API.

This is what exactly I am trying.

13

node.exportAsync exportAsync | Plugin API will get you the image data. But I don’t know how to save it to the computer, I haven’t done that myself yet. Try finding some examples on github. Sorry I can’t help any further.

14

Sure, I will try and update the ticket if I make it to support other viewers