Figmaのツール

Figmaでコンポーネントライブラリを運用していると、メインコンポーネントの名前を変更してもインスタンス側に反映されないケースがあります。 またはインスタンス名を変えてしまって、メインコンポーネント名に戻したくとも、ライブラリのキャッシュが邪...

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

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

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

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

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

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

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

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

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