Figma

Figmaという最高のデザインツールを細かいところまで徹底解説。

はじめに

デザイナーの皆さんは、普段どのソフトを使ってデザインをしているだろうか。
私もそうだったのだが、おそらく大半の方は、Adobe PhotoshopやIllustratorといったソフトを利用しているのではないだろうか。
しかし近年、Adobeを追い抜くような勢いを持つ、SketchやAffinityシリーズといったデザインソフトがどんどん増え始めており、デザインソフト市場に変化が訪れはじめている。

私はシフトブレインというデザイン会社に属し、アートディレクター/デザイナーとしてデザインの仕事をしているのだが、いままでずっとAdobe一択だった。しかし最近はWebデザインやアプリといったデジタルデザインの仕事も増えている。そんな時に、Photoshopだと「もっとこうしたいのに」「ココと、ココ、一緒に動いて欲しいな…」といった“そうなったらいいな”という機能のアイデアと要望、そして不満がどんどん増してきた。
そこで、軽いと評判のSketchに手を出してみたが、軽く触ってみた感じ、どうも好きになれなかった。当時は機能が少なすぎてデザインの味付けができない(味付けしづらい)と判断し、1日で使うことを断念した覚えがある。

そんな中、快適にデザインワークをこなせているくらい自分の中でしっくりときた“最高のデザインツール「Figma」”に出会い、ものすごく感動したので、皆さんにFigmaを使うメリットとデメリットを解説しながら、実際にFigmaで作ったデザイン作品とともに紹介していきたいと思う。

