0
1

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使い方

Last updated at Posted at 2021-01-26

基本動作


左上のFrameを押すと

右にいっぱい実機サイズがでてくるので
_2020-12-17_0.12.37.png
押すとそのサイズの枠ができます.

スクロールさせる

_2020-12-17_0.14.14.png
スクロールさせたかったら枠のはじっこをドラッグで引き伸ばすことで,その分スクロールできるようになります.
_2020-12-17_0.15.54.png
スクロール中に固定させたいものはContainsのFix positionに✅を入れると固定されます.

画面遷移

_2020-12-17_0.26.29.png
右に書かれている文字をDesignからPrototypeにすると画面遷移を作れます.
_2020-12-17_0.27.19.png
図形にある丸から動かしたい先のビューまで導線をつなげます.
この時右に書かれているTapってところは『タップしたら画面遷移』などを表します.ここでは『新規登録』ボタンを押すと『くのさんのやわらかさ』の画面へと遷移します.

参考文献

UI/UXデザインツール『Figma』入門
Figmaのプラグインをいろいろ触ってみました
Figmaのプロトタイプ~スクロール編~
Figmaのおすすめデザイン素材・UIキットまとめ
Figmaで基本の定番UIアニメーション7つをデザインしよう 無料サンプルデモ有

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?