2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

figmaで画面設計を書く際の基礎的な使い方

Posted at

figmaで画面設計図、画面遷移図を描いたので、その時に必要だと感じた操作をまとめます。
2021年6月にmacで作成しました。

図形の書き方

スクリーンショット 2021-06-11 9.50.17.png

0 まずページを作成します
1 command+Fでフレームを作ります。右からdesktop,mac等大きさを選択することもできます。command+Rで四角を作れます
2 fillで色を変えられます。その下のstrokeで枠線の太さを設定できます。
3 角を丸くできます。
4 command+Tでテキストボックスを挿入できます。shiftを押しながら要素を複数選択してcommand+Gでグループ化できます。
5 command+Oで丸を作れます。shiftを押しながらサイズ調整をすると、縦と横が同じに設定できます。
6 親要素に対してのオブジェクトの位置を設定できます。
スクリーンショット 2021-06-11 10.59.52.png
7 layout gridで縦横に分割線を入れられます。格子状に入れることも可能です。
スクリーンショット 2021-06-11 11.10.55.png

8 要素をコンポーネント化できます。コンポーネント化したものを複製し、親要素に変更を加えると全ての小要素に変更が反映されます。
9 グループ化したものをauto layoutすると、例えば枠線の中の文字を追加しても自動で枠線が広がるようになります。

最後に

自分が必要だと思ったことを簡潔に書いたつもりですが、詳しく知りたい方はyoutubeにfigmaの使い方を丁寧に解説してくれている50分くらいの動画があったので、それを参考にすると良いと思います。

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?