UIからパンフレットまで！DTPデータもFigmaで作りきる理由と方法

こんにちは、Timersデザイナーチームです。
Timersでは、デザインワークではほぼFigmaしか使いません。
今回は全てをFigma中心でデザインする理由と、方法をご紹介します。

Fammは家族のアルバムアプリであり、オリジナルのカレンダーサブスクリプションサービスであり、家族関連の商材を扱うストアでもあります。

デザインはUIや広告などデジタル媒体以外にも、カレンダーやプレベビーアルバム、パンフレット、チラシや私たちの名刺などDTPデザインも行います。

Timersのデザイナーは、これらのほとんどのデザインをFigma化しています。

なぜDTPデザインまでFigmaで作るのか？

実際に手に取れる物のデザインをFigmaで完結させる理由は、
コラボレーションに重きをおいているから
です。

IllustratorやPhotoshop、Sketchと比べ、Figmaは簡単にデザインを共有することができます。
複数人のデザイナーチームでFigma以外のソフトでデザインをすると、
1. データを作ってドロップボックスに保存
2. 別の人がダウンロードして作る
3. それを再度ドロップボックスにアップロード
という工程を踏まなければなりません。ファイル名も、「~~_20200412_mifu」とか「~~_20200512_tomo」のようにどんどん新しいファイルができ、気づけばどれが最新版かわからない☠️なんてことになってしまいます。

Figmaならリンク一つで共有、隣で作業できるので、他の人がブラッシュアップしたアイデアをすぐに反映させられるので速度が上がりました。

FigmaでチラシのPDF入稿データを作る方法

1. A4アートボードを作る
PDF入稿の場合は、トンボや塗りたしが不要なのでA4サイズのアートボードを作ります。
アートボードツールをもつと右側の「Paper」から、px単位のA4サイズを選ぶことができとても便利です。

2. 作る
デザイン担当者が作ったチラシの素案を作ったり、他のデザイナーがブラッシュアップして返したりして作っています
👇左からtomoの素案、mifuのクリエイティブのブラッシュアップ、tomoの最終アウトプット

3. PDFに書き出して入稿
ExportからPDFで書き出して入稿しています。Timersではラクスルを使っていますが、今のところ差し戻しなどはありませんでした。

トンボが必要など、複雑な入稿データもFigmaで！

名刺など納品の際にトンボが必要な場合は、
1. 印刷会社が用意しているテンプレートをAiでダウンロード
2. SVGで書き出し
3. Figmaにベタばり
するとpxに変換されたぴったりサイズのデータを作ることができます。

Illsutratorを開いたりとステップは多いですが、移行したメリットが莫大で喜んでいます。

例えば名刺をFigmaに移行することで、corpチームが名刺作成をすることができるようになり（corpはAdobeを持っていなかった）、デザイナーの仕事が分担されました👏

他にも（Ai入稿だったので）50人前後の名刺ファイルをそれぞれベクターとアウトライン化された2つずつ持っていましたが、Figmaで全員分を1ファイルに納めることができ、ファイルを探す手間がなくなりました👏

Figmaでは細かいグラフィックデザインはできない

Figmaで紙もののデザインをするとIllustatorなどで作るほど細かい作り込みはできませんが、Timersはスタートアップということもあり
100点のものを1日かけて作るより、70点のものを4時間で出すことを重要視しているので、あえて細かい作りこみに拘らないように意識しています。

☝️よく見たらズレてたり正円じゃない部分があるパンフレットのグラフィックコンテンツ

印刷業者によってはPDF入稿ができなかったり、Adobe Acrobatで作成されたデータしか受け入れてもらえなかったりするので注意が必要です。

求められるデザインやメンバーによってツールを使い分けると良さそうです。

最後に

Timersでは、UI/UX以外にも幅広いデザインワークに興味があるデザイナーを積極採用中です😙

https://speakerdeck.com/timers_inc/timers-guidebook