OSS Tanbou
Sign in with GitHub

Figma Widget Samples

View on GitHubProject website

learn collaborative Figma and FigJam widgets from official TypeScript/JSX samples covering synced state and UI integration

OSS scale score 138.4OSS health 16Update pace 0 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
141
Primary language
TypeScript
Repository last updated
Feb 27, 2024
On this page

Overview

Figma Widget Samples is an official collection of Widget API examples. Small implementations demonstrate React-like declarative rendering, synchronized state, property menus, user information, multiplayer updates, iframe UI messaging, and document-change handling.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Build canvas widgets through a declarative component API

Widgets render as nodes in Figma and FigJam using components such as Frame and Text plus interaction handlers. The samples show the React-like component model in small isolated examples.

Sources: [1][3]

Study synchronized state and multiplayer update patterns

The Counter sample uses useSyncedState, while Table and Multiplayer Counter examples use useSyncedMap to demonstrate shared state across multiple users.

Sources: [1]

Explore property menus, user data, iframe UI, and document events

Separate samples cover property menus, figma.currentUser, active users, UI-to-widget messaging, and document-change listeners so individual API surfaces can be studied independently.

Sources: [1]

Best fit

Fits developers learning the Widget API from official minimal code

It is useful when a Figma or FigJam widget developer wants to connect manifests, TypeScript/JSX, synchronized state, and build configuration to working source examples.

Sources: [2][3]

Before adoption

Cross-check these older samples against the current Widget API

The latest reviewed repository commit is from 2022. The Widget API has continued to evolve, so use these examples together with current Figma developer documentation and current typings rather than treating the snapshot as the complete modern API.

Sources: [1][3]

Runtime validation requires importing a manifest in the Figma desktop app

Building a sample is only part of the workflow. Import its manifest through the desktop app's Development menu and validate interactions in an actual Figma or FigJam file.

Sources: [2][3]

Official sources

  1. [1]Figma Widget Samples README snapshot(2026-10-04)
  2. [2]Widget Counter getting started(2026-10-04)
  3. [3]Figma Widget API documentation(2026-10-04)
Supplemental curator note

This repository remains useful as an official learning collection, but its latest reviewed commit is from 2022. Use the samples as patterns while treating current Figma developer documentation and typings as the authoritative API reference.

Try it in 3 steps

  1. 1

    Fetch the widget samples at the reviewed commit

    The repository has no release tags, so pin the latest reviewed commit.

    git clone https://github.com/figma/widget-samples.git && git -C widget-samples checkout 881d9524b8d3413539ebd839218667249f15370f
  2. 2

    Install dependencies and build the Counter sample

    Generate dist/code.js so the manifest points to a built widget bundle.

    cd widget-samples/WidgetCounter && npm ci && npm run build
  3. 3

    Import the widget in the Figma desktop app

    Select widget-samples/WidgetCounter/manifest.json and run the Counter Widget in Figma or FigJam.

    Widgets > Development > Import widget from manifest
Check the official README

Growth

Growth trends · Last 30 days

141 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
0
Open PRs
2

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub
Stars
141
Forks
50
Watchers
64
Open issues
5
Contributors
4
Owner type
Organization
Primary language
TypeScript
Repository last updated
Feb 27, 2024
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?