新しく公開したFigmaの記事を掲載しています。分野別に探す場合はサイトマップ、初めて使う場合は入門ガイドをご覧ください。
新着記事
Figma Makeの使い方｜画面の作成・修正・公開まで
Figma Makeの使い方を、作る手順・直し方・公開まで解説し、使えるプランとAIクレジットの条件、使いすぎを防ぐ方法をまとめました。Figmaの共有権限の設定方法｜閲覧・編集・外部共有を使い分ける
Figmaの共有権限を、アクセスと権限の2つに分けて解説し、社外への共有やプロトタイプだけの共有、権限の引き継ぎ、有料プランの追加設定をまとめました。Figmaでデザインシステムを作る方法｜色・余白・文字・コンポーネントを整理する
Figmaでデザインシステムを作る方法を、バリアブル・スタイル・コンポーネント・ライブラリの役割と、作る手順、公開の条件までまとめました。Figmaのオーバーレイの作り方｜モーダルを開く・閉じる・位置を調整する
Figmaのオーバーレイで確認ダイアログを作る方法を解説。Open overlay、表示位置、背景、外側クリック、Close overlayの設定と、表示されないときの確認順を紹介します。Figmaのバリアントの使い方｜ボタンの状態・サイズを切り替える基本
Figmaのバリアントを、ボタンの状態とサイズを切り替える例で解説。コンポーネントセットの作成、プロパティの設定、値の競合、文字やアイコンとの使い分けを確認できます。Figmaでレスポンシブデザインを作る方法｜Auto Layoutと幅変更の確認手順
Figmaでレスポンシブデザインを作る考え方を解説。Auto Layout、Hug・Fill・Fixed、文字量の変化、PCとスマホの構成変更をカードUIの例で確認します。Photopeaの使い方｜Figmaの.figをPSDに変換・PSDをFigmaに取り込む方法と精度
Photopea（フォトピー）は、ブラウザで使える無料の画像編集ソフトです。PhotoshopのPSDをそのまま開いて編集でき、Figmaの.figファイルも開けます。Figmaのデザインを「PSDで納品してほしい」と言われたときや、受け取ったPSDをFigmaで使いたいときに便利...FigmaとPSDの変換精度をPhotopeaと比べた｜双方向で描画モード・マスク・影・文字の違いを検証
FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD...PSD Porter for Figmaの使い方｜FigmaとPSDをレイヤーのまま相互変換
PSD Porter for Figmaは、FigmaのフレームをレイヤーのままPSDに書き出し、PSDをFigmaのフレームとして読み込むプラグインです。無料で使えます。変換はプラグインの中だけで行い、ファイルを外部に送信しません。 この記事では、変換できる要素、手順、変...Figmaプロトタイプの作り方｜画面遷移・スマートアニメート・共有の確認
Figmaプロトタイプの画面遷移を設定する手順と実画面。トリガー・移動先・開始点、スマートアニメートの名前と階層、スクロール・オーバーレイ・共有条件を解説します。Figmaオートレイアウトの使い方｜Hug・Fill・Fixedとボタン・カードの設定
FigmaオートレイアウトのHug・Fill・Fixedを親子で選び分ける方法。実測ボタンの文字変更と余白、カードの設定例、折り返し・グリッド、崩れたときの確認順を解説します。Figmaの.figファイルを読み込む方法｜インポート・権限・フォントの確認
ダウンロードした .fig は、Figmaのファイルブラウザから読み込みます。読み込む前に、ファイル形式、利用条件、更新日を確認しておくと、古い版や別用途のデータを取り違えずに作業を始められます。 この記事はFigma公式の手順と、2026年10月3日の配布素...Figma for VS Codeの使い方｜公式拡張の導入・Dev Mode・MCPとの違い
Figma for VS Codeは、VS Codeの中でデザインを開き、寸法・コード候補・アセット・コメントを確認する公式拡張機能です。利用には有料プランのFull席またはDev席が必要です。 AIエージェントをFigmaへ接続するMCPとは、設定も役割も異なります。 この記事...Figmaウィジェット開発入門｜Widget API・共有状態・最小コード
Figmaのウィジェットは、Figma DesignやFigJamのキャンバスに配置して使う操作部品です。共同編集者が同じ表示と状態を共有するため、進捗の表示や投票などに使えます。ファイル内の処理を自動化するプラグインとは、表示場所と状態の管理方法が異なります...FigmaをNotion・Webサイトに埋め込む方法｜URL・iframe・表示できない原因
Figmaのデザインやプロトタイプを埋め込むときは、Notionに貼る共有URLと、Webサイトに貼るiframeコードを使い分けます。埋め込み先のページを閲覧できても、Figma側の共有設定を満たしているとは限りません。貼り付け後は、実際の閲覧者と同じ条件で確認...Figma Sitesの公開方法｜プラン・独自ドメイン・再公開と停止
Figma Sitesは、デザインしたWebページをFigmaから公開する製品です。Publishで公開用のURLを作り、更新後は再公開してWeb上の内容を反映します。Figma Designの共有リンクやプロトタイプとは、公開先と更新の扱いが異なります。 この記事では、公開条件、...Figma SlidesのPowerPoint読み込み・書き出し｜PPTXの崩れと対処
Figma Slidesには、PowerPointの.pptxを読み込み、編集した資料をPPTXまたはPDFで書き出す機能があります。ただし、フォント・動画・グラデーションなどがそのまま往復するとは限りません。編集を優先するのか、見た目の共有を優先するのかで出力設定を選...FigmaプラグインをCommunityに公開する方法｜申請・審査中の更新・データセキュリティ
自分で作ったFigmaプラグインは、Figmaのデスクトップアプリから申請して、Communityに公開できます。この記事では、実際にプラグイン「PSD Porter for Figma」をCommunityに申請して公開したときの手順と、審査中・更新・データセキュリティの審査で分か...Tokens StudioとStyle Dictionaryの連携｜JSONからCSS変数を出力する
Tokens StudioはFigmaでデザイントークンを扱うプラグイン、Style DictionaryはJSONのトークンをCSSなどへ変換するツールです。Tokens Studioの形式を扱う場合は、sd-transformsを登録し、設定にtokens-studioのpreprocessorも指定します。 この記事ではGi...Figma Webhooks V2の使い方｜更新・コメント通知と受信確認
FigmaのWebhooks V2は、コメントやファイル更新などのイベントを、指定したサーバーへHTTP POSTで通知する機能です。FILE_UPDATEは編集のたびに即時通知する機能ではなく、編集が止まってから30分以内に発生します。 コメント通知にはFILE_COMMENTを選びま...FigmaのコメントをREST APIで取得・CSV出力する方法
Figmaのファイルに付いたコメントは、REST APIのGET /v1/files/:key/commentsで取得できます。レビュー内容を一覧化する場合は、コメント本文だけでなく、返信先のparent_idと解決日時を残すと、会話のつながりを確認しやすくなります。 この記事では、必...FigmaのSVG書き出し設定｜文字・id属性・線・余白を用途別に選ぶ
FigmaからSVGを書き出すときは、文字の見た目を保つか、文字列を残すか、Web側で内部要素を操作するかを先に決めます。設定を選ぶだけで終えず、書き出したSVGを使用先で確認してください。 SVGを書き出す基本手順 書き出すフレームやレイヤーを選択します...SketchファイルをFigmaへ読み込む方法｜変換後のスタイル・フォント・ライブラリ
Figmaは.sketchファイルを読み込み、Figma Designファイルへ変換できます。アートボードはフレーム、シンボルはコンポーネントへ変換されますが、Sketchのスタイルは保持されません。ライブラリの公開と参照の接続も別途確認が必要です。 この記事は2026年...Figma Dev Modeの使い方｜必要な席・仕様確認・コード・変更比較・注釈
Dev Modeは、Figmaのデザインを開発向けに確認する画面です。対象の部品を選び、寸法・色・書式・素材・変更点・注釈を確認して実装へ渡すために使います。表示されるコードを、アプリ全体の完成コードと混同しないようにしてください。 あなたはどっち？...
