Recipes
Let's look at some practical examples in the perspective of designers, developers and product managers.
Designers
Get all text styles in a specific frame
This example tries to follow the structure of the file to get the information we need.
{
file(id: "fileID") {
pages(name: "styles") {
frames(name: "typography") {
groups {
name
texts {
name
styles {
fontSize
fontFamily
fontWeight
...
}
}
}
}
}
}
}
Get the background colours of all the global styles to update their Design System documentation
We can now use the power of the shortcuts to get that information easily.
{
file(id: "fileID") {
styles(type: FILL) {
name
styles {
color {
r
g
b
}
}
}
}
}
Developers
Export all icons in a design document to generate up-to-date React components
We want to export the components in SVG format.
{
file(id: “fileID”) {
pages(name: "Icons") {
components {
name
size {
width
height
}
export(params: { format: svg })
}
}
}
}
Product Managers
Get the screenshots of the prototype screens for a few different features to present at a product meeting
We need to go through all the files inside the team projects so we'll be using aliases.
{
projects(teamId: "teamID") {
featureA: files(name: "Feature A") {
pages(name: "Prototype") {
frames {
name
export(params: { format: jpg })
}
}
}
featureB: files(name: "Feature B") {
pages(name: "Prototype") {
frames {
name
export(params: { format: jpg })
}
}
}
}
}