Figmaの知識

Figma APIを使って自動化やツール連携を行うには、個人アクセストークン（Personal Access Token）が必要です。 この記事では、トークンの取得方法から各スコープの意味まで詳しく解説します。 Figmaの情報取得にはAPIがとても便利です。GASなど相性が非常...

Figmaは学生であれば、プロフェッショナルと同じプランの内容が無償で受けられます。 そのエデュケーションプランの適用方法を解説します。 Figmaのエデュケーションプランとは？ Figmaの「エデュケーションプラン」は、学生や教育関係者が、有料の「プロ...

特定のFigmaファイルの情報をスプレッドシートに出力するライブラリを作成してみました。 このライブラリは「Figma をスプレッドシート用の疑似DBに変換するエンジン」です。 しかも API制約 GAS制約 公開ライブラリ制約 を全部考慮した設計になっておりま...

Figmaで用いられるスタイル（テキストスタイル･色スタイル）はWebサイトのコーディングを始め、Unityなど様々なところで同じ状態になるように参照して使われます。 デザイナーが追加･削除するスタイルはプロジェクトの規模によって、相当数に増えるので、...

Figmaでデザインを効率化するために「ライブラリ化したコンポーネント」を活用している方も多いと思います。 しかし、ライブラリが二重構成になっている場合（小さなパーツライブラリと、それを組み合わせたレイアウトライブラリ）に、最新の変更が反映さ...

Figmaでコンポーネントを使うときに欠かせないのが「オーバーライド」です。 インスタンスに対して特定の要素だけを編集できる仕組みで、一部を変更しつつ元のコンポーネント構造は保つことが可能になります。 この記事では、Figma APIの情報も踏まえて「...

Figmaを使っていると、インスタンスの入れ替えに苦労した経験はありませんか？ 実はこの機能、UI上でもどこにあるのか分かりづらい上に、Figma APIの使い勝手もわかりにくいです。 swapComponent()は公式で用意されています。ノードに対応するメインコンポ...

FigmaでUIの中で参照しているインスタンスを入れ替えて変更したいことが、たまにあります。 そんな時はインスタンスの入れ替え（swapComponent）を使います。 たとえば参照元を変更したい時によく使います（メインコンポーネントの保管場所変更時） その使...

Figma プラグインを使ってドキュメント内のコンポーネント情報を CSV に出力する場合、数百〜数千レイヤーなら特に問題なく動作します。 しかし、数万〜数十万規模になると処理が固まったり、UI が極端に重くなることがあります。 この記事では「大量のレ...

Figma プラグインを開発するとき、通常のフロントエンド開発とは異なる制約や注意点がいくつもあります。 今回は、実際に開発でハマりやすいポイントをまとめました。 Figmaプラグイン開発で注意すべきポイントまとめ 端的に言うとJavaScript 実行環境では...

Figmaプラグインを開発していると、時間のかかる処理（大量ノードのスキャンやCSV書き出しなど）では進捗状況を表示したくなります。 この記事では、Figmaプラグインでプログレスバーを実装する方法を解説します。 Figmaプラグインのプログレスバーの実装...

Figma には Web API（REST API） と デスクトップ／Webアプリ上で動作する Plugin API の2つの開発用インターフェースがあります。 両者ともFigmaファイルにアクセスできますが、「取得できるデータの種類」や「提供される機能」は異なります。 この記事で...

Figma には Web API（REST API） と デスクトップ／Webアプリ上で動作する Plugin API の2種類の開発向けインターフェースがあります。 どちらもデザインファイルにアクセスできる点は共通ですが、取得・操作できる情報や機能には明確な違いがあります。 ...

Figmaファイル内で「他ライブラリのスタイル（外部スタイル）」を参照しているレイヤーを、一括で検出しCSVに書き出すプラグインの実装です。 デザインシステム運用で「外部スタイルの紛れ込み」を発見したい リンク切れや不要な依存の原因を特定したい デ...

レイヤーにはノードIDが割り当てられています。 そのIDを取得したり、選択したりできるプラグインを作りました。 複数レイヤーを一括選択もできます。 Figmaプラグイン│ノードIDを取得する･選択するツール 別のプラグインでノードIDを出力することもありま...

ノードを選択して、右クリックからコピー/貼り付けオプション > 選択範囲へのリンクをコピーからURLが取得できます。 これを複数まとめて取得するに自作プラグインを作成してみました。 プラグインはFigmaの無料版ユーザーに向けに作成しています。 コ...

Figmaには、UI設計を効率的に進めるための「素材の再利用・一元管理機能」が多数用意されています。 これらを使いこなすことで、作業のスピードアップ・品質の安定・チーム連携の向上が実現できます。 この記事では、コンポーネント・スタイル・バリアント...

Figmaは、UI/UXデザインにおいて今やスタンダードとも言えるツールです。 ですが、Figmaには他のツールにはない強力な「固有機能」がいくつもあります。 この記事では、Figmaを使うなら最初に覚えておくべき基本機能12選を、具体的な用途とともにご紹介し...

Figmaで作業中、コメントの吹き出しが邪魔に感じることはありませんか？ 特に画面を比較・整理したいときや、クライアントに画面を見せたいときに、コメントが視認性を妨げてしまうことがあります。 そんなときに便利なのが、コメントの表示／非表示を切り...

いままでPSDデータをFigmaに移行するには別ソフトを経由して、再現するのが大変でした。 しかし2025年6月に出たPSDデータを読み込むプラグイン｢psd.to.design｣がめちゃめちゃ便利だったので紹介します。 FigmaでPSDデータを読み込む方法 検証用に、sample....

テキストや色の状態を保存するローカルスタイルは知っているけど、ローカルバリアブルはよくわからないと言うことはないでしょうか？ 公式には「ファイルとプロトタイプの全てに適用出来る再利用可能な数字、テキスト、色を作成します。」と書かれています...

キャンバスの空白をクリックすると右側にパネルが表示されますが、その中にローカルスタイルというメニューがあります。 このローカルスタイルには、下記の4種類の状態を保存することができます。 ローカルスタイルに保存できるもの テキスト 色 エフェク...

Figmaでデザインを作成していて、サイズ違いを作成する時に、フレームだけ拡大しても中の文字等のサイズは変化しません。 直感的にラフなデザインを作る場合等はAdobeのツールのようにまとめて拡大縮小したいですよね。 そんな時は拡大縮小ツールというも...

Figmaのファイルが増えてくると、管理画面上のデザインファイルの管理が猥雑になりがちです。 そこでサムネイルを設定しておくと、非常に視認性が上がります。 本記事ではデザインファイル用のサムネイルの設定方法について解説します。 Figmaの管理画面用...