こんにちは！
プロダクトデザイン部のYです。
今回は、私たちPD部が普段、業務で使用しているデザインツール
「Figma」の基本的な使い方をご紹介いたします。
目次
0. Figmaとは
Figmaとは、ブラウザ上で簡単にデザインが行えるツールです。
リアルタイムでの共同編集や、作成したデザインをHTMLに変換する事ができ、
チームでの作業にも向いています。
また、無料で利用ができるプリ―プランがあり、誰でも気軽に導入することができます。
www.figma.com
1. Figmaのアカウントを作成する
まずは、Figmaの公式サイトからアカウントの作成をします。
①「始める」か右上の「サインアップ」ボタンをクリック
②モーダルが表示されるので「メールアドレスとパスワード」または、「Googleアカウント」と連携し情報を入力。
③プランを選択し、プロジェクト一覧画面が表示されたら完了です。
2. 新規ファイルを作成する
Figmaにログインできたら、左上の「New Design File」ボタンをクリックすることで、
新規ファイルを作成できます。
3. フレームの選択
新規ファイルを作成したら、フレームを選びます。
左上バーから「#」 ＞ Frame を選択すると、スマホやデスクトップ・タブレット等さまざまなサイズのフレームが選べます。
4. デザインの作成
フレームを選んだら、ツールを使用してフレーム内にデザインを入れていきます。
長くなってしまうので、今回は簡単な画面構成のみご紹介しますが、
Figmaのヘルプページから各ツールの詳細が確認できます。
Figmaヘルプページ：Access design tools from the toolbar
Figmaヘルプページ：Figmaデザインの基本的なシェイプツール
5. デザインの共有
最後に、デザインデータの共有方法をご紹介します。
①ユーザーを招待する
右上の「Share」ボタンをクリック。
赤枠内に招待したいユーザーのメールアドレスを入力し、
「Send invite」をクリックすると、相手に招待メールが届きます。
また、メールアドレス横の三角ボタンから権限の設定が可能です。
②画像を書き出す
画像を書き出すことも可能です。
書き出したいオブジェクトまたはフレームを選択。
「Design」 ＞ Export ＞「＋」ボタンで をクリックすると、書き出し設定が表示されます。
画像の拡大率や、書き出し形式を設定して「Export」、保存先を指定して書き出し完了です。
Figmaヘルプページ：Figmaにおけるエクスポートのガイド
6. まとめ
今回は、デザインツール「Figma」を初心者向けにご紹介しました。
FigmaはWebやアプリの画面デザイン以外にも、ポスターや資料も作成できてしまうくらい
これ１つでほとんどのことが完結できる、とても便利なツールです。
紹介しきれてない機能がまだまだ沢山あるので、
気になった方はぜひインストールして触ってみてください！！
現在アドグローブではUIデザイナーを含め、さまざまなポジションで一緒に働く仲間を募集しています。
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
