All Projects → didoo → figma-api

didoo / figma-api

Licence: MIT license
Figma REST API implementation with TypeScript, Promises & ES6

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to figma-api

figma-dev
Build figma plugins with a modern toolchain
Stars: ✭ 15 (-88.1%)
Mutual labels:  figma, figma-api
microsoft-figma
Produce sass/less variables files from figma
Stars: ✭ 18 (-85.71%)
Mutual labels:  figma, figma-api
designfactory-app
A project that generates pdf documents from design templates from Figma + your own data via the GUI or REST API.
Stars: ✭ 30 (-76.19%)
Mutual labels:  figma, figma-api
figma-static-localizer
A Figma plugin for static localization
Stars: ✭ 30 (-76.19%)
Mutual labels:  figma
Tkinter-Designer
An easy and fast way to create a Python GUI 🐍
Stars: ✭ 4,697 (+3627.78%)
Mutual labels:  figma
designto-code
Design to code engine. A design ✌️ code standard. Supports React, Flutter and more.
Stars: ✭ 87 (-30.95%)
Mutual labels:  figma
FigmaPy
An unofficial Python3+ wrapper for Figma API
Stars: ✭ 19 (-84.92%)
Mutual labels:  figma
figma-linux-font-helper
Figma Linux Font Helper
Stars: ✭ 110 (-12.7%)
Mutual labels:  figma
figma-plugin-typescript-boilerplate
Figma plugin TypeScript boilerplate to start developing right away
Stars: ✭ 43 (-65.87%)
Mutual labels:  figma
RTLPLZ
Plugin for Figma to write RTL text
Stars: ✭ 30 (-76.19%)
Mutual labels:  figma
DevQuiz
Dev.Quiz 👨‍💻 | Rocketseat 💜 - NLW 05 👩‍🚀
Stars: ✭ 25 (-80.16%)
Mutual labels:  figma
vscode
Builder.io for VSCode - turn designs into code!
Stars: ✭ 139 (+10.32%)
Mutual labels:  figma
Wiggles-iOS
Beautiful Puppy adoption app built to Demonstrate the SwiftUI and MVVM Architecture
Stars: ✭ 174 (+38.1%)
Mutual labels:  figma
BoxFeed
News App 📱 built to demonstrate the use of SwiftUI 3 features, Async/Await, CoreData and MVVM architecture pattern.
Stars: ✭ 112 (-11.11%)
Mutual labels:  figma
ZestX-Frontend
Month-Long Fest Website ZestX with some Awsome UI and Intact Backend. Implemented admin page for user and event management
Stars: ✭ 28 (-77.78%)
Mutual labels:  figma
figma
Primer, GitHub's design system, available on Figma.
Stars: ✭ 28 (-77.78%)
Mutual labels:  figma
plugin-typings
Typings for the Figma Plugin API
Stars: ✭ 91 (-27.78%)
Mutual labels:  figma
figma-plugins-stats
📈 A CLI to get live and historical stats for your Figma plugins
Stars: ✭ 53 (-57.94%)
Mutual labels:  figma
to-path-figma
object and text to path, a figma plugin
Stars: ✭ 31 (-75.4%)
Mutual labels:  figma
Design-Resources
A curated list of design resources from design templates, stock photos, icons, colors, and much more.
Stars: ✭ 943 (+648.41%)
Mutual labels:  figma

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

Helpers

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

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

Figma files

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.

Comments

Api.getComments
Api.getComments(fileKey)

List of comments left on the file.

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

Posts a new comment on the file.

Api.deleteComments
Api.deleteComment(fileKey, comment_id)

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

Users

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.

Version history

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.

Projects

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.

Components and styles

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.getComponent
Api.getComponent(key)

Get metadata on a component by key.

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.getComponentSet
Api.getComponentSet(key)

Get metadata on a component_set by key.

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

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

Api.getFileStyles
Api.getFileStyles(file_key)

Get a list of published styles within a file library.

Api.getStyle
Api.getStyle(key)

Get metadata on a style by key.

File types

All types with description

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.

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].