Qiita株式会社Advent Calendar 2023

Figma初心者がFigmaで2024年1月のカレンダーを作ってみた

Last updated at 2023-12-13Posted at 2023-12-13

はじめに

こんにちは。Qiita株式会社で主にQiita Zineの記事ディレクションを担当している丹羽です。Qiita Advent Calendar 2023ももう折り返し。ずっと「何か書こう」と思いながら、エンジニアでもデザイナーでもないので、どんな記事にしようかと悩んでいました。

何かを作るのが好きなので、とりあえず「何かを作ろう」と思い、使うツールや作るものを考えていました。すると「そういえばFigmaをまともに触ったことがないな」と気づいたので、触ってみることに。

この記事では、Figmaほぼ初心者がどのようにFigmaを触ってみたのかと、気づいたことを書いてみます。

冒頭から、完成したものを見せてしまいます。こちら。最初からこのようなカレンダーを作りたいと想像していました。ちなみにこのネコのイラストは、私の実家にいる子がモデル。iPadでProcreateを使って、写真をトレーシングして描いています。

※ 今回の目的は「Figmaを触り、どのようなツールかを知る」なので、デザインについては「正方形の縦・横の幅を数字で指定する」とか「幅は等間隔で」など、初歩的なことに気を付けるだけにとどめています。また操作や作成順などについて、他に正しい／便利な方法があるかと思います。

ネットの記事を参考にしながら。まずはフレームを選びます。左上の「井」みたいな部分を押すと、右にサイドバーが出ます。「iPhone」「Tablet」「Desktop」などいくつかのパターンがあるので、作成するものに合うサイズを選択。私は「Desktop」から選びました。

続いては、日付や曜日を入れるための四角を設置します。右上の四角からプルダウンで「Rectangle」を選択。サイドバーで幅と高さを指定します。

正方形を1つ作ったら、横7列 × 縦5行にします。コピペコピペで。

（スクショの範囲を間違えてしまいましたが、）左上の「T」を押すと、テキストを打てるようになります。カレンダー用に設けた正方形の上に「1」と書き、まずは横1列入れ、サイズ・位置を整えたら、再度コピペコピペで下の行を埋めていきます。

1桁と2桁、また10の位と20の位では位置がずれてしまったので、都度調整。

イメージは、上部バーの一番左にあるFigmaマークの、「File」＞「Place Image」から使用したい画像を選び、画面の上でクリックすると挿入されます。サイズや位置を調整して、お好きな場所に。

白背景ではなんだか寂しいので、画像も入れます。先ほどイラストを入れたときと同じように、「File」＞「Place Image」で挿入。

一番上の層に来てしまい、数字も何も見えない状態に。右クリックして「Send to back」を押せば背面へ移動しますが、なんせ正方形と数字がたくさん置かれているので、最背面へ持っていくには何度も「Send to back」をしないといけない...。

左側のバーを見ていると、どうやら上から下にいくにつれて、層が下にいくようだ。左バーで、背景画像を一番下に持っていくと...

簡単に綺麗に最背面へ移動できました🎉　微調整を加えて完成。

操作しやすい
- 限られた画面（モニターなし、MacBookAirを使用）でも操作しやすい
  - サイドバーでサイズや位置の指定を細かく、かつパッとできるから
- トラックパッドのピンチアウト・ピンチインで画面の縮小・拡大できるのが、直感的だと感じた
画面を広く使える
- 特に画像を挿入するときに感じた
- 画像置き場のようなスペースが設けられていないので、PCの画面いっぱいを編集のために使える
最初は複雑に感じた
- 始めて使うツールなら何にでも言えるかもしれないですが、層がどうなっているのかとか、どうしたら思い通りにオブジェクトを選択できるの（数字を編集したいのに正方形を移動させてしまったり、誤って正方形やイラストを削除してしまったり）とか

デザインにはもともと興味があったのと、今回Figmaを触ってみて好きだなと思ったので、今後も使ってみます。