This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 2.0.0
Figma web API endpoints, data structures and helper functions.
version 1.0.1
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2018-05-19 19:36:44 UTC
zwilias/elm-rosetree 1.1.0 <= v < 2.0.0 1.2.2
elm-lang/http 1.0.0 <= v < 2.0.0 1.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
elm-community/linear-algebra 3.1.2 <= v < 4.0.0 3.1.2
NoRedInk/elm-decode-pipeline 3.0.0 <= v < 4.0.0 3.0.1

README

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 and 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 Figma as F 

F.getFile
    ( F.personalToken "your-token" )
    "your-file-key"
    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.

F.exportNodesAsPng 
    ( F.personalToken "your-token" ) 
    "your-file-key" 
    ExportFinished 
    [ "1:6" ]

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

Missing pieces

  • Document versions
  • Export geometry data

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