0.0.3 • Public • Published

Figma to Cloudinary

Transform a Figma artboard into a Cloudinary URL!

This is super experimental and is not officially supported by Cloudinary

Getting Started

  1. Install dependencies
yarn add @spacejelly/figma-to-cloudinary
# or
npm install @spacejelly/figma-to-cloudinary
  1. Import dependencies
const { figmaToCloudinary } = require('@spacejelly/figma-to-cloudinary');
  1. Add environment variables

Create a .env file with the following fields configured:

FIGMA_ACCESS_TOKEN="[Your Figma Access Token]"
  1. Configure and run script!
await figmaToCloudinary({
  cldCloudId: 'your-cloudinary-cloud-name',
  figmaFileId: 'figma-file-id',
  figmaNodeId: 'figma-node-id',
  textFields: {



Name Type Description
cldCloudId string Cloudinary Cloud ID
figmaFileId string Figma File ID
figmaNodeId string Figma File Node ID
textFields object Dynamic text layers
options object Additional configuration options


The following can be passed along as properties to the options object:

Name Type Default Description
baseImageId string https://i.imgur.com/hcmCzxl.png External image or Cloudinary Public Image ID used for the Cloudinary base layer
baseImageMethod string fetch Method used for the Cloudinary Image API (Ex: upload, fetch)

Dynamic Text Layers

To set up the ability to dynamically create text fields, you'll want to correctly indicate which fields in your Figma document are being used to do so by creating recognizable names of those text layers.

Inside Figma, when creating a Text layer, rename the layer itself to your Text Field Name, such as HEADER_TEXT. When configuring this tool, you can use that HEADER_TEXT as a property inside of textFields to dynamically set that value when rendering the artboard.

Organizing Your Figma Document

For best results with the current state of this tool, when rendering images it's recommended that each of the top level groups inside of your Figma artboard are considered to be in a rendered state.

When rendering the groups, this tool will use the Figma API to render that top level group "as is" without any layer effects.

Consider organizing your Figma artboard along the lines of:

My Artboard
- TEXT_LAYER_1 (Text layer)
- TEXT_LAYER_2 (Text layer)
- My Background Group (Group including all to-be-rendered imagery)


How do I find my Figma File ID and File Node ID?

The easiest way to find your Figma File & Node ID is to use the Share feature.

Select your artboard in your Figma document and click Share. With the Share dialogue open, click Copy Link where you'll receive a URL in the following format:


In the above, we can see our two values:

  • File ID: ABCD1234
  • Node ID: 0%3A1 or when decoded 0:1

What is the base image used for?

The base image defined as an external URL or Cloudinary Image ID (Public ID) is used to provide the base layer under all of the layers rendered from Figma. If you're using a real image, you would want to take this into consideration when building your image in Figma, otherwise like the default image used, you can use a transparent image as your base layer, using Figma for all layering needs.




Package Sidebar


npm i @spacejelly/figma-to-cloudinary

Weekly Downloads






Unpacked Size

404 kB

Total Files


Last publish


  • colbyfayock