npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@knapsack-labs/figma-api

v1.13.4

Published

Figma js typed api

Downloads

7,413

Readme

NPM Version

figma-api

Full implementation of Figma API.

Figma api's file fully typed with TypeScript.

Both browser & nodejs supported.

Promises & ES6.

Install

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.

Usage

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.

Api

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.

Api.appendHeaders(headers: {}): void Populate headers with auth.

Api.request<T>(url, opts): Promise<T> Make request with auth headers.

Authentication

new Api ({ personalAccessToken, oAuthToken })

Creates new Api object with specified personal or oAuthToken. Documentation on how to get tokens

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).

Figma files

Api.getFile(fileKey, opts?: { version?, ids?, depth?, geometry?, plugin_data?: string, branch_data?: boolean })

Require file data with specified version.

Api.getFileNodes(fileKey, ids, opts?: { version?, depth?, geometry?, plugin_data? })

Require file nodes data with specified version.

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(fileKey)

Returns download links for all images present in image fills in a document.

Comments

Api.getComments(fileKey)

List of comments left on the file.

Api.postComment(fileKey, message, client_meta, comment_id?)

Posts a new comment on the file.

Api.deleteComment(fileKey, comment_id)

Deletes a specific comment. Only the person who made the comment is allowed to delete it.

Users

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.

Version history

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.

Projects

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(project_id, opts?: { branch_data?: boolean })

List the files in a given project.

Components and styles

Api.getTeamComponents(team_id, opts?: { page_size?, after?, before? })

Get a paginated list of published components within a team library.

Api.getFileComponents(fileKey)

Get a list of published components within a file library.

Api.getComponent(key)

Get metadata on a component by key.

Api.getTeamComponentSets(team_id, opts?: { page_size?, after?, before? })

Get a paginated list of published component_sets within a team library.

Api.getFileComponentSets(file_key)

Get a list of published component_sets within a file library.

Api.getComponentSet(key)

Get metadata on a component_set by key.

Api.getTeamStyles(team_id, opts?: { page_size?, after?, before? })

Get a paginated list of published styles within a team library.

Api.getFileStyles(file_key)

Get a list of published styles within a file library.

Api.getStyle(key)

Get metadata on a style by key.

File types

All types with description

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.

Development

git clone https://github.com/didoo/figma-api.git
cd figma-api
git checkout main
npm i
npm run build

Release

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)