Figmaで画像を読み込んで使用する

Figma に画像ファイルを読み込む方法は、大きく分けて3種類あります。

ドラッグ&ドロップ

ツールバーから読み込む

□ (Shape Tool) > Place Image を選択して、画像ファイルを選びます。

シェイプの塗りに適応する

• Rectangle 等のオブジェクトを選択します。
• □ (Shape Tool) > Place Image を選択して、画像ファイルを選びます。
• マウスアイコンに写真なるので、この状態でオブジェクトをクリックすると、画像がオブジェクトの塗りに設定されます。

Sketchとの違い

Sketch の場合、画像が直接配置されている状態と、オブジェクトの塗りに設定されている状態という2つのパターンがありました。

Figma では、オブジェクトの塗りに設定されるパターンのみとなります。CSSで言うところの background-image です。画像をドラッグ&ドロップしたとしても、自動的に長方形シェイプが作成され、そのシェイプの塗りに画像が設定されている状態となります。

シンプルで分かりやすいのに加え、オブジェクトの塗りに設定された画像にも色調補正が掛けられるという柔軟性も兼ね備えています。 また、Gifアニメーションが使えたり、マスクを使わなくても画像が切り抜けるなど、画像に関しては Sketch よりも機能が充実しているようです。

範囲選択 & 塗りつぶし

Sketch で有効なこのオプションは、Figma には存在しません。 使用機会は少ないと思いますので、Figma のディスアドバンテージとしては考えにくいです。

色補正

Sketch に比べ、より多くの補正オプションが有効です。 右サイドのインスペクタパネルで Image をクリックすると、オプションパネルが表示されます。

切り抜き

Sketch の Crop と違い、こちらは後からでも編集できるので便利です。塗りのモードから Crop を選択し、画像の四隅のハンドルをドラッグ&ドロップすると、任意の位置で切り抜くことができます。

ぼかし効果

画像全体にぼかし効果を適応することができます。 Effects セクションの + をクリックして Layer Blur を選択してください。

ぼかし効果を使うと、画像のエッジもぼけてしまいます。 写真に対してぼかし効果は使いたいが、エッジをはっきりと出したいという場合は、次の「マスク」というテクニックを使うと、実現することができます。

画像のマスク

「画像を加工する」のセクションで紹介した Crop という機能は、画像データそのものを変更して切り抜いてしまいます。作業が完了してしまった後は、切り抜き位置をコントロールすることができませんので、通常は「マスク」というテクニックを使用します。

• 写真の下にオブジェクトを追加します。Oval Rectangle Vector 等、閉じているパスであれば、どんなシェイプでも大丈夫です。
• 画面の上中央部のマスクツールを選択すると、下に配置してあるオブジェクトで写真が切り抜かれます。ショートカットは ⌘ + Control + M です。
• 上の例では、マスクオブジェクトは Rectangle 17 です。
• オブジェクトは自由に移動することができますので、マスクした後でも写真の切り抜き位置を変更できるという利点があります。

マスクより上部に配置されている全ての要素は、マスクの影響を受けます。 写真とマスクオブジェクトをグループ化すると、影響範囲を限定することができます。

画像の置き換え

画像オブジェクトを選択して右のインスペクタパネルから Fill > Image をクリックします。画像にマウスオーバーすると、Choose Image ... ボタンが現れますので、そこから画像を差し替えることができます。