デザインファイルへの画像の追加

写真、スクリーンショット、その他のビジュアルアセットをデザインに組み込むには、画像をデザインファイルに追加します。Figmaでサポートされている画像形式は、PNG、JPEG、HEIC、GIF、およびWEBPです。

Figmaには、画像用の特定のレイヤータイプはありません。画像は塗りのタイプです。このため、画像を任意のシェイプやベクターネットワークに追加できます。

右サイドバーの[塗り]セクションで画像の塗りを表示および更新します。スウォッチに画像のサムネイルが表示され、Imageラベルが表示されます。

左サイドバーの[レイヤー]パネルで、画像の塗りのレイヤーを識別することもできます。

• キャンバスに画像を直接追加すると、元のファイルの寸法の長方形がキャンバス上に作成され、画像アイコンとImageラベルが表示されます。
• 既存のオブジェクトに画像を追加すると、元のレイヤーのレイヤーアイコンと説明が使用されます。

ファイルへの画像の追加

画像は塗りであるため、任意のベクターまたはシェイプに追加できます。このためより柔軟かつ詳細にコントロールできます。画像をデザインファイルに追加するには、さまざまな方法があります。

• A コンピューターからキャンバスに画像ファイルをドラッグ&ドロップします。Figmaでは画像の寸法で新しい長方形が作成され、画像が塗りとして適用されます。

• B 画像ファイルをファイルブラウザにインポートします。プロジェクト内に新しいデザインファイルが作成され、画像が長方形として追加されます。

• C 配置機能を使って複数の画像をデザインに一括で追加します。画像を追加するレイヤーを選択します。画像の一括配置 →

• D 色選択機能から画像インポーターを使用します。画像の塗りのアップロード →

• E 現在のファイルの別のレイヤー、または別のファイルから画像をコピーします。レイヤー間での画像のコピーおよび貼り付け →

• F クリップボードにある画像をキャンバスに貼り付けます。画像はダウンロードまたはアップロードせずにWebからコピーできます。キャンバスでの画像の貼り付け →

画像の編集

さまざまな方法で画像を編集または調整できます。

• 画像を含むレイヤーを拡大縮小、回転、または寸法を調整する
• レイヤーに適用されている画像をトリミングして位置を変更する
• 画像のオプション(塗りモード、回転、ブレンドモードなど)を調整する
• スタイルとコンポーネントに画像を組み込む
• マスクを適用して画像の一部のみを表示する
• 画像を調整する(色相、彩度、コントラストの変更など)