Figmaなら10秒でこんな画像を作れるぞ。速いは正義だ
2024年現在のWebデザイン界隈では、Figmaという新顔のデザインツールを使えないと昭和のオジサン扱いされるという空気をひしひしと感じていた。
11月の冷たい夜風を浴びながら思うに、実をいうと、俺はFigmaのことが吐き気がするほど嫌いだったのだ。
単に食わず嫌いだったのだけど「なぜAdobeがXDを見放したからと言ってFigmaを覚えなければならないのか?」という気持ちもあるし、どいつもこいつも、肩で風を切りながらFigma、Figma言うのが気持ち悪かったというのもある。この世に多様性は認められないのか、という想いもある。
とは言っても、この先いつ消滅するかわからないXDを使い続けたり、田舎の頑固ジジイみたいにPhotoshopでデザインカンプを作り続けるのは限界があると思うし、Figmaを導入している案件に参画したことをきっかけにFigmaでWebデザインをやってみたのである。
FigmaはXDやPhotoshop経験があれば1か月で覚えられる
基本はXDの競合ツールだから、XDなど競合ツールの経験があれば、割とすんなり初心者や中級者が使う機能程度は覚えられると思う。
とりあえず解説動画を見るのもいいし、習うより慣れろで触っていれば覚えられる。
レイヤーとかの概念は独自のものが多くてPhotoshopとはだいぶ操作感覚は違うけれど、デザインを作るという意味ではPhotoshopでカンプを作るときと似たようなものだし、ベクター周りの機能はIllustratorを簡略化したような感じ。
それほど身構えるほどのものではなかった。
Figmaの特徴はクラウドで動作するオンラインツール
Figmaの特徴はGoogleのスプレッドシートだとか、オンライン版のエクセルみたいにリアルタイムに共同作業ができるということ。
つまり、同じデザインファイルを複数人で開いて同時に作業ができる。
チャットとかコメントでやりとりもできるし、一人で作業してダメ出し担当にビクつきながらPhotoshopでデザインしていた昔と比べると、ずいぶん時代が変わったと思う。
一人でジメジメとデザインしても煮詰まったらどうしようもないことが多いが、決裁者なり先輩や上司なりに、オンライン上でリアルタイムで意見を聞きながら作業できる。
デザイナーなら誰しも経験する辛い状態を早期に抜け出せると思うので、最初は気持ち悪いけど、リアルタイム機能はいいんじゃないかしらん。
結局、どれだけセンスのいいデザインを作ろうと、決裁者のセンスが悪ければ同じセンスに合わせないとならないわけで、そのことに気づくのはプロのデザイナーとして生きていくためには大事である。
WebデザイナーがFigmaを使うメリット
FigmaはWebデザイナー専用ツールってわけではなくて、UIUXの領域とか、アプリデザイナーとか、非デザイナーの人も使うと思うけれど、いったんWebデザイナー目線のメリットを書いてみよう。
二度とPhotoshopでWebデザインしたくなくなる快適性
俺は相当昔においてはIllustratorでWebサイトのデザインカンプを作るという、今では気が狂っているとしか思えないこともやったし、少し前まではPhotoshopでデザイン作業をしていた。
でも、Figmaのサクサク感を思い知ったら、二度とPhotoshopでデザインする気が起こらなくなると思う。
Photoshopは動作自体が重いし、罫線を作ったり、パーツを作ったりするなど、デザインに使うようなツールがいちいち面倒くさい。デザインツールとしてはクソすぎる!
やがてXDが出てくるとサクサクとデザインカンプが作れることを思い知ったわけだけど、PhotoshopはWebデザインに使うには重装備すぎるのであった。
Figmaは依頼者や決裁者に確認を取るのが楽チン
Photoshopでデザインカンプを作った場合、依頼者のPCにはPhotoshopが入っていないことが多いので、確認を取る時には都度、画像で書き出さないとならない。必要なレイヤーだけを表示させたりとか、面倒な操作もあることだろう。
ところがFigmaの場合はデータがクラウド上にあるので「共有ボタン」からリンクURLを取得して、チョロっとメールやチャットで貼り付けるだけでよい。
セキュリティ的に閲覧者を限定する設定をする必要はあると思うけれど、「確認お願いします」と言った後に微妙な修正の必要性に気づいたとしても、ちょろっとこっそり直せば済む。ファイルやリンクを作り直す必要はない。
文言修正とか微妙な修正があったとしたら、その場でちょろっと直せばいいから、確認作業の手間が削減されるのがデザイナー的には嬉しいポイント。
持論だけど、出来るデザイナーは出来るプログラマと同じくして怠惰であるべきだと思う。より理想的なデザイナー像に近づけるのだ。
コーダーが別にいる場合は画像書き出ししないで済む
Photoshopでカンプを作ると、いちいち画像のパーツとかを書き出して渡さないとならないと思うけれど、それなりに小回りの利くコーダーなら、Figmaのリンクだけ渡してやれば勝手に画像パーツのエクスポートもやってくれる。
そんなに難しくないので一回だけ手順を教えてあげれば、レイヤーの構造とかをミスってない限り、後は寝転がっているだけでサイトが出来上がる・・・はず。
もちろん、自分でコーディングする場合は自分で書き出さないといけないけれどね。
Figmaは無料でもかなり使える
企業で使う場合は有料プランに入るのが一般的だと思うけれど、記事執筆時としては無料プランでもそこまで大きな制限はない。
ページ枚数とか共有作業に制限があるくらいで、1枚ものとかのLPやバナーをデザインして共有するくらいなら問題なく出来る。
Photoshopだと体験版を除けば現在では有料でアドビ奴隷にならないと使えないから、無料でも業務レベルで使えるのは偉い。
さすがXDをメッタメタにしただけのことはある。
Figmaにはデメリットもある
よいことばかりのように思えるFigmaにもクソだと思う部分もある。
クラウド専用ツールなのでネット環境がないと使えない
ローカルに保存もできるが、データは基本的にクラウド上で管理するし、デスクトップアプリをインストールしていたとしてもログイン操作しないとマジで使用できない。
移動中の電車とか、飛行機や新幹線で作業しようと思ってもネット環境がないと使えないってどうなのよ、って思う。
デザインのファイルだからそこそこ重たい場合も多いだろうし、自宅やオフィスでもネット環境が調子悪いと一切作業できないってことだから、ちょっと怖いね。
Photoshopとの連携が悪い
Illustratorからはベクターデータをコピペできるけれど、写真とか画像をPhotoshopで開いたり、PSDファイルを貼り付けたりはできない。クラウドで管理しているからファイルが重くなるし仕方ないか。
Figmaだけで完結させる場合はいいけれど、写真とかをPhotoshopで細かく加工しながら様子見るって場合はちょっと面倒。
デザイン専用ツールなのでコーディングは別途必要
XDにも似たような機能はあったけれど、プロトタイプ機能を使いこなせば、ヘッダーを固定したり、実際のWebサイトの動きに近いものを再現することはできる。
だが、そのままWebページとして書き出すことはできない。
Figmaをどれだけ作りこんでもHTMLとして書き出すことはできないので、Webページにするにはコーディングが別途必要なのである。
ノーコード、ローコードのツールが世間ではそれなりに幅を利かせているけれど、いっそ、そのままWebページに出来たら嬉しいのにな、って思う。
いずれノーコードのデザインツールに座を奪われる気がする
予言だけど、Figmaがノーコードツールに進化するか、デザインするだけでノーコードでWebページが登場したら新ツールに座を奪われる気がする。
あっさりXD派をメッタメタにしたけれど、すでにXDの競合ツールの新顔が出てきているようだし、デファクトスタンダードがあっさり切り替わる業界なだけに、昭和のオジサンから令和のオジサンになっただけで、未だ将来の不安は拭い切れていない。
Figma初心者が必ず躓くポイントを解説
なんつっても俺自身が最近までFigma初心者だったから、初心者が絶対躓くであろうポイントはわかっているぜ。
フレーム、グループ、セクションの使い分けはフレームだけで十分
Figmaでややこしいのはレイヤー的なものの種類が妙に多いということ。
フレームやらグループやらセクションやら、似たようなものが3種類くらいある。初心者泣かせだ。
個人的には、それぞれに役割や使い分けがあるのだけれど、使い分けの必要性を感じるまではフレームだけ使っていれば十分だと思う。
グループ派の人もいればフレーム派の人もいるけれど、フレームが万能調味料的で、Figma的な機能も使えるし、初心者でも使い勝手がいいような気がする。
思ったように動かせない時は制約やインスタンスのせい
先輩とかが作ったFigmaのデータをいじる時にぶち当たるのが、何かを動かそうと思ってもなぜか動かせないパターン。
「どこかを差し替えて」って言われても動かせなくて困っている人は、制約かオートレイアウト、またはインスタンスという日本語にすると「関連付け複製コピー」みたいな機能が使われているせい。
どっちも使いこなせば便利だけど、Photoshopにはない概念だから、いきなり理解するのは難しいし、中級者以上向けの機能なので初心者がすぐに使わないとならないものではない。
1枚もののLPとか、数ページ程度の案件では、オートレイアウトやインスタンスをバリバリに使う意味はないに等しいので、右クリックして解除してやるとよい。面倒臭いけどね。最初はかなり苦戦した。
先輩が作ったデータだったらブチ切れられるかもしれんから、確認した方が安全だけど(笑)。
応急処置的にはWindowsの場合はCTRLキーを押しながら操作すると解決できる場合も多くて、FigmaではCTRLキーは頻繁に使うということを覚えておくとよい。
CTRLキーはFigmaの救世主だ。
