This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
Figma web API endpoints, data structures and helper functions.
version 2.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.0.0
Committed At 2018-08-15 08:04:21 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 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

  • Export geometry data
  • Prototype transitions and easing settings
  • Styles

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