Figmaの使い方（基本）

Figmaとは

クラウド上で使用できるようにした、illustrator+Photoshopの劣化版といった形でしょうか。

illustratorとPhotoshopの基本機能は備わっているようなイメージでいいと思います。

クラウドで使用するので、他人と情報共有がしやすく使いやすいツールになります。

使用方法

１．アカウントの作成

まずは、Figmaのアカウントを作成しましょう。基本的には、Googleで続行を選んでもらえればよいと思います。

それが嫌な人は、メールアドレスとパスワードを入力しましょう。

ログインしたらウェブ上でもソフトをダウンロードしてディスクトップ上でもどちらでもよいので、使用していきましょう。

まず右上にあるDesignと書いてあるタグをクリックしましょう。

そしたら無題というファイルができるので、それをダブルクリックしてみましょう。

２．画面の構成

赤枠で囲った部分がデザイン画面になります。

基本はこの画面内でイラストを作成したり、写真を加工したりします。

また次に紹介するツールバーにあるフレームを使用することにより、スマホやタブレットの画面サイズ感で作業をすることができます。

次に紹介するのはツールバーというものになります。

作業をするのにあたり、使用していくことになるのですが、図形を描いたり、書いた図形を移動させたりなど様々なツールがあります。軽く紹介していきます。

３．デザイン作成

デザインの作成ということで、ここからは何を作成したのかによって操作手順が異なります。

アイフォンの画面を作成したいのであれば、フレームツールからアイフォンを選んでフレームを作成することができます。

そこにデザインを加えることによって、画面を作成していくことができます。

また写真やスクリーンショットを加工したい場合は、左上のメインメニューからファイル、画像を配置で画像を挿入しましょう。

これで画像の挿入ができたはずです。

今回はフレーム（iPhoneSE）を使用して軽くデザインを作成してみます。

ツールバーからフレームツール→iPhoneSEをクリック

画面にフレームを挿入しましょう。

またマウスのホイール部分をクリックしながら動かすことで、手のひらツールの機能

Ctrlをおしながらホイールを動かすことで拡大・縮小ツールの機能が使えるので、画面中央操作のしやすい状態にしておきましょう。

基本的にはここからは、自分の感覚で画像などを配置していくことになるのですが、今回は少しだけ操作方法を載せておきます。

上記で説明したようにメインメニューから画像の挿入。

またツールバーのテキストツールで文字を入力していきます。

また画像や文字を選択している際の右側の画面に細かい設定を変える部分があります。

ここでは画像の位置、サイズ、透明度など様々な設定を変更することができます。

この機能でレイアウトを整えていきましょう。

実際に完成したらCtrl＋Gで画像をすべてグループ化しておきましょう。

また右上のプロトタイプのタブをクリックし、三角マークをクリックすることで実際にどのように画面が見えるのか確認できます。

４．デザインの共有

画面右上にある共有ボタンをクリックして、メールアドレスを入力することで、自分の作成したデザインに招待することができます。

また編集権限を付与することによって、対象のユーザーが編集することができるようになります。

５．コメントを残す

ツールバーにあるコメントツールを使って、作成したデザインにコメントを残すことができます。

この機能で、自分のアイデアを残したり、やってほしい指示を記載したりできます。

６．デザインの出力

最後に作成したデザインの出力（エクスポート）のやり方を記載します。

右下のエクスポートをクリックして、ファイルの保存先を選びます。

以上で簡単なFigmaの使い方の説明になります。

基本的な使い方を知っていれば、あとは自分で少しずつやれることが増えていくと思うので、定期的に操作していきましょう。

またFigmaに関しては、また記事を書こうと思うのでもしよかったら参考にしてもらえればと思います。