「書き出し」の検索結果

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

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

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

Figmaの共有権限を、アクセスと権限の2つに分けて解説し、社外への共有やプロトタイプだけの共有、権限の引き継ぎ、有料プランの追加設定をまとめました。

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のフレームとして読み込むプラグインです。無料で使えます。変換はプラグインの中だけで行い、ファイルを外部に送信しません。 この記事では、変換できる要素、手順、変...

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

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

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

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からPNG・JPGを2倍の寸法で書き出すには、対象のレイヤーやフレームを選び、Exportのスケールに 2x を指定します。幅300px・高さ200pxの範囲なら、計算上の出力寸法は600×400pxです。 表示したい大きさと、書き出す画像のピクセル数を分けて考えると...

Figmaの更新を追うときは、まず自分が使う機能の変更を確認します。2026年9月にはAuto layoutの縦方向Wrap、MotionのLottie出力、色のVariablesの不透明度などが更新されています。 このページは、2026年10月3日に確認した公式リリースノートと配信データ...

Figma Designを初めて使う場合は、フレームを作り、文字と図形を置き、余白を調整し、画像として書き出す順に進めると、ひとつの画面を作る操作を確認できます。共通部品や複数画面の管理は、その後に学びます。 このページでは、初めての画面制作、素材の...

Figmaの記事を5つの分野から探せます。初めて使う場合は入門ガイドから始めてください。 Figmaの使い方 カテゴリーの記事一覧 Figmaプロトタイプの作り方｜画面遷移・スマートアニメート・共有の確認Figmaオートレイアウトの使い方｜Hug・Fill・Fixedとボ...

開いているFigma DesignファイルのローカルスタイルをCSVにまとめます。カラー、テキスト、エフェクト、レイアウトグリッドを一覧化し、名前や定義を確認するためのプラグインです。ライブラリ全体やVariablesの書き出しとは対象が異なります。 出力する情...

ファイル内のコンポーネントをCSVへ出力する場合、出力処理だけでなく、検索自体の負荷も確認する必要があります。この例ではページを順に読み込み、レイヤーを200件単位で走査してUIへ進行状況を送ります。コンポーネントセット内のバリアントも1行ずつ出...

Figmaの情報を外部スクリプトから取得するならREST API、開いているファイルのレイヤーを作成・編集するならPlugin APIが基本です。画像の書き出しなど、両方でできる作業もあるため、実行場所と変更したい対象から選びます。 この記事はFigma公式ドキュメ...

ボタンの見た目を比較し、Figmaの画面デザインで検討するための素材パックを無料配布しています。この記事には、既存のボタン素材35種類の見本を掲載しています。 配布形式は .fig です。画像の見本と、編集用のFigmaファイルを区別してください。更新履歴...

SWELLで制作するサイトの画面をFigmaで検討するためのテンプレートを無料配布しています。配布形式は .fig。Figmaへ読み込み、文章・色・配置を検討する用途に使います。 WordPressへ取り込むテーマや着せ替えデータとは用途が異なります。Figmaでデザイン...

Figma Designでは、フレームに文字と図形を配置して画面を作ります。最初は1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。 以下はFigma公式の案内に基づく操作ガイドです。右側の設定項...

いますぐ消したいなら、Shift + C を押すだけです。 Figmaのコメントを一時的に隠すには、Shift + Cを押します。もう一度押すと表示に戻ります。コメントの投稿や返信は残るため、デザインだけを見たいときに使えます。Figma公式も「コメントを隠すには、...