Figmaでラスタライズをする方法と注意点。 / メモ / いがわ

Figmaでラスタライズをする方法と注意点。

2023.11.21 2024.03.15更新。

Contents - 目次

1 解像度とラスタライズと。
2 Figmaのラスタライズ方法。
3 モニター用は72ppi、印刷用は300dpiや350dpiが目安。
4 Figmaのクイックアクションバーのショートカット。
5 Figma 関連メモ。

解像度とラスタライズと。

解像度の設定。

Figmaの場合。

Figmaは元々Web用のデザインツールのためか、現時点（2024年03月）では「解像度」の設定がない。

Illustratorの場合。

Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラスタライズ」を行う。

その際の解像度は「300dpiや350dpi」が基本となっている。

（※補足：単位としては、「dpi」 = 「ppi」）

Illustratorでラスタライズを行う画像。

Figmaのラスタライズ方法。

Figmaのラスタライズ。

ドロップシャドウやぼかしをラスタライズ。

「ラスタライズ」は下記の手順で可能。解像度はおそらく「72ppi」となる。

ラスタライズの手順。

ラスタライズしたいオブジェクトを選択する。

シャドウやぼかしをかけたオブジェクトを、クリックで選択。

Figmaでオブジェクトを選択した画面。

「Main menu（メインメニュー）」 > 「Quick actions（クイックアクション）」からクイックアクションバーを開く。

クイックアクションバーを開く。

Figmaのメインメニューの画面。

「ラスタライズ」と入力する。

キーボードから「ラスタライズ」などと入力し、「選択したレイヤーのラスタライズ」をクリックする。

Figmaのクイックアクションバーの画面。

英語で利用している場合は、「rasterize」などと入力し、「rasterize selection」をクリック。

Figmaでのラスタライズ。英語版の画面。

ラスタライズされる。

ラスター（ビットマップ）化された、一枚画像となる。

Figmaでオブジェクトをラスタライズした画面。

ラスタライズとエクスポートと解像度。

Figmaでのラスタライズの解像度はおそらく72ppi。

Fifmaから書き出した（エクスポートした）デザインの解像度はデフォルトで72ppiとなる。

参考：エクスポート形式および設定 – Figma Learn – ヘルプセンター

※後日追記）

詳しいことはこちらへまとめました。

関連：Figmaの解像度は？計算に便利なサイトやプラグイン。

モニター用は72ppi、印刷用は300dpiや350dpiが目安。

「ppi」と「dpi」。

モニターは「ppi」、紙は「dpi」。

スマホやパソコンなどのモニターの場合と、紙への印刷の場合の単位はそれぞれ違う。

が、単位が違っても、数値は同じ扱いができる。（例： 72ピクセル = 72ドット）

「PPI (pixel per inch)」は、1インチあたりのピクセル数。（モニター用の単位。）
「DPI (dot per inch)」は、1インチあたりのドット数。（印刷用の単位。）

Figmaのクイックアクションバーのショートカット。

クイックアクションバー。

クイックアクションバーは、ショートカットからでも開くことができる。

Mac：「command」 + 「/」 or 「command」 + 「P」
Win：「Ctrl」 + 「/」 or 「Ctrl」 + 「P」

Figmaでカーニングとトラッキングができると聞いた猫。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川宜久 / Norihisa Igawa

Figma 関連メモ。