John Leider氏が、「Vuetify用のFigmaおよびAdobeXDUIキットを今夜遅くにリリースします」とツイートしていました。
Releasing a Figma and Adobe XD UI Kit for Vuetify later today. pic.twitter.com/jQt3P9hJui
— John Leider (@zeroskillz) April 16, 2021
FigmaとAocbe XD UIキットともに、ウェブシステムのフロントエンドを開発する上で欠かすことができない「UIデザイン」をする為のデザインツールです。
PhotoshopやIllastratorを使い続けていているWebデザイナーさんなどは、既にAocbe XDを利用している人も多いのかもしれません。
ということで、今日は、余り聞いたことがないかもしれない「Figma」について簡単にご紹介します。
目次
Figmaとは
Figmaは、上述しましたが、「UIデザイン」をする為のデザインツールです。Figmaをはじめるためには、サインアップボタンからアカウントを登録することからはじめます。
まずはアカウントを登録する為のサインアップ画面です。Googleアカウントを利用することもできますので、簡単に済ませたい方はGoogleアカウントでサインアップするのが便利でしょう。どんどん進んでいきます。
Figma Sigh up
メールアドレス確認の為のメールが送られてきますので、メールをチェックしてverifyボタンをクリックし、Figmaのサイトへ移動すれば、Figmaを利用することができます。
メールアドレスとパスワードを入力すると、「名前」と「仕事」について聞かれるので、5つの中から選択します。
入力が完了すると、メールアドレスの確認メールが送信されますので、送信されてきたメールを確認し、下記の「Verify email」ボタンをクリックします。
「Verify email」ボタンをクリックすると、自動的にFigmaのサイトに移動します。
Welcome to Figma
無事、Figmaにサインインすることができれば、以下のような画面が表示されます。
Figmaの使い方
Figmaの使い方については、あまり悩む必要はありません。ブラウザ上部にあるアイコンが並んだメニューバーからデザインしたいアイコンを選択して、キャンパスの上でドラッグするだけです。
Figmaのメニューバー
UIをつくる為に必要な「Frame」「Slide」、「Rectanle」「Line」「Arrow」「Ellipse」・・・などがメニュー上に並んでいます。
ドラッグで配置
画面上に表示されたい要素を選択し、画面中央にあるキャンパスの上でドラッグすると、以下の画面のように四角いボックス、写真の配置、テキストなどを自由に配置することができます。
ブラウザチェックも簡単
作成した画面をブラウザ上で確認することも、画面右上のメニューバーにある三角ボタン（Present）ボタンをクリックすることで確認することができます。
これだけ覚えておけば、あとはつくりたいウェブサイトの画面をイメージしながら、ドラッグしていくだけですので、誰でも、簡単に、UIデザイン・ファイヤーフレームをつくることができます。
あとは、デザインセンスを磨き上げるだけですね。(;^ω^)
今日も一日頑張りましょう！
Have a great day!