新着記事
Figma│API連携に必須！個人アクセストークンの取得方法とスコープ設定を解説
Figma APIを使って自動化やツール連携を行うには、個人アクセストークン（Personal Access Token）が必要です。 この記事では、トークンの取得方法から各スコープの意味まで詳しく解説します。 Figmaの情報取得にはAPIがとても便利です。GASなど相性が非常...Figma│エディションプランにする方法
Figmaは学生であれば、プロフェッショナルと同じプランの内容が無償で受けられます。 そのエデュケーションプランの適用方法を解説します。 Figmaのエデュケーションプランとは？ Figmaの「エデュケーションプラン」は、学生や教育関係者が、有料の「プロ...Figma│コンポーネントの情報を出力するFigmaライブラリ
特定のFigmaファイルの情報をスプレッドシートに出力するライブラリを作成してみました。 このライブラリは「Figma をスプレッドシート用の疑似DBに変換するエンジン」です。 しかも API制約 GAS制約 公開ライブラリ制約 を全部考慮した設計になっておりま...Figma│スタイル情報一覧を出力するプラグイン
Figmaで用いられるスタイル（テキストスタイル･色スタイル）はWebサイトのコーディングを始め、Unityなど様々なところで同じ状態になるように参照して使われます。 デザイナーが追加･削除するスタイルはプロジェクトの規模によって、相当数に増えるので、...Figma│ライブラリ化コンポーネントが反映されない時の原因と対処法
Figmaでデザインを効率化するために「ライブラリ化したコンポーネント」を活用している方も多いと思います。 しかし、ライブラリが二重構成になっている場合（小さなパーツライブラリと、それを組み合わせたレイアウトライブラリ）に、最新の変更が反映さ...Figma│オーバーライド可能な要素一覧まとめ
Figmaでコンポーネントを使うときに欠かせないのが「オーバーライド」です。 インスタンスに対して特定の要素だけを編集できる仕組みで、一部を変更しつつ元のコンポーネント構造は保つことが可能になります。 この記事では、Figma APIの情報も踏まえて「...Figmaプラグイン│インスタンスの入れ替え
Figmaを使っていると、インスタンスの入れ替えに苦労した経験はありませんか？ 実はこの機能、UI上でもどこにあるのか分かりづらい上に、Figma APIの使い勝手もわかりにくいです。 swapComponent()は公式で用意されています。ノードに対応するメインコンポ...Figma│インスタンスの入れ替えの使い方
FigmaでUIの中で参照しているインスタンスを入れ替えて変更したいことが、たまにあります。 そんな時はインスタンスの入れ替え（swapComponent）を使います。 たとえば参照元を変更したい時によく使います（メインコンポーネントの保管場所変更時） その使...Figmaプラグイン│大量のレイヤーをまとめて処理する方法│コンポーネント情報出力
Figma プラグインを使ってドキュメント内のコンポーネント情報を CSV に出力する場合、数百〜数千レイヤーなら特に問題なく動作します。 しかし、数万〜数十万規模になると処理が固まったり、UI が極端に重くなることがあります。 この記事では「大量のレ...Figmaプラグイン│プラグイン開発で注意すべきポイントまとめ
Figma プラグインを開発するとき、通常のフロントエンド開発とは異なる制約や注意点がいくつもあります。 今回は、実際に開発でハマりやすいポイントをまとめました。 Figmaプラグイン開発で注意すべきポイントまとめ 端的に言うとJavaScript 実行環境では...Figmaプラグイン│プログレスバーの実装方法
Figmaプラグインを開発していると、時間のかかる処理（大量ノードのスキャンやCSV書き出しなど）では進捗状況を表示したくなります。 この記事では、Figmaプラグインでプログレスバーを実装する方法を解説します。 Figmaプラグインのプログレスバーの実装...Figma│Web API（REST API）とPlugin APIで取得できるデータと機能まとめ
Figma には Web API（REST API） と デスクトップ／Webアプリ上で動作する Plugin API の2つの開発用インターフェースがあります。 両者ともFigmaファイルにアクセスできますが、「取得できるデータの種類」や「提供される機能」は異なります。 この記事で...Figma│Web API（REST API）とPlugin APIの違い│どちらでしか取得できない情報まとめ
Figma には Web API（REST API） と デスクトップ／Webアプリ上で動作する Plugin API の2種類の開発向けインターフェースがあります。 どちらもデザインファイルにアクセスできる点は共通ですが、取得・操作できる情報や機能には明確な違いがあります。 ...Figmaプラグイン│外部スタイル参照を一括検出してCSV出力する
Figmaファイル内で「他ライブラリのスタイル（外部スタイル）」を参照しているレイヤーを、一括で検出しCSVに書き出すプラグインの実装です。 デザインシステム運用で「外部スタイルの紛れ込み」を発見したい リンク切れや不要な依存の原因を特定したい デ...Figmaプラグイン│ノードIDを取得する･選択するツール
レイヤーにはノードIDが割り当てられています。 そのIDを取得したり、選択したりできるプラグインを作りました。 複数レイヤーを一括選択もできます。 Figmaプラグイン│ノードIDを取得する･選択するツール 別のプラグインでノードIDを出力することもありま...Figma│ボタン全部入りパック（全35種類）
扱っているUI素材のボタンが全部入っているお得用パックです。 商品が増え次第、増やしていく予定です。 2024/3/25 全35種類 Figma│ボタン全部入りパック（全35種類）の見本 Figma│ボタン全部入りパック（全35種類）のダウンロード 以下からダウンロードで...Figma│見出し 全部入りパック（全40種類）
扱っているUI素材の見出しが全部入っているお得用パックです。 商品が増え次第、増やしていく予定です。 2024/7/9 20種類 2024/8/28 20種類 追加 Figma│見出し 全部入りパック（全40種類）の見本 Figma│見出し 全部入りパック（全40種類）のダウンロード ...Figma│WordPressテーマ｢SWELL｣を再現したテンプレート
WordPressテーマ｢SWELL｣を再現したFigma用のテンプレートです。 これを敷いてWebサイト制作をすると、テーマとデザインの差が減り、コーディングしやすくなります。 更新情報2024.5 SWELLブロックの全デザインパータンも追加しました。 WordPressテーマ｢SW...Figma│選択レイヤーのURLを一括取得できるプラグイン
ノードを選択して、右クリックからコピー/貼り付けオプション > 選択範囲へのリンクをコピーからURLが取得できます。 これを複数まとめて取得するに自作プラグインを作成してみました。 プラグインはFigmaの無料版ユーザーに向けに作成しています。 コ...Figma│コンポーネント・スタイル・ライブラリなど再利用・一元管理できる機能まとめ
Figmaには、UI設計を効率的に進めるための「素材の再利用・一元管理機能」が多数用意されています。 これらを使いこなすことで、作業のスピードアップ・品質の安定・チーム連携の向上が実現できます。 この記事では、コンポーネント・スタイル・バリアント...Figma│まず覚えるべき基本機能 15選
Figmaは、UI/UXデザインにおいて今やスタンダードとも言えるツールです。 ですが、Figmaには他のツールにはない強力な「固有機能」がいくつもあります。 この記事では、Figmaを使うなら最初に覚えておくべき基本機能12選を、具体的な用途とともにご紹介し...Figma│コメントを非表示にする方法
Figmaで作業中、コメントの吹き出しが邪魔に感じることはありませんか？ 特に画面を比較・整理したいときや、クライアントに画面を見せたいときに、コメントが視認性を妨げてしまうことがあります。 そんなときに便利なのが、コメントの表示／非表示を切り...Figma│PSDデータを読み込むプラグイン｢psd.to.design｣
いままでPSDデータをFigmaに移行するには別ソフトを経由して、再現するのが大変でした。 しかし2025年6月に出たPSDデータを読み込むプラグイン｢psd.to.design｣がめちゃめちゃ便利だったので紹介します。 FigmaでPSDデータを読み込む方法 検証用に、sample....Studio│独自ドメインの設定方法│例 サブドメイン
Studioは無料プランのままでもサイト制作ができます。 また権利譲渡もできるので、Web制作者側からクライアントにプロジェクトを渡すこともできます。 そしてクライアント側は有料プランに変更することで独自ドメインとして公開できるようになります。 そ...
