Figmaの印刷データ用プラグイン「Print for Figma」の使い方。デザイナー、コーチ、ディレクター / 井川

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

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のインストールと使い方。

インストールは簡単。数ステップで。

インストール方法。

インストールは上部メニューの「Resources(リソース)」から、「Plugins(プラグイン)」のパネルを開き、「print for figma」で検索する。

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

Print for Figmaのインストール方法。

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

Print for Figmaのインストール(保存)方法。

右クリックメニュー、または、プラグインの配布サイトPrint for 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データで行う。


参考メモ。

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

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

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


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

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

Figma 関連メモ。

デザインツールFigmaのロゴ。
使い方 & プラグインなど。

免責事項について

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