Full implementation of Figma API.
Figma api's file fully typed with TypeScript.
Both browser & nodejs supported.
Promises & ES6.
npm i @knapsack-labs/figma-api
or browser version:
https://raw.githubusercontent.com/didoo/figma-api/master/lib/figma-api.js
https://raw.githubusercontent.com/didoo/figma-api/master/lib/figma-api.min.js
All api in browser exported to global Figma
object.
import * as Figma from '@knapsack-labs/figma-api';
export async function main() {
const api = new Figma.Api({
personalAccessToken: 'my token',
});
const file = await api.getFile('my file key');
// ... access file data ...
}
or in browser:
const api = new Figma.Api({ personalAccessToken: 'my token' });
api.getFile('my file key').then((file) => {
// access file data
});
Change API endpoint setting Figma.API_DOMAIN
& Figma.API_VER
variables.
We have followed the same organisation as the official Figma API documentation to describe our API methods, so it's easier to find the exact endpoint call you are looking for.
Helpers
Api.appendHeaders(headers: {}): void
Populate headers with auth.
Api.request<T>(url, opts): Promise<T>
Make request with auth headers.
Creates new Api object with specified personal
or oAuthToken
.
Documentation on how to get tokens
Helpers
function oAuthLink(
client_id: string,
redirect_uri: string,
scope: 'file_read',
state: string,
response_type: 'code',
): string;
Returns link for OAuth auth flow.
User should open this link, allow access and he will be redirected to redirect_uri?code=<code>
.
Then you should use oAuthToken
method to get access token
.
function oAuthToken(
client_id: string,
client_secret: string,
redirect_uri: string,
code: string,
grant_type: 'authorization_code',
): Promise<{
access_token: string,
refresh_token: string,
expires_in: number,
}>
Returns access token
info from oauth code (see oAuthLink
method).
Api.getFile
Api.getFile(fileKey, opts?: { version?, ids?, depth?, geometry?, plugin_data?: string, branch_data?: boolean })
Require file data with specified version.
Api.getFileNodes
Api.getFileNodes(fileKey, ids, opts?: { version?, depth?, geometry?, plugin_data? })
Require file nodes data with specified version.
Api.getImage
Api.getImage(fileKey, opts?: { ids, scale, format, svg_include_id?, svg_simplify_stroke?, use_absolute_bounds?, version?: string })
Renders images from a file.
Api.getImageFills
Api.getImageFills(fileKey)
Returns download links for all images present in image fills in a document.
Api.postComment
Api.postComment(fileKey, message, client_meta, comment_id?)
Api.deleteComments
Api.deleteComment(fileKey, comment_id)
Deletes a specific comment. Only the person who made the comment is allowed to delete it.
Api.getMe
Api.getMe()
You can use the Users Endpoint to access information regarding the currently authenticated User. When using OAuth 2, the User in question must be authenticated through the Figma API to access their information.
Api.getVersions
Api.getVersions(fileKey)
A list of the version history of a file. The version history consists of versions, manually-saved additions to the version history of a file. If the account is not on a paid team, version history is limited to the past 30 days. Note that version history will not include autosaved versions.
Api.getTeamProjects
Api.getTeamProjects(team_id)
Lists the projects for a specified team. Note that this will only return projects visible to the authenticated user or owner of the developer token. Note: it is not currently possible to programmatically obtain the team id of a user just from a token. To obtain a team id, navigate to a team page of a team you are a part of. The team id will be present in the URL after the word team and before your team name.
Api.getProjectFiles
Api.getProjectFiles(project_id, opts?: { branch_data?: boolean })
List the files in a given project.
Api.getTeamComponents
Api.getTeamComponents(team_id, opts?: { page_size?, after?, before? })
Get a paginated list of published components within a team library.
Api.getFileComponents
Api.getFileComponents(fileKey)
Get a list of published components within a file library.
Api.getTeamComponentSets
Api.getTeamComponentSets(team_id, opts?: { page_size?, after?, before? })
Get a paginated list of published component_sets within a team library.
Api.getFileComponentSets
Api.getFileComponentSets(file_key)
Get a list of published component_sets within a file library.
Api.getTeamStyles
Api.getTeamStyles(team_id, opts?: { page_size?, after?, before? })
Get a paginated list of published styles within a team library.
Helpers
isEffectShadow(effect: Effect): effect is EffectShadow;
Check if effect is one of shadow effects.
isEffectBlur(effect: Effect): effect is EffectBlur;
Check if effect is one of blur effects.
isPaintSolid(paint: Paint): paint is PaintSolid;
isPaintGradient(paint: Paint): paint is PaintGradient;
isPaintImage(paint: Paint): paint is PaintImage;
Check if paint is one of pain types.
isNodeType<NodeType>(node: Node): node is type of NodeType;
Check if node is type of specified node.
git clone https://github.com/didoo/figma-api.git
cd figma-api
git checkout main
npm i
npm run build
npm version [<newversion> | major | minor | patch]
#if not yet logged in
npm login
npm publish
(notice: tags are created automatically after a few minutes from the publishing)