見出し画像

【Figma】 Prototype Action

Figmaを使ってスマホUI / web UIを絶賛勉強中です〜☺︎

Figmaがとっても便利なツールなのはわかってきたのですが、
インターフェースが英語なのが、私にとっては最初の壁…。
プロトタイプのアニメパターンについてはなかなかまとまった記事がなかったので、動きを日本語にまとめてみました。



(準備) Design → Prototype に切替

Prototypeに切替ると、
ボタンや画面を結ぶ線を出せるようになります。



1.Trigger 

アクションを起こすトリガーの種別を設定します。

★:よく使いそうなやつ(独断と偏見)


2.Action


▼  アクション先  



▼  別のフレームに遷移する時のアクション種別  ▼



3.Transition

アニメ(動き)演出の種別です。
他のツールと同じ動きかつApp内にサンプルアニメがあるので割愛します。


でも、結局はいっぱい使って慣れないと設定のコツは難しそう!
頑張ります!

参考)
Figma プロトタイプ解説 (サンプルアニメあり)


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
BIG HUG!
10
UXUI Designer (YUMEMI,Inc.) / Graphic Designer (Freelance) 寝るのと 食べるのと デザインと 音楽が好きです🌝 「場」づくりに興味があります🌞

こちらでもピックアップされています

Figma のまとめ
Figma のまとめ
  • 158本

デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。