おすすめのデザインツール「Figma」操作方法の習得過程を紹介!

デザインツールFigmaの習得家庭
  • URLをコピーしました!
マドヤン

明ましておめでとうございます!今年もよろしくお願いいたします🎍

あっという間に2022年になりましたねー。皆さまいかがお過ごしでしょうか?
私は、年末年始は心身の充電期間にあてまくりましたw 久々にPCを触らない日を作ったり大好きなネットフリックスを観まくったりと、とにかくのんびり過ごしました。

さて、今日はひさびさにデザインネタです(ようやくかよ)!

私が仕事で普段よく使用しているデザインツールは、FigmaやAdobe XD、Photoshop、Illustratorで、簡単な作り込みであればCanvaで対応することもあります。

この中でも最近よく好んで使用するのがFigmaです!
なぜかというと、操作方法さえ覚えれば簡単にいろんなことができる(=効率的)!と感じたから。

ただ、Figmaは英語のUIのみなので、最初はちょっと抵抗のある人もいるかもですが、こういったツールは習うより慣れろ、です。
画面が何を表しているのかわからなくても、とにかく色々触ってみる。これが早くなれる一番の方法だと思います。
私も最初は若干抵抗があったものの、わからないなりに触りまくってたら、いつのまにかXDよりFigmaの方が使えるように(正直なところXDの操作方法を忘れかけてる😇)。

あと、なんといってもFigma最大の特徴は無料で使えること!

プロジェクトチームで使うとか、もっと効率的な使い方をしたい、とかの場合は有料プランへの切り替えが必要ですが、個人で使用する分には無料で十分だと思います。私も今はまだ無料で使っています(デザインファイルが増えてきたら整理整頓するためにも有料に切り替えるかな)。

今日は、Figmaをまだ使ったない人向けに使い始めるにあたって私が実際に活用した参考動画やサイトなどをご紹介したいと思います。
ここで紹介したものを一通りやれば確実に習得できる&Figmaの虜になること間違いなし。

Figma使ってみたいけどちょっと抵抗あるな〜って方は、ぜひこの記事を参考にトライしてみてください!

\ こんな人に読んでもらいたい /
  • Figmaを知らないけど、デザインツールのことを知りたい人
  • Figmaに興味あるけど使ったことない人
  • Figma学習の方法をてっとり早く知りたい人
目次

Figmaの特徴と推しポイント

デザインツールFigma

Figmaは、ブラウザ上およびアプリでUIデザインを制作できるツールです。
特に共同作業で制作する際に向いていて、複数人でのデザイン作業もさくさくできます。

前述のとおり、Figma最大の特徴は無料で使えること
Figmaとよく比較されるデザインツールとしてAdobe XDが挙げられますが、XDはAdobeの契約をしないと使えないけど、Figmaは無料で使えます。なので、デザインをやり始めた方で、デザインツールを気軽に試してみたい方にはもってこいなツールです。

無料(フリープラン)といって全然使いものにならないんじゃないの?と思われる方もいるかもしれませんが、Figmaはフリープランでもかなり使えます!!
なので、複数人での共同作業がメインだったり、お仕事でデザインをごりごり作成しないといけなかったりする状況でない限りは、フリーのままで問題ないかなと思います。

プランの詳しい情報はFigma公式サイトを参考にしてください〜!

マドヤン

無料で使えるツールとしてはかな〜り優秀なんです👏❗️

Figmaの推しポイントを簡単にまとめるとこんな感じ👇

Figmaの推しポイント
  • ブラウザ上でも使用できるから、ネット環境があればどこでも編集できてリアルタイム更新が可能
  • フリープランは共同作業に必要な編集権限も無制限に付与できる
  • レタースペーシングや大文字・小文字などテキスト周りで細かい調整が可能(イラレまではいかないけど、XDよりできる印象です)
  • コミュニティが盛んでプラグインが豊富だから、拡張機能でできることが豊富(例えばテキストを斜体にしたり、イラレみたいにパス上に配置したり)!
  • ファイルが比較的軽くて作業がスムーズ(XDだとめっちゃ重くなること多いんだけど、Figmaだと画像てんこもりにしない限りは基本的にサクサク制作できる)
  • カラープロファイルをsRGB指定に変更できるから、色味の違いがそこまで気にならない!(XDは全然違いすぎてデザインしにくい…)

