Figmaのツール
-
Figmaのツール
Figma│コンポーネントの情報を出力するFigmaライブラリ
特定のFigmaファイルの情報をスプレッドシートに出力するライブラリを作成してみました。 このライブラリは「Figma をスプレッドシート用の疑似DBに変換するエンジン」です。 しかも API制約 GAS制約 公開ライブラリ制約 を全部考慮した設計になっておりま... -
Figmaのツール
Figma│スタイル情報一覧を出力するプラグイン
Figmaで用いられるスタイル(テキストスタイル・色スタイル)はWebサイトのコーディングを始め、Unityなど様々なところで同じ状態になるように参照して使われます。 デザイナーが追加・削除するスタイルはプロジェクトの規模によって、相当数に増えるので、... -
Figmaのツール
Figmaプラグイン│インスタンスの入れ替え
Figmaを使っていると、インスタンスの入れ替えに苦労した経験はありませんか? 実はこの機能、UI上でもどこにあるのか分かりづらい上に、Figma APIの使い勝手もわかりにくいです。 swapComponent()は公式で用意されています。ノードに対応するメインコンポ... -
Figmaのツール
Figmaプラグイン│大量のレイヤーをまとめて処理する方法│コンポーネント情報出力
Figma プラグインを使ってドキュメント内のコンポーネント情報を CSV に出力する場合、数百〜数千レイヤーなら特に問題なく動作します。 しかし、数万〜数十万規模になると処理が固まったり、UI が極端に重くなることがあります。 この記事では「大量のレ... -
Figmaのツール
Figmaプラグイン│プラグイン開発で注意すべきポイントまとめ
Figma プラグインを開発するとき、通常のフロントエンド開発とは異なる制約や注意点がいくつもあります。 今回は、実際に開発でハマりやすいポイントをまとめました。 Figmaプラグイン開発で注意すべきポイントまとめ 端的に言うとJavaScript 実行環境では... -
Figmaのツール
Figmaプラグイン│プログレスバーの実装方法
Figmaプラグインを開発していると、時間のかかる処理(大量ノードのスキャンやCSV書き出しなど)では進捗状況を表示したくなります。 この記事では、Figmaプラグインでプログレスバーを実装する方法を解説します。 Figmaプラグインのプログレスバーの実装... -
Figmaのツール
Figmaプラグイン│外部スタイル参照を一括検出してCSV出力する
Figmaファイル内で「他ライブラリのスタイル(外部スタイル)」を参照しているレイヤーを、一括で検出しCSVに書き出すプラグインの実装です。 デザインシステム運用で「外部スタイルの紛れ込み」を発見したい リンク切れや不要な依存の原因を特定したい デ... -
Figmaのツール
Figmaプラグイン│ノードIDを取得する・選択するツール
レイヤーにはノードIDが割り当てられています。 そのIDを取得したり、選択したりできるプラグインを作りました。 複数レイヤーを一括選択もできます。 Figmaプラグイン│ノードIDを取得する・選択するツール 別のプラグインでノードIDを出力することもありま... -
Figmaのツール
Figma│選択レイヤーのURLを一括取得できるプラグイン
ノードを選択して、右クリックからコピー/貼り付けオプション > 選択範囲へのリンクをコピーからURLが取得できます。 これを複数まとめて取得するに自作プラグインを作成してみました。 プラグインはFigmaの無料版ユーザーに向けに作成しています。 コ...
1