18
10

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のPrototypeで横スクロールをさせる方法

Posted at

Startup WeekendでサービスのMVPを作ったときにFigmaのPrototype機能を使った横スクロールがなかなかできなかったので忘れないように書いておきます。

ポイントは
① component ② Frame ③ Horizon Scrolling
この3つだけです

① 最初に横にスクロールしたい要素の1つを作成し、Componentを作成します。
  この時上のバーにある真ん中の◆が4つ並んだアイコンをクリック(またはCtrl + Alt + K)します。
FireShot Capture 453 - Untitled – Figma - www.figma.com.png

② ①で作ったcomponentをコピーし、他のインスタンスを作成します。(今回は色を変えました)
  今回はコピーしましたが、Assetsから持ってきても大丈夫です。
FireShot Capture 455 - Untitled – Figma - www.figma.com.png

③ Frameとなっていることを確認します!
FireShot Capture 457 - Untitled – Figma - www.figma.com.png

④ PrototypeのOverview BehaviorをHorizon Scrollingにします。
FireShot Capture 458 - Untitled – Figma - www.figma.com.png

⑤ 下のように外側のFrameの枠をずらしたら完成です!!
test.gif

⑥ こんな感じになります
test2.gif

参考になればうれしいです!

18
10
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
18
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?