とはいえ、私も本格的に使い初めてまだ半年なので、他にももっとすごい技や効率的な使い方があると思いますが、とにかく無料でここまでできるのはすごいし、使わないのはもったいない

マドヤン

ここからは実際の私の学習過程をご紹介!
これからFigma習得したい人はぜひ参考にしてください〜

私のFigma習得過程

ステップ1. Udemyで基礎学習

UdemyのFigma講座

私の場合、周りにFgmaに詳しい人がいなかったので、何から学べばいいのかさっぱりで、Twitterやブログから情報を収集していました。

そんなときに発見したのがUdemy講座「初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能」

こちらの学習動画、十分すぎるほどに元がとれます。

Figmaの基礎から応用まで学べて内容がとても充実しています。ボリュームが多いので、全部を理解するには15時間くらい要すると思いますが、観る価値ありまくりなので、これからFigma学ぶ人はぜひもんでおすすめします!!

\ ここからチェックしてみてね! /

マドヤン

Udemyは頻繁にセールしているので、そのタイミングで購入しました!購入する際はぜひセール時期をチェックしてください✨

ステップ2. 知識の掘り下げ(1)「もち | WEB・UIデザイナー」さん

ステップ1でFigmaの基本操作はわかったので、次はFigmaでできることの知識を掘り下げていきました。

そこで参考にしたのが、もち | WEB・UIデザイナーさんの情報です!

こんな↓感じでFigmaの情報をたくさんシェアされているので、Figmaに関するツイートを片っ端からブックマークしていき、Figmaでできることをチェックしていきました👀❗️

もちさんのnoteにもFigmaネタがたくさんあるので、こちらも要チェックです。

ステップ3. 知識の掘り下げ(2)YouTubeチャンネル「NOT4H」

次に、参考にしたというか、Figmaへの興味の火付け役になったのが、YouTubeチャンネル:NOT4Hさんの「【対談】デザインの作り方をSHIFTBRAINのアートディレクター・鎌田さんに聞いてみた」でのお話です。

こちらの動画をみた人でFigmaに興味を持たない人はいないと思えるほど、強烈な印象を持ちました。

鎌田さんが実際に使われているFigmaの画面も食い入るように拝見しながら、そんな風な使い方ができるんだ!!と新たな発見がたくさんありました。

Figmaに興味ある人は絶対に見逃すべからず!!!!なので、ぜひチェックしてみてください。

ステップ4. 知識の掘り下げ(3)鎌田さんのブログ「Paraph(パラフ)」

次にご紹介するのが、先ほどのSHITBRAINの鎌田さんが運営されているブログ「Paraph(パラフ)」です。

こちらのブログ内でも、Figmaの基本操作からプラグインのことなど役立つ情報を共有されているので、Figmaに慣れてきた方はぜひぜひ新たな知見を習得するためにもチェックしてほしい。

ステップ5. 実践あるのみ!

ステップ4まで一通り学習&チェックした方なら、自主制作はもちろんお仕事でもFigmaを使える状態になっているはず。
なので、ここから先はどんどんFigmaを使って慣れていくのみです。こういったツールものはほんとに「習うより慣れろ」です。

Figmaは共同編集するうえでとても優れたツールなので、一人での制作が落ち着いたら、練習がてらに誰かと共同編集にトライしてみることもおすすめです。かなりスムーズに共同で作業できるので、ますますFigmaの虜になること間違いなしだと思います。

マドヤン

2021年12月時点の無料プランだと2人まで編集権限を付与できます(随時要チェック!)。

その他参考情報

他にもFigma学習初期に役立ちそうな情報はこちら👇
上のステップが完了した方は、ぜひこちらの記事もご覧になってみてください。

まだまだ参考になる情報はたくさんあるので、ぜひここで紹介した以外にもご自身に合うものを見つけてくださいね!

私もまだまだコンポーネントとか効率的に使いこなせてないものがあるので、引き続き習得に励みます💪

マドヤン

またFigmaネタいいの見つけたら紹介します〜✨

よかったらシェアしてね!
  • URLをコピーしました!
目次