プログラマでも「Figma」ならレイアウトやロゴが簡単にデザインできる

（この記事は「Figma Advent Calendar 2018」の8日目です）

[fukuoka.ex](https://fukuokaex.connpass.com/)代表のpiacereです
ご覧いただいて、ありがとうございます:bow:

今回は、プログラマの私が、畑違いのデザインに手を出す最初となるツール「Figma」を使っていく体験記をコラムにしてみました

# Figmaを知ったきっかけは「周りのデザイナーとの会話」

私は、仕事の成行上、UI／UXを作ることもちょくちょくありますが、どっちかと言うと、プログラミング（サーバ、フロント）が専門領域なので、デザインの専門的な教育を受けたことも無いし、本格的にデザインツールを使ったこともありません

ですが、ここ1年ほど、フリーランスでデザイナーをしている友人が増えたり、スタッフにデザイナーが増えたこともあり、デザインに関する会話をする機会がよくあります

私自身も元々、デザインに強い興味がある（中学時代は美術部で、）ことから、本職のデザイナーから、デザインのメソッドやツールを教えてもらったりしています

デザインツールとしてXDを使う方が多い中、macOSで無く、ブラウザで動くことから、Windowsでも使え、リモートの複数人でコラボレーションできる「Figma」を試してみたいと思うようになりました

プログラマ単独でもFigmaでデザインを作れ、時にはデザイナーとのコラボレーションができるようになれば、作れるプロダクトの幅も、グッと拡がると期待できます

# Figmaで新規PJを作る

以下Figmaサイトから、Sign Upします

https://www.figma.com/
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/5e645153-23d6-ff4d-3664-91e26e397203.png)](https://www.figma.com/)
Sign Inすると、以下のような画面が表示されます（やたらポップアップが出ます）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4f79e8be-750c-e9cd-c636-4af9ef39f0a5.png)
画面上部左の「＋」から、新規PJを作ります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/a9e28d74-6ca0-8f8f-34fa-8581bd19b525.png)
ここでも、やたらポップアップで機能の説明が繰り返されます（最初だけのようですが）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/ad931f6d-ac29-1210-17a5-48886a884c7d.png)
ひとまず、PJは作れました

# スマホの画面をデザインする

なんとなく、[データサイエンスプラットフォーム「Esuna」のプロパティウインドウ](https://qiita.com/piacere_ex/items/fa11210c3c8bc9847277)みたいなデザインのフォームを作ってみたいと思います（タグに「Elixir」や「Phoenix」があるのは、ここ繋がりです）

このプロパティのようなスマホ画面を作ってみます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/ae3f3ae1-934f-ffc5-1393-60f22808d5fb.png)
まず、土台となる「フレーム」を作るために、画面上部左の「＃」をクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8af43766-c5eb-f2d8-10bf-ca4b7b61209a.png)
この状態で、キャンバス部分をクリックすると、フレームが作られます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/e205c8c3-dadb-e621-017b-2d0ec1b9be26.png)
フレームが選択されている状態から、右の「DESIGN」の中にある「Frame」が選択されているプルダウンの中から、スマホレイアウトを選びます

ここでは、「iPhone 8」を選んでみます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/7a1701bf-7366-c74a-cbc9-3cc39a6ef08a.png)

# パーツを置いて、画面をデザインしていく

画面上部左の「□」で、キャプションのバックグラウンドやチェックボックス、プルダウン、テキストフィールドを作っていき、画面上部左の「T」で、文字列を入れていきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f9e4f495-9a66-ad2d-c0fa-a7d87846dab3.png)
組み合わせていった結果、なんとなく、いい感じになりました

フレーム選択時の画面右上にある「GRID LAYOUT」を使うと、パーツが綺麗に揃い、レイアウトがやりやすいです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/c58a6121-9458-302b-c9d8-01440d341415.png)

# ロゴを作ってみる

ロゴも作ってみます

まず、ベースとなる円を置き、画面右中央の「FILL」で色を変更します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/0dd22c9f-0783-f01e-d70e-d566556fdabf.png)
画面上部中央の「□」の四隅に「○」が付いたアイコンをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/9a03ad9b-b1b7-355b-b87d-7b1e4f4a095a.png)
その後、画面上部左の部分円弧の先端に「○」が付いたアイコンをクリックし、置いた丸図形の端の「○」を引っ張ると、丸い形から、グニャグニャと変形できます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/cc6c3e8f-06cc-946a-6f90-5ec61e811aa1.png)
これをうまく調整していき、色々と図形を重ねていくと、ロゴが作れました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/284b229e-7105-9aa1-0a3e-95e6dffa66b3.png)

# 日本語フォントについて

デフォルトのフォント「Roboto」を始めとする多くのフォントは、Figmaでは、日本語が使えません（データとしては、ちゃんと入力されていることが、左のペインからは分かります）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/b6c0e35a-78db-5d2c-0e05-b17056a4828f.png)
これを、日本語が使えるフォントの1つ、「Noto Sans JP」等に切り替えることで、無事、表示されます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/2584ca2c-b795-1aa9-5df3-25f14feb4ae0.png)
他にどんなフォントが使えるかは、[「Figmaで日本語を使う」のコラム](https://qiita.com/sakapun/items/07577ac325aae3db44ba)をご参考ください

# スマホ画面での見た目を確認する

画面上部右の「▷」をクリックすると、作ったデザインを確認できます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f3400b72-7e44-46ae-e628-c5e1fa578748.png)
以下のような感じで、スマホでの見た目を確認できます（動かす端末と画面サイズが合っていないようですが…）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/38f6e794-8702-97db-81a7-3472e12e8b5b.png)

# 終わり

Figmaを初めて触りましたが、なかなか手軽かつ良い感じにページデザインやレイアウト、ロゴを作っていくことができました

思った以上に良い出来で、Figmaが「ブラウザ上で動くツール」だということを忘れてしまいました

この他にも、ページ遷移をデザインしたり、作ったデザインからCSSを出力したりと、色々な機能があるのと、今回は試せなかった、チームでのコラボレーションデザインについても、試していきたいと思います

# p.s.「いいね」よろしくお願いします

ページ左上の ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4d515047-cc48-382e-c2b1-3ad0cc50dbbf.png) や ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/a4e3da58-70a3-4197-95a2-6a6906650d01.png) のクリックを、どうぞよろしくお願いします:bow:
ここの数字が増えると、書き手としては「ウケている」という感覚が得られ、連載を更に進化させていくモチベーションになりますので、もっとElixirネタを見たいというあなた、私達と一緒に盛り上げてください！:tada: