【誰しもがデザインを理解すべき時代】0からデザインツールFigmaを「無課金」で学ぶ方法まとめ
皆さん、おはようございます、こんにちは、こんばんは！Lraough LLC Founder, CEOのShimotaku(しもたく)です。
今回は、デザイナーで今や使えないと話にならなくなってきているFigmaについて、非デザイナーでも「無課金で！（重要）」学ぶ方法について伝授します。
Lraoughでは西海岸の求人を毎週配信していますが、デジタルのデザイナー案件で「Figma」のスキルセットを見ない日は有りません。加えて、フロントエンドエンジニアの求人でも「Figmaに対する理解」というものが入ってきている位です。リモートワーク中心となってきている世の中で、デザインのコラボツールとして知られるFigma。それをある程度のレベルまで一気に無課金で学んでやろう！というお得なブログになりますので、是非少しでも「ありがとう！」と思って頂けた方はスキ＆シェアお願いします！それでは行ってみましょう。
Figmaとは何か？
Figmaとは、めちゃくちゃ簡単に説明すると「ウェブブラウザ上でデザインができるツール」になります。リモートだろうが会社だろうが、場所を選ばずにブラウザさえ起動すればクラウド上で使えるため、チームでのコラボーレーション作業に最適です。
そして重要なポイント行きます。
↓
無料です
↓
かつ、テンプレ豊富。デザイナーじゃなくても「デザインを学ぶ」には「デザインする」にはこれ以上もってこいなツールがないわけです。加えて誰しもがデザインを学ぶ時代だと思うので、しっかりキャッチアップしていきましょう。
Figma本体が出しているオリジナルの勉強ツール
当然ですが、FigmaもサービスOnboardingの為に自社で沢山のツールを用意しています。この辺りを見ていくだけで、「Figmaってなにそれ美味しいの？」と言っている人とは一線を画すことが可能です。
まずはこちらのFigma Youtubeチャンネル。それこそ様々なデザインの方法について学ぶことが出来ます。初心者用ガイドは「New to Figma」のリストから再生して学ぶことが可能です。デザインの基礎だけでなく、Figmaをどういう風に使うかについてザラッと網羅することが可能です。
注目ポイントとしては、新機能となるFigJamは絶対に見たほうが良いと思います。ホワイトボードを使って、コラボデザインする方法が書かれていてこの辺りどんどん改善されていきそうな気がします。
- Figma Templates
こちらはFigma自体が提供するテンプレート達です。前述した通りFigmaの凄いところはその拡張性にあります。創ったコンポーネントを無限に増やせるだけでなく「プロが作ったテンプレを丸パクリ出来てしまう」というのがこのクラウド時代のスタンダードです。新しく思いついたアイデアを、サクッとデザインに乗せてMVPしてしまう。こういう時代なんです。
上記のTry Figma for Free機能を使って、FlowchartやWireframeなど様々なコンポーネントのテンプレを盛大にパクる事が可能です。デザイン詳しくない人でも、普段からダサい僕のような人でも、圧倒的にキレイなデザインがポンと出来てしまう。それがFigmaの凄さです。
- Learn Design with Figma
こちらはFigma自体が平文で丁寧に使い方を解説しているページ。初心者が座学で勉強するにはもってこいです。
- Getting Started
- What is graphic design?
- Design thinking & ethics
- Accessibility and inclusion
- Design Research
etc...
おそらく有料の物を使っても同じような内容になるんじゃないかと思うくらい豊富でシンプルにまとめてくれています。時間をかけずに、基礎を学ぶ。そういうのを皆さん求めていたのではないでしょうか。
ちなみにFigma Templateを使って、実際にDesign Exerciseをするコースもあるので（勿論無料）これらを受けてみるだけでもFigmaの使い方に慣れていくとは思います。全部受けたら2時間くらいかな。CV（Resume）を創るコースもあったので、この機会に僕も作ってみようかなと思います。
100万回以上見られているFigmaについて語っているYoutubeまとめ
こちらの動画はデザイン系でメジャーなYoutuberさんが創ってくれているとても丁寧でキレイなFigma解説動画です。まとめるとこんな感じです。
主に、UIデザインのやり方をFigmaを使って説明してくれます。
Figmaの特徴としては以下。
1.無料
2.コラボ可能
3.早い
4.どんなコンピューターでも動く
5.スマホでデザインの確認が出来る
彼から言わせると初心者は最初「真似る」に限る。
FigmaResources.com(今はTemplatesFreebiesに）を使うと
→Free Templateがいくらでもウェブにある
→Copy to Figmaを押せば、自動でそのPJTが自分のサイトに落とされる
→大体がView Onlyになっているので、この場合Duplicateして自分のPJTにする。と良い。
Eye Dropperを使うと、色が簡単にコピーできて便利。
Free Figma iconと検索すれば、Figma用iconが沢山落ちているのでそれを使う。Figma to Codeが大切→一発でHTML変換が可能＝Front Endの手間が省ける、などなど。
【結論】
・テンプレを使うことでチート出来る
・Freeテンプレを元に、自分のデザインを作成することで簡単にイメージを作成出来る
・世の中のどんなアプリからもデザインをパクる事ができるので、普段から使い倒して良いなと思ったらそれをFigmaでデザインすることが出来る
言わずと知れたあのG社も出してるよ
GoogleはCouseraとコラボして以下のプログラムを出しています。これをやるとCertificateが貰えることから初心者には人気で、激しくリタゲされ続けている広告の一つですが、Basicなことを学ぶには良いかと。
Couseraは勿論優良なので「無課金と違うのでは？！」と思ったアナタは、1週間で全部学びきってやりましょう。そうすれば、Free Trialの間だけで無料で学びきれます。やりましょう、やってやりましょう。有給とってどこかでチャレンジしてみるのも良いと思います！
これだけやってみての感想
冒頭お伝えしたとおりデザイナーやフロントエンド界隈ではFigmaの市民権がとんでもないことになっているので、もはやプロダクトやサービスを創る人で「Figma知らない」ということは大いにリスクになってきています。
上記の諸々無料ツールを使いながら、「Figma使ったこと？あるに決まってるじゃん」とマウント取るだけじゃなくて、しっかりResumeにもかけるようにしておきましょう。というか、FigmaでResume創ってみましょう。
そしてこれだけ色々なツールや学習ツールを見てみて思ったのは…
やっぱりデザイナーはとんでもなく凄い
ということです。まぁ当たり前ですが「Figmaが使える」はタダの手段なのでデザイン自体が上手くなるわけではないですが、これを毎日毎日何時間もやり続けているデザイナーが創り出すデザインっていうのは素人のそれとは全く違ったものになります。
加えて、「デザイン」だけを極めるだけではよっぽど才能や努力がないと厳しい世界になってきていると思います。そうです、これはコラボーレーションツールなのでコミュニケーションやビジネルモデルへの理解、それが出来てしまうデザイナーはそりゃ高給だしニーズも高いわけです。デザイナーあがりのCEOが増えてきていたりする背景も理解できます。ビジネスに詳しい人がデザインを学びに大学院に行ったり、デザイナーがコンピューターサイエンスやMBAを取りに行くのも普通に起きてるのがここアメリカです。
それでもFigma知らない or Figma知っているの間には大きい壁があるので、プロダクトやサービスに携わる可能性のある人。いや、普通にビジネスマンをしている人も積極的にFigma触っていきましょう。
以上、Figmaを無課金で学び倒す方法まとめでした！グローバルスタンダートなFigmaをマスターして、海外目指していきましょう！
お知らせ
Lraoughでは海外・グローバルに挑戦したいエンジニア・デザイナー・アントレプレナーなどのTech人材のキャリアサポートを、西海岸のLAから行っています。以下からお気軽にご相談ください！
以上、Lraoughのしもたくでした！また来週お逢いしましょう！しーゆーすーん！
Thank you for your support! I will work and play harder!!