figmaですでにあるコンポーネントに画像は配置できるの？
パソコン内の画像からじゃなくてfigmaの中にある画像を貼り付けたいんだけど。。
画像の貼り付け方にはいろんな方法があって、
もちろんfigmaの中の画像を貼り付けることも可能だよ！
今回は目的別にfigmaでの画像の貼り付け方を紹介していくね。
今回はデザインツールfigmaを用いて画像を貼り付ける方法を丁寧に解説していきます。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
PCに保存している画像を貼り付けたい
まずは基本的な画像インポート方法をご紹介します。
すでにご存知方も多いかと思いますので必要に応じて読み飛ばしていただいて構いません。
ドラッグ&ドロップする
これが一番シンプルな方法ですね。挿入したい画像をPCの画面からドラッグ&ドロップするとfigmaファイル内に画像が挿入されます。
ただしこの方法では新規イメージとしてファイル内に挿入されるため、任意の図形に貼り付けたいといった場合には使えません。
任意の画像に貼り付けたいときは次の方法を使います。
プロパティ設定からインポートする
任意のオブジェクトに貼り付けたい場合はこちらの方法を使います。
figmaは基本的に画像もオブジェクトのプロパティとして管理されています。
（オブジェクトに対する背景画像が設定されているイメージ
そのため、画像を貼り付けたいオブジェクトを選択して右側のFillプロパティをImageにし、
Choose Imageから貼り付けたい画像を選んで貼り付けます。
複数の画像をまとめて貼り付けたい
貼り付けたい画像がたくさんあるときには１枚ずつ読み込んでいくのは非常に手間ですよね。
figmaには画像をまとめて取り込み、貼り付けできる機能があります。
複数画像の貼り付け（⌘ + shift + k）
まずは貼り付け先のオブジェクトを用意します。
その状態で⌘コマンド + shift + kを押すとPC内の画像を選択するウィンドウが表示されたら貼り付けたい画像を複数選択して開くを押します。
このときマウスをドラッグ&ドロップやシフトを押しながらクリックすると連続したファイルを選択できます。またコマンドを押しながらクリックすると個別に選択することができます。
そうするとカーソルに画像と枚数が表示されますので貼り付け先を順にクリックしていくと画像が貼り付けられていきます。
figmaファイル内で管理している画像を貼り付けたい
これまでご紹介してきた機能はPCに保存されている画像のインポートでした。
しかしfigmaを使っている時によくあるシチュエーションとして、素材をあらかじめfigmaのフレームに配置しておき、それを任意の場所に貼り付けたいといったことがあるかと思います。
そんな時に使える技をご紹介します。
私が知りたかったのはこの機能のこと！
スタイルコピー使う
結論、スタイルコピーが1番おすすめかつ簡単な方法です。
スタイルコピーとは、プロパティをコピーする機能です。たとえばテキストを扱う際、文字はそのままで文字色やフォント等を同じにしたいといった場合に使える機能です。
最初の章でもご説明しましたがfigmaでは画像もオブジェクトのプロパティとして扱われています。
そのため画像のプロパティをコピーして任意のオブジェクトに貼り付けると画像も貼り付けられるということです。
実際に見てみましょう。
やり方は簡単で、貼り付けたい画像を選択して、⌘コマンド + オプション + cでプロパティをコピー。
貼り付け先のオブジェクトを選択して⌘コマンド + オプション + vで貼り付けることができます。
コンポーネントを活用する
もう１つコンポーネント機能を使う方法があります。
コンポーネントとはFigma内で部品として登録できる機能であり、登録したコンポーネントはAssetsタブからいつでもドラッグ&ドロップで貼り付けることができます。
ただし、先程のスタイルコピーのように既存のオブジェクトに貼り付けることはできないので注意が必要です。
本番で使用する画像が確定している場合にはコンポーネントに登録して使用する方法もいいかもしれません。
figma内でサンプル画像を貼り付けたい
デザインをしていると、何でもいいけどとりあえずいい感じのサンプル画像を入れておきたい時ってありますよね。
サンプル画像をフリー素材サイトからダウンロードしてfigmaに取り込み。としてると手間がかかってしまいます。そこで、figmaのプラグインを導入することで、フリー素材の検索から貼り付けまでfigma内で完結させることができます。
プラグイン「Unsplash」を使う
Unsplashはfigmaプラグインの中でダウンロード数がNo.1の人気プラグインです。
プラグインを導入したら早速使っていきましょう。
貼り付けたいオブジェクトを右クリック＞Plugins＞Unsplashを選択。
そうしますと検索画面が表示されるので任意のキーワード（英語）で検索をして貼り付けたい画像をクリックするだけです。簡単ですね。
ちなみに導入しているプラグインは⌘コマンド + /を押すことで検索できます。
検索欄が出てきますのでUnsplashと入力すればUnsplashを呼び出すことができます。
おまけ：フレームをfigma内で画像に変換する
おまけとして、フレームをfigma内で画像に変換する方法をご紹介します。
結論、右クリック＞Copy As pngをして、右クリック＞PasteHereでpng化したフレームを任意の場所に貼り付けることができます
通常、フレームを選択してExportから画像としてエクスポートしますが、そうすると一度PCに保存さてしまいます。
例えばフレームを画像化したものをfigmaでモック画像に埋め込みたいといったときに本機能を用いてfigma内で画像化が完結すると非常に便利です。
ショートカットは⌘コマンド + Shift + Cでコピー、⌘コマンド + Shift + Vでペーストです。
まとめ
本日はさまざまな画像の貼り付け方をご説明しました。
とくにスタイルコピーはとても便利な機能ですので是非マスターしてみてください！
