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.
Permalink
Failed to load latest commit information.
examples/swatches
src
.gitignore
LICENSE
README.md
elm-package.json

README.md

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.getFile
    ( F.personalToken "your-token" )
    "your-file-key"
    |> 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 -> 
            let 
                _ = Debug.log "Error while fetching file" error
            in                
            ( model, Cmd.none ) 

Note: The key can be extracted from any Figma file URL: https://www.figma.com/file/:key/:title, 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.exportNodesAsPng 
    ( F.personalToken "your-token" ) 
    "your-file-key" 
    [ "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.