Figmaの知識

Photopea（フォトピー）は、ブラウザで使える無料の画像編集ソフトです。PhotoshopのPSDをそのまま開いて編集でき、Figmaの.figファイルも開けます。Figmaのデザインを「PSDで納品してほしい」と言われたときや、受け取ったPSDをFigmaで使いたいときに便利...

FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD...

PSD Porter for Figmaは、FigmaのフレームをレイヤーのままPSDに書き出し、PSDをFigmaのフレームとして読み込むプラグインです。無料で使えます。変換はプラグインの中だけで行い、ファイルを外部に送信しません。 この記事では、変換できる要素、手順、変...

Figmaプロトタイプの画面遷移を設定する手順と実画面。トリガー・移動先・開始点、スマートアニメートの名前と階層、スクロール・オーバーレイ・共有条件を解説します。

FigmaオートレイアウトのHug・Fill・Fixedを親子で選び分ける方法。実測ボタンの文字変更と余白、カードの設定例、折り返し・グリッド、崩れたときの確認順を解説します。

ダウンロードした .fig は、Figmaのファイルブラウザから読み込みます。読み込む前に、ファイル形式、利用条件、更新日を確認しておくと、古い版や別用途のデータを取り違えずに作業を始められます。 この記事はFigma公式の手順と、2026年10月3日の配布素...

Figma for VS Codeは、VS Codeの中でデザインを開き、寸法・コード候補・アセット・コメントを確認する公式拡張機能です。利用には有料プランのFull席またはDev席が必要です。 AIエージェントをFigmaへ接続するMCPとは、設定も役割も異なります。 この記事...

Figmaのウィジェットは、Figma DesignやFigJamのキャンバスに配置して使う操作部品です。共同編集者が同じ表示と状態を共有するため、進捗の表示や投票などに使えます。ファイル内の処理を自動化するプラグインとは、表示場所と状態の管理方法が異なります...

Figmaのデザインやプロトタイプを埋め込むときは、Notionに貼る共有URLと、Webサイトに貼るiframeコードを使い分けます。埋め込み先のページを閲覧できても、Figma側の共有設定を満たしているとは限りません。貼り付け後は、実際の閲覧者と同じ条件で確認...

Figma Sitesは、デザインしたWebページをFigmaから公開する製品です。Publishで公開用のURLを作り、更新後は再公開してWeb上の内容を反映します。Figma Designの共有リンクやプロトタイプとは、公開先と更新の扱いが異なります。 この記事では、公開条件、...

Figma Slidesには、PowerPointの.pptxを読み込み、編集した資料をPPTXまたはPDFで書き出す機能があります。ただし、フォント・動画・グラデーションなどがそのまま往復するとは限りません。編集を優先するのか、見た目の共有を優先するのかで出力設定を選...

自分で作ったFigmaプラグインは、Figmaのデスクトップアプリから申請して、Communityに公開できます。この記事では、実際にプラグイン「PSD Porter for Figma」をCommunityに申請したときの手順と、審査中・更新・データセキュリティの審査で分かったこと...

Tokens StudioはFigmaでデザイントークンを扱うプラグイン、Style DictionaryはJSONのトークンをCSSなどへ変換するツールです。Tokens Studioの形式を扱う場合は、sd-transformsを登録し、設定にtokens-studioのpreprocessorも指定します。 この記事ではGi...

FigmaのWebhooks V2は、コメントやファイル更新などのイベントを、指定したサーバーへHTTP POSTで通知する機能です。FILE_UPDATEは編集のたびに即時通知する機能ではなく、編集が止まってから30分以内に発生します。 コメント通知にはFILE_COMMENTを選びま...

Figmaのファイルに付いたコメントは、REST APIのGET /v1/files/:key/commentsで取得できます。レビュー内容を一覧化する場合は、コメント本文だけでなく、返信先のparent_idと解決日時を残すと、会話のつながりを確認しやすくなります。 この記事では、必...

FigmaからSVGを書き出すときは、文字の見た目を保つか、文字列を残すか、Web側で内部要素を操作するかを先に決めます。設定を選ぶだけで終えず、書き出したSVGを使用先で確認してください。 SVGを書き出す基本手順 書き出すフレームやレイヤーを選択します...

Figmaは.sketchファイルを読み込み、Figma Designファイルへ変換できます。アートボードはフレーム、シンボルはコンポーネントへ変換されますが、Sketchのスタイルは保持されません。ライブラリの公開と参照の接続も別途確認が必要です。 この記事は2026年...

Dev Modeは、Figmaのデザインを開発向けに確認する画面です。対象の部品を選び、寸法・色・書式・素材・変更点・注釈を確認して実装へ渡すために使います。表示されるコードを、アプリ全体の完成コードと混同しないようにしてください。 利用条件と、切り...

Figma MCPサーバーは、AIクライアントへデザインの構造・画像・Variables・コンポーネント情報などを提供する仕組みです。最初はFigmaが推奨するリモート版を検討し、Figma上で選択中のレイヤーを参照したい場合はデスクトップ版を選びます。 リモート版で...

Figma Code Connectは、Figmaのコンポーネントとリポジトリ内の実装を対応付ける機能です。UI版はコードの場所を接続し、CLI版はプロパティに応じた実装例をDev ModeのInspectに表示できます。 UIで接続するだけで、実装スニペットがInspectに表示されるわ...

Figmaの標準インポートに.xdと.aiは含まれていません。Illustratorから編集可能なベクターを移す場合はSVG、見た目を1枚の画像として残す場合はPNG・JPGを使います。PDFは、Figmaの標準インポートでそのまま編集できる形式として案内しません。 この記事は...

FigmaのVariablesは、Variables画面のExport mode／Export modesからJSONへ書き出せます。画面で書き出すJSONと、Plugin API・REST APIで取得した変数オブジェクトは同じ形式ではありません。 APIの取得結果をそのまま保存しても、DTCG形式のデザイントー...

Figmaのフレームやコンポーネントを画像として書き出すREST APIは、GET /v1/images/:keyです。複数のnode IDをidsへまとめて指定し、返ってきた画像URLから別途ダウンロードします。APIの応答自体は画像ファイルではありません。 この記事は2026年10月3日...

Figmaプラグインは、レイヤーの読み取りや変更をJavaScriptで行うプログラムです。TypeScriptで書いた処理はJavaScriptへコンパイルし、manifest.jsonに実行するファイルを指定します。画面を付ける場合は、UIと処理の間でメッセージを送受信します。 以下...