Figmaについて

AWS Amplify StudioやReactなど、最近何かと使う機会が増えてきたFigmaですが、
そもそも「Figmaって何？」という人や「使ったことないよ」という人もいるかと思います。

そこでFigmaについて簡単に解説するとともに、初心者向けに使い方をご紹介いたします！

Figmaって何？

Figmaとは、UIデザインなどの作成に便利なデザインツールです。
デザインツールと聞くと、Adobe XDやSketchなどを思い浮かべる人も多いかと思いますが、Figmaもそれらに引けを取らない便利で簡単なツールです。

Figmaのメリット

Figmaの便利な点は、Webブラウザ上で利用できることです。
Webブラウザ上でデザインを編集できるので、アカウントさえ作成してしまえば場所を選ばずいつでも使うことができます。

また、1つのファイルを複数のメンバーで編集できるので、デザイン制作に関わる様々な人とデータを共有し、相談しながら作成できます。
何よりフリープランがあり無料で利用できるので、誰でも手軽に利用し始めることができます！

※もちろんアプリもあります。
Figmaアプリダウンロード

Figmaを使い始める

以下のオフィシャルホームページでログインアカウントを取得してから、試してみてください。
「Try Figma for Free」をクリックして試用アカウントを取得してください。
Googleアカウントを持っていると、利用開始がスムーズです。

Figmaオフィシャルホームページ

デザインを作る

Figmaを利用開始したら、まずは簡単なデザインを作成してみます。

フレームを作る

左上のフレームアイコンを選択して画面中央のキャンバスにフレームを作成しましょう。
iPhoneやAndroidなどの画面サイズでデザインを作成したい場合は、右側のメニューから選択すると自動で作成してくれるので、とても便利です！

図形を作る

先ほど作成したフレームの中に図形オブジェクトを作成してみましょう。
左上の図形アイコンを選択して好きな図形を作成してください。
三角形や円、直線や矢印など、さまざまな図形を設置できます。

テキストを入力する

左上の「T」アイコンを選択してキャンバスの好きな所にテキストオブジェクトを作成しましょう。

オブジェクトを複製する

複製したいオブジェクトを右クリックするとメニューが表示されるのでコピーを選択し、同じく右クリックメニューからペーストを選択すると複製されます。
ショートカットキーでコピー&ペーストすることも可能ですし、Command⌘（WindowsはAlt）を押しながらオブジェクトを選択するだけで複製することもできます。

オブジェクトのグループ化

複数のオブジェクトを選択し、右クリックメニューからグループ化を選択すると一つのオブジェクトにグループ化できます。
Command⌘ + G（WindowsはAlt + G）のショートカットキーでもグループ化できます。
グループ化を解除したい場合は、右クリックメニューのグループ化解除かShift + Command⌘ + G（WindowsはShift + Alt + G）で解除できます。

データをエクスポート

作成したデザインは画像やPDFにしてエクスポートできます。
エクスポートしたいオブジェクトを選択して右側メニューの一番下「EXPORT」からエクスポート可能です。

まとめ

Figmaについて簡単な説明と操作方法をご紹介しました。
とても便利なツールなので、まだまだ紹介したい機能がたくさんあります。
今後もFigmaの機能紹介や新機能が発表されたらそれについても触れていきたいと思います。