Dynamic image generation

REST API
1

Hi there! I’ve seen a few old posts about this request, but wanted to revive the topic in a brand new post.

In my company, we make a lot of images composed of UI interfaces with text (an admin for instance), that we need to localize in many locales.

We used plugins in the past, but it’s very manual: we need to put every key in a spreadsheet, send it to a localization service, get the spreadsheet back, generate images, export…

We are looking for a dynamic service hat could be called via an API: being able to programmatically export a dynamic asset, with provided strings.

The layout of the asset would also be dynamic by nature (E.g. if a text is in a button, the dynamic text would resize the button as well, depending on the length of the string).
We would take care of caching the image in our own CDN, so we don’t hit the Figma API on every request.

That feature would drastically improve our workflow, and save us bunch of time.

Let me know!

Thanks,
Arnaud

6 Likes
2

+1 This feature would be so helpful and reduce a lot of effort on our localization work!

1 Like
3

Hi, I’m curious how programmatically exporting dynamic assets given strings fits into an end-to-end localization process.

Are these assets components in Figma? instances? top-level frames containing entire screens?

Do you already know the node ids of all the text nodes that will accept dynamic text? Or are you targeting text component properties?

Where do the exported images end up and what are they used for? Who sees the exported images? Are they customer-facing in a product, or used for internal development?

4

@James_Yang thanks for replying!

Are these assets components in Figma? instances? top-level frames containing entire screens?

I’m not sure what would the organization will be, but to give you an idea, currently it’s a frame that we export manually with English strings. That frames serves as “model” when it comes to localization: we used in the past plugins to link a spreadsheet to Figma, and generate “localized frames”, and then manually exporting the images. We wish to improve this workflow :slight_smile:

Do you already know the node ids of all the text nodes that will accept dynamic text? Or are you targeting text component properties?

I don’t know what that potential endpoint would look like, but I imagine that you would target a frame id, and then pass node ids of text nodes you wish to update with a given string.

Where do the exported images end up and what are they used for? Who sees the exported images? Are they customer-facing in a product, or used for internal development?

They would be customer facing, for any sort of usage, but in our case, a .com. Totally understand how you could not just serve the images directly, so I imagine we would request the image and cache it on our own CDN, so the image is requested only once (or until new strings are provided) to the Figma servers.

I imagined something like that:

→ Browser request: custom-cdn.com/image.jpg?locale=it&frame_id=123&node_id_123=“this is a button”…

→ CDN receives the request, extracts the query params to generates a hash
→ The image already under that hash, serves it
→ hash is new, request Figma API to generate the image based on the query params, caches it, serves it

The tricky part on the Figma side is to limit the API requests, otherwise it could very quickly overwhelm the servers… Or add a CDN on top :sunglasses:

Does that make sense? Thank you!

5

Thanks for the additional details!

One thing I want to understand more is the kind of images being exported. Are these elements in a user interface? Or we talking about marketing graphics, posters, publications, packaging, etc…? This will help us understand what kind of use cases will be served here.

Regarding CDNs, not making any promises/commitments here, but if we were to build an API for this, it would likely be a POST endpoint where you’d be encouraged to batch your exports per Figma file (instead of making one API call per image). This aligns with the current GET /v1/images/:key endpoint and the ids query parameter accepting multiple node ids.

6

Interesting!

Are these elements in a user interface? Or we talking about marketing graphics, posters, publications, packaging, etc…?

Our use case at the moment are assets composed by pieces of UI mixed with photography, or illustrations, representing the shopify admin.
Example: https://cdn.shopify.com/b/shopify-brochure2-assets/ac15d1725e4703e4aa4d52bfbd0d4699.png