UX/UIデザイン

121
GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

UIデザイナーのNOEです。 先日、お仕事でアプリのローディングアニメーションを作成したのですが、 当初予定していた 、 GIFの書き出しを、するとグラデーションがきれいに表現できず…😂 (※サムネイルはイメージです!) 悩んでいたところ、 ふと APNGというPNGの連番ファイル形式の存在  を思い出し、 エンジニアさんに協力いただいて、 なんとか理想通りのアニメーションの実装が可能になりました!✨ 今回はそんな、 ・GIFだと汚くなってしまう ・JSONで表現で

スキ
21
【Figma】 Prototype Action

【Figma】 Prototype Action

Figmaを使ってスマホUI / web UIを絶賛勉強中です〜☺︎ Figmaがとっても便利なツールなのはわかってきたのですが、 インターフェースが英語なのが、私にとっては最初の壁…。 プロトタイプのアニメパターンについてはなかなかまとまった記事がなかったので、動きを日本語にまとめてみました。 (準備) Design → Prototype に切替 Prototypeに切替ると、 ボタンや画面を結ぶ線を出せるようになります。 1.Trigger  アクションを起こ

スキ
11