オンライン上でWeb・UI/IXデザインができるデザインツール「Figma」を使ってみたので、基本の使い方と、基本操作を覚えた後の実践方法までまとめました。
Figmaとは？
オンラインベースのデザインツールで複数人で同時にデザインができることが特徴です。
オンラインベースなので、使っているパソコンのOSの違いや特定のソフト（PhotoshopやSketch）の有無などを気にせずに使用することができます。
また個人で使用する場合は無料で使えるので気軽に試せます。
チームとして複数人で使用したい場合は有料となり、目的別で料金が変わってきます。
個人使用の無料版でもファイルはいくつでも作れるので嬉しいですね。
公式サイト
Figmaでできること
Figmaがどんなデザインツールなのか、特徴について↓
- オンラインベースである
- 複数人で同時にデザイン作業ができる
- コメントを残せる
- アプリを入れるとデザインした作品をデバイスで確認できるようになる
- Sketchのファイルをインポートできる
- UI/UXデザインツールとして十分な機能を備えている
UI/UXデザインツールといえばAdobe XDやSketchという風潮ですが、Figmaでもかなりクオリティの高いデザインを製作することが可能ですよ。
Figmaを使ってみよう
基本的な使い方は公式の説明もありましたが、「ちょっとデザイン」（https://chot.design/）というオンライン学習サイトでもFigmaの基本操作が学べ、無料なのにかなり充実したレッスン構成になっているので「ちょっとデザイン」を使う方がオススメです。
カリキュラム内容としては、
の構成になっていて、ちょっとデザインのFigma入門をやれば基本の操作方法はカバーできちゃいます。
Figmaの基本操作を覚えたら
基本の操作を覚えたら、作品をどんどん作ってデザイン力をあげていけばいいのですが、
「そういわれても、何すればいいか分からない」
「作りたい作品とか特にない。。。」
なんて方には、YouTube動画を見て動画と一緒に作品を作ってはいかがでしょうか？
わたしがオススメする動画を目的別にご紹介しますね↓（英語の動画です）
FigmaでWebサイトデザインとロゴを作ってみたい人
この動画では、約１時間でWebサイトデザインとオリジナルのロゴを作ることができます。
2ページ分のデザインを作り、プロトタイプも使うので実践的にFigmaを使うことができます。
Design A Website In Under 1 Hour With Figma - YouTube
FigmaでWebサイトデザインをして、実際のサイト製作までやりたい人
FigmaでWebサイトデザインをした後、HTML・CSSを使って実際のでWebサイト製作までできる盛りだくさんの動画です。
3本立てになっているので、1から順番に進めてみてください。
- Easy Web Design Tutorial With Figma - YouTube
- How to Design a Website Using HTML - YouTube
- CSS Project for Beginners: Modern Website Design Tutorial - YouTube
まとめ
デザインツール使ったことがないという方も、オンラインで無料で使うことができるFigmaでデザイナーへの第一歩を踏み出してみませんか？
デザインの勉強は「ちょっとデザイン」で無料で学べます。個人的にかなりオススメです。