Figmaの使い方
-
Figma│API連携に必須！個人アクセストークンの取得方法とスコープ設定を解説
Figma APIを使って自動化やツール連携を行うには、個人アクセストークン（Personal Access Token）が必要です。 この記事では、トークンの取得方法から各スコープの意味まで詳しく解説します。 Figmaの情報取得にはAPIがとても便利です。GASなど相性が非常... -
Figma│エディションプランにする方法
Figmaは学生であれば、プロフェッショナルと同じプランの内容が無償で受けられます。 そのエデュケーションプランの適用方法を解説します。 Figmaのエデュケーションプランとは？ Figmaの「エデュケーションプラン」は、学生や教育関係者が、有料の「プロ... -
Figma│オーバーライド可能な要素一覧まとめ
Figmaでコンポーネントを使うときに欠かせないのが「オーバーライド」です。 インスタンスに対して特定の要素だけを編集できる仕組みで、一部を変更しつつ元のコンポーネント構造は保つことが可能になります。 この記事では、Figma APIの情報も踏まえて「... -
Figma│インスタンスの入れ替えの使い方
FigmaでUIの中で参照しているインスタンスを入れ替えて変更したいことが、たまにあります。 そんな時はインスタンスの入れ替え（swapComponent）を使います。 たとえば参照元を変更したい時によく使います（メインコンポーネントの保管場所変更時） その使... -
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│コンポーネント・スタイル・ライブラリなど再利用・一元管理できる機能まとめ
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.... -
Figma│ローカルバリアブルの使い方
テキストや色の状態を保存するローカルスタイルは知っているけど、ローカルバリアブルはよくわからないと言うことはないでしょうか？ 公式には「ファイルとプロトタイプの全てに適用出来る再利用可能な数字、テキスト、色を作成します。」と書かれています... -
Figma│ローカルスタイルの使い方
キャンバスの空白をクリックすると右側にパネルが表示されますが、その中にローカルスタイルというメニューがあります。 このローカルスタイルには、下記の4種類の状態を保存することができます。 ローカルスタイルに保存できるもの テキスト 色 エフェク... -
Figma│フレームの中の文字ごと拡大・縮小する方法│拡大縮小の使い方
Figmaでデザインを作成していて、サイズ違いを作成する時に、フレームだけ拡大しても中の文字等のサイズは変化しません。 直感的にラフなデザインを作る場合等はAdobeのツールのようにまとめて拡大縮小したいですよね。 そんな時は拡大縮小ツールというも... -
Figma│管理画面用のサムネイルの設定方法
Figmaのファイルが増えてくると、管理画面上のデザインファイルの管理が猥雑になりがちです。 そこでサムネイルを設定しておくと、非常に視認性が上がります。 本記事ではデザインファイル用のサムネイルの設定方法について解説します。 Figmaの管理画面用... -
Figma│セクションの使い方
フレームやスライスはなんとなく役割がわかるけど、セクションは何に使うのだろうと思ったことはないでしょうか？ フレームはコンポーネントを配置してレイアウト作成するために使う枠であるのに対して、セクションは画面内の情報をまとめるためのツールで... -
Figma│アセットの使い方│ライブラリの使い方
ボタンや見出しなど、サイトで繰り返し使うものを共有化して、再利用できるものをアセットと言います。 オリジナル（メインコンポーネントと言います）のボタンの文言や色、形を変更すると、アセットとして複製配置されたものも全てが変更されるので、うま... -
Figma│Page（ページ）機能の使い方
Figmaにはグループやフレームという機能があり、それらは初心者でも感覚的に理解して使いこなしていますが、 キャンバスごとの単位で表示・非表示ができるPage（ページ）機能は気づかない人が多いです。 FigmaのPage（ページ）の使用例 下記のようにワイヤ...
1