デザインを作りたいカメ
学び続けるウサギ
デザインを作りたいカメ
デザイン案が思いついたから早速使ってみたいな〜♪
「無料でWebブラウザ上でデザインしたい」
「共同作業がしたい」
「共有機能・プロトタイプ機能を使いたい」
と思われる方にFigmaはオススメです。
早速Figma（フィグマ）についてみていきたいと思います。
目次
Web上で使用できるデザインツールのFigma（フィグマ）
画像出典: Figma
Figma（フィグマ）はWebブラウザ上でも使えるチーム向けに最適なデザインツールになります。
もちろん、個人でWebデザインを作成する時にも役立つツールになります。
メールアドレスやGoogleアカウントで作成することができますので無料で始めることができます。
デザインを作りたいカメ
Figmaの料金プラン
画像出典:Figma
無料プラン
スタータープラン（無料体験）があるので、個人利用や小規模サイト制作ならとりあえずスタータープランでOKですね。
有料プラン
有料プランだとプロフェッショナルプランとビジネスプランとがあります。
料金は月払いよりも年払いの方が安くなります。
有料プランでできること
有料プランだと、それぞれ下記（一部抜粋）のようなことができるようになります。
・ファイル・ページ・プロジェクト数が無制限
・開発モード
・動画の埋め込み
開発モードが何かと便利なので必要に応じて入っても良いですね。
デザインファイルとFigJamボード
主にデザインファイルとFigJam（フィグジャム）ボードとの２つを作成することができます。
デザインファイル・・デザインを作成する
FigJamボード・・・共同編集などができる
デザインを作りたい場合は、デザインファイルの方を作成します。
デザインファイルでデザインを作成
個人でデザインを作る方法
下書きを使ってデザインを作ります（下書き内にデザインファイルを作成）
画像出典:Figma
左側の下書きを選択してからデザインファイルをクリックして新しいデザインファイルが作成できます。
上部のツールバーを使い編集する
ツールバー（上）から使いたいツールをそれぞれ選択して、キャンバス（中央部分）でクリックし、レイヤーパネル（左）でレイヤーの順番を調整し、プロパティパネル（右）で調整しながら作成していきます。
それぞれツールバーの欄から使いたいツールをクリックします。
デザインを作りたいカメ
移動ツールとリージョンツール
移動ツールでは移動(V)させたり0.5x、2x、3xなど拡大 / 縮小(K)させたりすることができ、リージョンツールのフレーム(F)でアートボードやパーツを作ったりすることができます。
シェイプツール
シェイプツールでは図形を使用したり、画像を配置でき、テキストツールなどを使いデザイン・ページを作成することができます。
それぞれショートカットキーを覚えておくと便利ですね。
作成ツールとリソース
作成ツールではペンや鉛筆を使用することができ、リソースからコンポーネントや豊富なプラグインなどを使用することができます。
プロパティパネルからは、要素の入れ替えや可変枠を作れるオートレイアウトや、外枠が変わった時に中をどうするか制約できるコンストレインツなどを使用することができます。
実際に使ってみると操作感覚がAdobeのAdobe XDと同じ感じですね。
アドビなど色々あるかもしれませんが、どちらも使えると良いですね笑
ファイル名を変更したい場合
上部の無題をクリックしファイル名をいつでも変更できます。
コンポーネント
コンポーネントとインスタンス機能が使えると要素を再利用でき時短になるので便利ですね。
コンポーネント化するとメインコンポーネントになり複製するとインスタンスになります。
メインコンポーネントを変更するとインスタンスにも反映（インスタンスを変更してないもののみ）されるのが便利で
す。
さらにバリアント機能でグループ化するとパターンを増やすことができます。
画像の配置方法
・ツールバーのシェイプツールから画像/動画を配置（shift + command + K（mac））をクリックしてキャンバス上でクリック
楕円などに対しクリックするとそのまま画像を配置できるのが便利です。
・Figmaのキャンバス上にドラッグ＆ドロップで配置
プロトタイプ
デザインではなくプロトタイプを選択して遷移設定することができます。
プレゼンテーションをクリックすることで確認することができます。
デザイン案を見せたい
上部のツールバー右側辺りのアイコンのプロトタイプビューを選択して、新しいタブに表示（プレゼンテーションビュー）を選択し、右上のプロトタイプを共有をクリックし、リンクをコピーで誰にでもデザインを見せることができます。
複数人で作る場合
・チームから作成可能・・複数人のプロジェクト用のファイルを作ることができます。
無料プランは使用数に制限あり
・プロジェクト・・・・・・１つ
・デザインファイル ・・・３つ
・ページ・・・・・・・・・３つ
コメントツールを使ってコメントも残せるので便利ですね。
無料プランは制限があるのでチームで使用する場合は有料プランのが良いです。
STUDIOにデザインを反映させたい
Figmaで作ったデザインはリソースからプラグインのFigma to STUDIOを使いSTUDIOに反映させることができます。
【ノーコード】STUDIOでWebサイト制作を始めよう【カンタン】
まとめ：便利なデザインツールのFigmaを使おう！
今回はWebブラウザ上で使えるデザインツールのFigma（フィグマ）について見てきました。
Figmaはオンライン上で簡単に扱えるのが便利ですね。
チームでの共同作業に適してますが、個人でデザイン案などを作る時に無料版でもかなり使えます。
他にも、さまざまなデザインツールがありますが、Figmaを使いこなせるようになっておくと2024年現在、デザインを作ったり・共有機能を利用したりと何かと役立ちますので参考にしてみてください。