Figma サービスサイト ( https://www.figma.com/ )

まず、大前提として伝えなければならないのは、
Figmaは印刷物、いわゆる紙モノのデザインには対応していない。(しかし、グラフィックデザインは可能。)
その代わり、Webデザイン/アプリケーション/デジタルサイネージといった「デジタルデザイン」に特化した、効率的かつ合理的なデザインソフトである。
てっきり紙モノの入稿データまで作成できるソフトだと思って使い始めるとがっかりするので、そこは念頭にいれておいてほしい。
さっそくPhotoshopと比べて、Figmaが優れているところと、特徴、メリットを紹介していこう。

基本は無料で使用可能。

Figmaを使用するには、アカウントを作成する必要がある。
Googleアカウントでも登録することが可能。登録さえ終われば、すぐにFigmaを使用することができる。

他社のデザインソフトはほとんどがサブスクリプションになっており、当然ながら無料で使うことができない。
一方、Figmaはサブスクリプションプランはあるものの、無料プランも存在する。基本的に1人で使用する分には無料プランで問題なく使えるので導入コストが低く、ハードルも低い。
プロのデザイナーでも、これからデザインを学んでいきたい学生や、ディレクター職の方も、手軽に「デザイン」に触れ、作れるというのがFigmaのいいところ。

有料プランの仕組みはとてもややこしいので、ここでは省略させてほしいのだが、結論から言うと無料プランでなんだかんだやっていけるということだけお伝えしておこう。

ブラウザで動くデザインソフトである。

Figmaの最大の特徴は、なんといってもコレだ。

AdobeはCreative Cloudといった、オンラインストレージサービスを展開しているが、Figmaはなんと、ソフト自体がクラウド上にある。つまり、ブラウザ上で動くデザインソフトなのだ。
もちろんデスクトップ用のアプリケーションもあるので、ブラウザかアプリか、好きな方を選ぶことができる。
ブラウザ上で動くということは、メインマシンを持ち歩いてない時でも、ネット環境さえあればクラウド上にあるFigmaにアクセスし、デザイン作業の続きが行えてしまうのだ。さらには、クライアントやエンジニアに共有する際も、ローカルにソフトを入れていなくてもブラウザ上で起動する事で、様々な負担や手間を取っ払うことができる。
これがFigmaの最大の特徴である。

共同作業ができる。

Figmaは、クラウド上にあるデータを自分だけでなく、複数のデザイナー同士や、クライアントやエンジニアといった複数人と共同閲覧・共同編集が可能だ。ネットさえあればどこでも皆んなと一緒に作業ができる。
手分けして共同作業することで、一気にアウトプットまでの時間を短縮できるようになる。
また、デザインの好きな箇所に「コメント」を残すことができるコメント機能も搭載してるので、デザインのフィードバックなども効率的に行うことができる。

※ 無料プランは3人同時作業まで可能。それ以上の人数の場合、別途料金が発生するので注意。

データ容量が異常な軽さ

PSDデータは、カンバスサイズや色数が増えれば増えるほど、データ容量がものすごい膨大になっていく。写真が多めのデザインデータだと1GBにまで膨らんでしまうこともしばしば。
しかしFigmaのデータは「.fig」という拡張子のデータになっており、基本クラウドに情報が保存されているからなのか、異常にデータ容量が軽い。

Photoshopで作ったデザインと全く同じデザインをFigmaで作ってみたのだが、
PSDだと300MBくらいする物が、Figmaだとたったの3MBだった。一体どういうことなのだろか…。使っている写真もカンバスサイズも全く同じ。なのにこの差は一体….。
そしてFigmaは基本的に、無料で無限に使えるストレージが付与されるため、クラウド保存になる。ローカルにも保存したいときに「.fig」データを保存するのだが、これほどまで軽いとパソコンのSSD/HDD容量を全く気にする必要がなくなる。
多くの案件をこなすデザイナーにとっては、非常にありがたいことだ。

イラレのようなアウトラインviewモードがある

紙モノをデザインをする時に、Illustratorでよく使用する⌘+Y「アウトラインモード」。これはグラフィックデザイン出身の人にはお馴染みの機能だが、なんとFigmaにも搭載されている。
表面上に見えていない要素を可視化することができ、俯瞰してデザインを整理する時に便利なビューなのだが、Figmaではグループ化した要素が見やすくなり、Webデザイン制作においてとても効率的で、スピーディな作業が可能になる。

プラグインが豊富で自分流にカスタマイズできる。

PhotoshopもSketchもプラグインを入れることで自分流に使いやすくするカスタマイズ性があるが、Figmaにも上質なプラグインが多数揃っている。
そのため、お好みの機能を拡張することで、自分流のデザインワークフローを作り出すことが可能だ。
実際に業務おいて使用していく中で、これはいいぞ。といったオススメのプラグインが見つかったので、後日別の記事でまとめて紹介したいと思う。

いい機能や特徴がいっぱいだが、もちろんデメリットもある。

ここまで、Figmaの魅力をたくさん伝えてきたが、もちろん完璧なツールではない。デメリットもあれば、できないこともある。そしてリリースされてから日が浅いからか、バグも時々見受けられる。
ざっと使ってみて気づいた点を下記にまとめてみた。

  • 開けない拡張子が多い(eps, PSD, ai…)
  • 特定のGPU環境においてレイアウトグリッド機能がバグり、グリッチノイズが入る。(Figmaに報告済み)
  • 日本語入力は可能だが、たまに文字が消える時がある。縦組みができない。
  • 画像の切り抜きやレタッチ、合成はできない。
  • Illustratorで作成された、複数のマスクを使用しているイラストをコピペでFigmaに持ってくる際に、マスクが外れてしまう時がある。

作例をいくつか紹介

実際のところFigmaでどれくらいデザインが作れるのかというのを、作例とともに紹介したいと思う。そして、一部の作例はデザインデータへのリンクも公開したいと思う。実際にFigma上で閲覧してみて、ぜひFigmaの魅力に気づいてほしいというのが公開する目的だ。
※コピーして使用するなど悪用は厳禁。

グラデーションを多用した幻想的なデザイン

FigmaではPhotoshopと同様のグラデーション機能が使える。グラデーションをかけたシェイプを複数組み合わせ、乗算やオーバーレイを駆使することで幻想的な色味を再現することができる。また、タイポグラフィも細かく調整ができる。
1文字ずつの詰め、行間、リガチャー、パラグラフインデント、字形など項目はたくさんある。In Designほどではないが、それなりにこだわった文字組が実現できる。

ストリートファッション系のグラフィック

パッとみて気づいた方もいるかもしれないが、OFF-Whiteをイメージして作ってみたグラフィックを紹介。パスの使い勝手はほとんどIllustratorと変わらないので、シェイプを組み合わせて幾何学模様を作ることも簡単だった。

シンプルなモノトーンデザイン

デザインを無駄に装飾しない、シンプル目なものは、Figmaだと爆速にデザインができる。レスポンシブ対応も「オートレイアウト」という機能を駆使することであっというまにスマホ化できてしまう。

【総評】
フォトショとイラレとSketchのいいとこ取りをしたデザインツール。

こうやってFigmaを使って思ったのが、「他社のツールを使い倒して出てきた不満を元に、改良・改善してできたツールなのではないか」ということ。リリースされて日が浅いソフトなのだから実際そうなのだろうが、ペンツールの使い勝手だったり、ショートカットキー1つにしても、すべてがちょうどいい。
私はショートカットキーをほぼ独自カスタムする派なのだが、もちろんそれも可能である。(ショートカットキーのカスタマイズに関しては別記事で紹介予定。)
Adobeユーザーなら特に戸惑うことは少ないだろう。さっきも紹介したアウトラインモードや、何気に細かく調整できるタイポグラフィだったり、パーツのコンポーネント化だったりと、すべてがいいとこ取りされたかのような仕上がりだ。
まさにこれを待ち望んでいた。

もちろんPhotoshopと比べると、出来ないこともたくさんある。
Figmaが苦手としている分野は「フォトレタッチ」であることは間違いない。これに関しては、ほぼできない。と思っていた方がいい。
しかし厳密には、多少の調整(露光量/彩度/セピア…など)は可能で、プラグインを使用するとノイズをかけたりモザイク処理したりといったフィルター機能も使うことができる。ただし、写真を選択範囲で切り抜いたり、合成したりという高度な実写合成はできない。
それでもなお、ここまで完成度の高い、軽くて快適かつ高性能なデザインツールは久々に興奮したのでぜひみなさんも一度使ってみてほしい。

次回のFigma記事は、使い方だったりおすすめのプラグインや、ショートカットキーカスタマイズについて紹介予定だ。お楽しみに。

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA