Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

オンラインデザインツール「Figma」を使ってみよう

スポンサーリンク

figma

オンライン上でWeb・UI/IXデザインができるデザインツール「Figma」を使ってみたので、基本の使い方と、基本操作を覚えた後の実践方法までまとめました。

 

 

Figmaとは?

オンラインベースのデザインツールで複数人で同時にデザインができることが特徴です。

オンラインベースなので、使っているパソコンのOSの違いや特定のソフト(PhotoshopやSketch)の有無などを気にせずに使用することができます。

 

また個人で使用する場合は無料で使えるので気軽に試せます。

チームとして複数人で使用したい場合は有料となり、目的別で料金が変わってきます。

figma price list

 

個人使用の無料版でもファイルはいくつでも作れるので嬉しいですね。

 

公式サイト

www.figma.com

 

Figmaでできること

figma top

 

Figmaがどんなデザインツールなのか、特徴について↓

  • オンラインベースである
  • 複数人で同時にデザイン作業ができる
  • コメントを残せる
  • アプリを入れるとデザインした作品をデバイスで確認できるようになる
  • Sketchのファイルをインポートできる
  • UI/UXデザインツールとして十分な機能を備えている

UI/UXデザインツールといえばAdobe XDやSketchという風潮ですが、Figmaでもかなりクオリティの高いデザインを製作することが可能ですよ。

 

Figmaを使ってみよう 

基本的な使い方は公式の説明もありましたが、「ちょっとデザイン」(https://chot.design/)というオンライン学習サイトでもFigmaの基本操作が学べ、無料なのにかなり充実したレッスン構成になっているので「ちょっとデザイン」を使う方がオススメです。

 

カリキュラム内容としては、

  1. Figmaの概要とインストール方法
  2. Figmaの基本操作
  3. ツールバーの操作
  4. プロパティパネルの操作
  5. プロトタイピング

の構成になっていて、ちょっとデザインのFigma入門をやれば基本の操作方法はカバーできちゃいます。

 

chot.design

 

Figmaの基本操作を覚えたら

基本の操作を覚えたら、作品をどんどん作ってデザイン力をあげていけばいいのですが、

 

「そういわれても、何すればいいか分からない」

「作りたい作品とか特にない。。。」

 

なんて方には、YouTube動画を見て動画と一緒に作品を作ってはいかがでしょうか?

 

わたしがオススメする動画を目的別にご紹介しますね↓(英語の動画です)

 

FigmaでWebサイトデザインとロゴを作ってみたい人

この動画では、約1時間でWebサイトデザインとオリジナルのロゴを作ることができます。

2ページ分のデザインを作り、プロトタイプも使うので実践的にFigmaを使うことができます。

Design A Website In Under 1 Hour With Figma - YouTube

 

FigmaでWebサイトデザインをして、実際のサイト製作までやりたい人

FigmaでWebサイトデザインをした後、HTML・CSSを使って実際のでWebサイト製作までできる盛りだくさんの動画です。

3本立てになっているので、1から順番に進めてみてください。

  1. Easy Web Design Tutorial With Figma - YouTube
  2. How to Design a Website Using HTML - YouTube
  3. CSS Project for Beginners: Modern Website Design Tutorial - YouTube

 

まとめ

デザインツール使ったことがないという方も、オンラインで無料で使うことができるFigmaでデザイナーへの第一歩を踏み出してみませんか?

 

デザインの勉強は「ちょっとデザイン」で無料で学べます。個人的にかなりオススメです。 

treatmyself.hatenablog.jp