
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Figmaで名刺を作成、印刷してみたところ。
デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。

Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラーモードはRGB、印刷物向けのデータ形式はPDFのみ、などと制限がある。が、工夫すれば問題なく入稿でき、実際の紙に印刷された名刺は特に問題なかった。
ただし、IllustratorやPhotoshopなどと違い、形式や手順が確立されていない。
名刺サイズは通常91mm×55mmであり、トンボをつけ、解像度は300〜350dpiにするのが一般的だが、Figmaの場合現時点ではその形式を一発では作れない。
なので少々下準備が必要となる。以下、何かしら目安になれば。
Figmaで作成した入稿用デザインデータ画面。
実際に作成したFigmaの画面のスクショ。(電話番号はモザイク。)
フレームを作って左側のレイヤーパネルで分け、上部のツールや右側のプロパティパネル類でデザインを作成し、最終的に「Export(エクスポート)」でPDFを書き出す。
入稿サイズと解像度は?
印刷用のデータは通常mmで作成するが、Figmaには現状(2022年12月)、px以外の単位がない。なのでpxで作成する。
・サイズ:「1337px × 841px」
一般的名刺サイズの「91mm×55mm」を「350dpi」に相当するピクセルに変換すると、「1254px×758px」となる。Figmaには解像度の設定項目がないのでこの計算を基にフレームをピクセルで作成。
ただしPDF入稿となるため、天地左右3mmの塗り足しが必要となる。なので塗り足し分を含めた「97mm×61mm」に相当する「1337px×841px」のサイズとした。
計算には下記サイトを利用。(発注もできる模様。)
トンボは?
・トンボ:「なし」
事前に印刷会社のサイトで確認したところ、PDF形式の場合はトンボの必要がなかったので、トンボは付けなかった。
アウトライン化は?
・アウトライン化:「あり」
通常、アウトライン化をしなければ入稿時に戻されてしまう。アウトラインはFigmaで可能なので、フォントデータなどは全てアウトライン化をした。
カラーモードは?
・カラーモード:「CMYK」
FigmaではRGBで作成し、PDFで書き出した後にオンラインの変換ツールでCMYKへ変換。
変換には下記サイトを利用。
参考:PDF To CMYK
入稿データ形式は?
・データ形式:「PDF」
Figmaの書き出しは、印刷物向けであれば現時点PDF一択となる。
(※ラスター形式で良ければJPGやPNGもある。)
印刷会社は?
・印刷会社:「グラフィック」
長年定期的に利用しており、たまたま事前に問い合わせをしていたグラフィックさんへ注文。
事前にFigmaのデータは入稿可能かどうかを確認したところ、オンラインサービスの「スマートチェック」であれば可能かもしれない、というお話をいただいていた。
ダメ元で試してみたところ問題なさそうだったのでそのまま発注してみた。
Figmaで制作し、実際に印刷された名刺。
印刷後手元に届いた名刺を確認したところ、Illustratorで作成した場合と変わらない仕上がりだった。
※テストのため自分用のもの。電話番号はモザイク。
紙質や厚みは、以前取り寄せていたペーパーカタログを参考に決定。(今回は、アラベール スノーホワイト 200kg。)
Figmaで作成したデザインデータをPDFで入稿しても、特に仕上がり具合に違いはなかった。
関連:Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
関連:Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
Figma 関連メモ。

- FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
- FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
- FigmaからWebPで書き出しす方法。Olive Pressの使い方
- Figma プラグインを削除する方法。追加も削除もシンプルに。
- Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
- Figma 削除したファイルを復元したいとき。復元の方法。
- Material SymbolsをFigmaへ。インストールしてすぐに使える。
- Figmaのルーラー(定規)の出し方。表示方法がイラレとちょっと違う!
- Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
- Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
- Figmaを日本語化。言語切り替えの使い方。再起動も不要。
- Figmaで検索・置換する方法。ショートカットからでOK。
- Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
- Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
- Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
- Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
- Figmaがダークモードに対応。背景色設定も簡単、目に優しい!
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。