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.
The example below fetches a given Figma file and collects all the found colors and gradients used as background or paint fills.
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.
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.
- All top module functions now return a
Http.Request
value instead ofCmd
, so you can chain calls together. SeegetFile
documentation for an example. - Added
BooleanGroup
andBooleanOperation
. - Added support for file versions.
- Export geometry data
- Prototype transitions and easing settings
- Styles (see https://www.figma.com/developers/docs#style-type)
- Get specific nodes (see https://www.figma.com/developers/docs#nodes-endpoint)
- Starting frame for prototypes (see https://www.figma.com/developers/docs#canvas-props)
If you need any of these features please open an issue.