Use the Figma web API in Elm
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Figma API with Elm

This package aims to provide a typed, Elm-friendly access to the Figma web API.

The API currently supports view-level operations on Figma files. Given a file, you can inspect its Elm representation, read or post comments, or export a rendered image of any node subtree.

Live "Swatches" example

The example below fetches a given Figma file and collects all the found colors and gradients used as background or paint fills.

Try it now or view source

Get a document file

First, let's create a authentication token and pass that to the getFile function, together with the file key we want to retrieve.

import Http
import Figma as F 

    ( F.personalToken "your-token" )
    |> Http.send FileReceived

Then in the update function we can extract the FileReceived message payloadand store it in the model app:

FileReceived result ->         

    case result of 
        Ok response -> 
            ( { model | documentRoot = response.document }, Cmd.none )

        Err error -> 
                _ = Debug.log "Error while fetching file" error
            ( model, Cmd.none ) 

Note: The key can be extracted from any Figma file URL:, or via the getFiles function.

Export a document node to PNG

Here we start a request to export the node with ID 1:6 into a PNG file.

import Http
import Figma as F 

    ( F.personalToken "your-token" ) 
    [ "1:6" ]
    |> Http.send ExportFinished 

Once finished the ExportFinished message will contain a list of ExportedImage, with the URL's for the rendered images.

Changes from previous version

  • All top module functions now return a Http.Request value instead of Cmd, so you can chain calls together. See getFile documentation for an example.
  • Added BooleanGroup and BooleanOperation.
  • Added support for file versions.

Missing pieces

If you need any of these features please open an issue.