figma-graphql
v1.3.0
Published
A GraphQL connector for the Figma API
Downloads
5
Readme
figma-graphql
This is a very experimental GraphQL connector for the new Figma Web API
How to use this?
There's a live version of this at https://graphqlbin.com/v2/j2LQcn
If you want to play with it then:
- Clone this repo
- Run
yarn install
- Run
yarn run dev
- Go to
http://localhost:3001/
and have fun!
Query examples
This is still in the very beginning but there's already a few useful things we can get from this API.
Get a file's contents
{
file(id: "KViUntEBJqK4gWfiwft5NObl") {
name
thumbnailUrl
lastModified
pages {
name
id
type
frames {
id
name
clipsContent
blendMode
position {
x
y
}
size {
width
height
}
elements(type: "TEXT") {
name
type
characters
position {
x
y
}
size {
width
height
}
style {
fontSize
fontFamily
fontWeight
letterSpacing
}
strokes {
type
}
fill {
r
g
b
a
}
}
}
}
}
}
Get just the image of a Node a file or the whole file
To get the whole file don't pass any more parameters.
{
image(id: "KViUntEBJqK4gWfiwft5NObl") {
images
}
}
To get the image of node pass the id of that node as a parameter
{
image(id: "KViUntEBJqK4gWfiwft5NObl", params: { ids: "16:19" }) {
images
}
}
Get comments on a file
{
comments(id: "KViUntEBJqK4gWfiwft5NObl") {
id
file_key
parent_id
user {
img_url
handle
}
created_at
resolved_at
message
client_meta {
node_offset {
x
y
}
}
}
}
Post a comment to a file
mutation {
addComment(
id: "KViUntEBJqK4gWfiwft5NObl"
message: "Test from server"
) {
id
message
}
}
You can also pass the coordinates where the comment should be placed as a parameter
mutation {
addComment(
id: "KViUntEBJqK4gWfiwft5NObl"
message: "Test from server"
params: { x: "12", y: "12" }
) {
id
message
}
}
Get all projects for a team
{
projects(id: "484668844937890483") {
id
name
}
}
Get all files for a project
{
projectFiles(project: "420878") {
key
name
thumbnail_url
last_modified
}
}
Figma file
This isn't really necessary but here's the base Figma file that is being used during development.
It should work with any file so can use your own Figma files and just replace file(id: "KViUntEBJqK4gWfiwft5NObl")
with the id of the file you want to query.