8
2

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 5 years have passed since last update.

FigmaAdvent Calendar 2018

Day 13

仕掛けのあるクリスマスカードをfigmaで作ってみた

Last updated at Posted at 2018-12-13

作ってみた

普段プロトタイプしか作成しないので、クリスマスカードを作ってみた
その中でfigmaでできる機能を応用?して仕掛けを作る

困ったこと&回避策

  • fix position
    • 背面に移動できない  →  透過にしてごまかす
  • Trigger
    • 複数重ねられない → 入れ子構造で実現はできる(どちらかが機能しない)
  • OverflowBehavior
    • 回転すると機能しない(±1°なら動くけど...) → ☓(そもそもhtmlの仕様も同じ?)
    • horizon scrollingを90°回転しても vertical scrollingにはならない
  • OpenOverlay
    • イベントで透過やサイズ変更をするのは難しい → 上に重なるので大きくなる分には問題ない
    • 1ページ複数設置する場合は戻りのアクション「CloseOverlay」を設置する
    • コンポーネントで作成するのではなくFrameで作成したほうがやりやすい
    • 色が変わるくらいならコンポーネントのほうが楽
  • Export
    • pdfは1ファイルで生成はされない → Acrobatを利用する 

感想

そもそもプロトタイプなどを作成するツールなので上記のような使い方はしないのだが、あらためてfigmaの可能性を感じた。

※本当はこんな感じで見せたかった

illust author

8
2
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
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?