Figmaの印刷データ用プラグイン「Print for Figma」の使い方。 / いがわ

.

Memo

Figmaで印刷物。DTPプラグインPrint for Figma。

Print for Figma。Figmaの印刷物用プラグインとは?

Figmaで作るDTP。

Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインもできる。

無料で使え、初心者にも向いている。

PhotoshopからのFigma。

FigmaはPhotoshopを意識して作られたデザインツールなのだそうで、カラーパレットやレイヤーなどの機能やインターフェイス、ペンツールや図形、テキストのツール、ショートカットなど、操作上の共通点が多々ある。

そのため、IllustratorやPhotoshopの前の入門としての利用するのもありだと思う。

Figma(フィグマ)の印刷用プラグイン、Print for Figmaのページの画像。

作者:Ben Katz
プラグインサイト:Print for Figma

Figmaで印刷用データを作成するサポートをしてくれるプラグイン、「Print for Figma」。

英語だがシンプルな単語のメニューばかりなので、普通にブラウザの翻訳機能でなんとかなる。

後日追記)

プラグインが更新されています。基本的な部分は変わっていないようですが、CMYKへの対応がされています。また、アプリ内課金があります。


Print for Figmaの保存と使い方。

Print for Figmaの入れ方。

入れ方は簡単。数ステップで。

Print for Figmaを検索。

プラグインはツールバーの「Actions(アクション)」から、「Plugins(プラグイン)」のパネルを開き、「print for figma」で検索する。

「Print for Figma」が表示されたら、クリックすると画面が切り替わる。

新しいインターフェイスのUI3では、ツールバーは画面下部に移動しています。)
Resources(リソース)はActions(アクション)に名称が変わっています。)

Print for Figmaの入れ方。

右横の三点リーダーから「Save(保存)」ができる。

以前は三点リーダーからでしたが、現在はブックマークからに変わっています。)

Print for Figmaの入れ方。

右クリックメニュー、または、プラグインの配布サイトPrint for Figmaからでも保存可能。

Figmaへ保存しない場合。

保存をせずに使用する場合は、「Print for Figma」パネルの「Run(実行)」をクリック。

Print for FigmaのRun(実行)。


「Print for Figma」パネルの開き方。

「Main menu(メインメニュー)」 > 「Plugins(プラグイン)」 > 「Print for Figma」で開く。

右クリックメニューからでも可。

Print for Figma。Figmaの印刷データ用プラグインの使い方。

再起動などは不要で、そのまますぐに使うことができる。


「Print for Figma」のパネルでフレームの設定をする。

プリセットの項目が出るので、作成する用紙サイズや解像度の設定を行う。

今回は「Miscellaneous(その他)」 > 「Business Card(ビジネスカード)」を選択。

初期設定はアメリカのサイズ「3.5inch×2inch」となっている。

Print for Figmaの設定。

日本用に、「Width(幅)」と「Height(高さ)」を「91mm×55mm」に、「Unit(単位)」を「mm」に変更する。

人と違ったおしゃれ感を出すためや、欧米を股にかけてお仕事をする場合は欧米サイズもありかもしれない。

Print for Figmaの設定。

「Advanced」をクリックすると、メニューが開くので、「Scale Document to DPI」で解像度を「300」に変更する。

選択肢の解像度に350はなかった。

Print for Figmaの設定。

「Create」をクリックして設定は完了。


名刺サイズのフレームが作成される。

「91mm×55mm」のサイズのフレームが作成される。

フレーム下部や右サイドのパネルの単位はあくまでも「pixel」だが、解像度(300dpi)から計算されたピクセルサイズとなっている。

Print for Figmaの設定。


塗り足し分をつける場合は97mm×61mmにする。

実際の印刷データには通常、上下左右に3mmの塗り足しが必要となる。なのでWidthとHeightの値はそれぞれ+6mmで設定する。

Print for Figmaの設定。

その分、ピクセルサイズも大きくなる。

Print for Figmaの設定。

自分用のシンプルな名刺デザイン。

Print for Figma。Figmaの印刷データ。

サイズなどの補足。
  • Figmaのファイル形式に対応している印刷会社はまだ無いか、あっても少ないため、書き出しはPDFデータが無難。(2024年2月時点。)
  • RGB入稿に対応している印刷会社は増加中。

Figmaで作成した名刺データ。(補足付き)の画像。

  • あくまでも説明用として。この状態では入稿できないのでご注意ください。
  • Figma Community へアップしました。

参考メモ。

参考:Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
参考:Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
参考:Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。

Figmaの印刷データ用プラグイン「Print for Figma」の使い方。

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


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

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。