Vuetify用のFigmaおよびAdobeXDUIキットをリリース!　Figmaとは？

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のsign up画面

メールアドレス確認の為のメールが送られてきますので、メールをチェックしてverifyボタンをクリックし、Figmaのサイトへ移動すれば、Figmaを利用することができます。

メールアドレスとパスワードを入力すると、「名前」と「仕事」について聞かれるので、5つの中から選択します。

Figma 利用目的を入力

入力が完了すると、メールアドレスの確認メールが送信されますので、送信されてきたメールを確認し、下記の「Verify email」ボタンをクリックします。

Figma メールアドレスの確認

「Verify email」ボタンをクリックすると、自動的にFigmaのサイトに移動します。

無事、Figmaにサインインすることができれば、以下のような画面が表示されます。

Figma サインイン画面

Figmaの使い方については、あまり悩む必要はありません。ブラウザ上部にあるアイコンが並んだメニューバーからデザインしたいアイコンを選択して、キャンパスの上でドラッグするだけです。

UIをつくる為に必要な「Frame」「Slide」、「Rectanle」「Line」「Arrow」「Ellipse」・・・などがメニュー上に並んでいます。

画面上に表示されたい要素を選択し、画面中央にあるキャンパスの上でドラッグすると、以下の画面のように四角いボックス、写真の配置、テキストなどを自由に配置することができます。

Figma 写真やテキストを配置

作成した画面をブラウザ上で確認することも、画面右上のメニューバーにある三角ボタン（Present）ボタンをクリックすることで確認することができます。

Figma Presentボタン

Figma ブラウザでUIをチェック

これだけ覚えておけば、あとはつくりたいウェブサイトの画面をイメージしながら、ドラッグしていくだけですので、誰でも、簡単に、UIデザイン・ファイヤーフレームをつくることができます。

あとは、デザインセンスを磨き上げるだけですね。(;^ω^)

今日も一日頑張りましょう！

Have a great day!