プロトタイプ
FigmaのPrototype機能を利用して画面やUIコンポーネントに対するインタラクションを設定し、画面遷移や表示を変化させるアニメーションを設定する方法を紹介します。
![figma-bottom-fixed-sticky-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/4Q1VCcpsx74MFLqMyYHZdx/12eab8b67a2c6cb04d7896b4872499eb/figma-bottom-fixed-sticky-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでオブジェクトを画面下部に固定して追従させる(プロトタイプ)
2024.06.14
![figma-how-to-change-screen-size-on-preview](https://images.ctfassets.net/ubv4j9m3121x/7sLrspCYUK9ZltgbsaOJir/2932fd1e676bbc7561c925416d3d6b4a/figma-how-to-change-screen-size-on-preview.png?w=1200&h=630&q=50&fm=png)
Figmaのプレビューで画面サイズの縦横比を維持する方法
2024.05.31
![figma-overlay-dialog-prototype](https://images.ctfassets.net/ubv4j9m3121x/kf3tqzF3X445h7mrnjKj9/0c1a71a7ae22c05eed9fefedb9157791/figma-overlay-dialog-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでダイアログをオーバーレイで表示させる(プロトタイプ)
2024.01.26
![figma-how-to-setting-prototype-with-mockup](https://images.ctfassets.net/ubv4j9m3121x/5zYVEuBUqIXiYjFxv3Q34I/a634b2a41ccaab791d2f838c701219da/figma-how-to-setting-prototype-with-mockup.png?w=1200&h=630&q=50&fm=png)
Figmaでモックアップ付きのプロトタイプを作成する方法
2023.09.01
![figma-how-to-setting-scroll](https://images.ctfassets.net/ubv4j9m3121x/7ihoGXh5toNxcrD5MrwO9J/8cf801f7c6c29cfebc7e377086c4c847/figma-how-to-setting-scroll.png?w=1200&h=630&q=50&fm=png)
Figmaのプロトタイプのスクロール制御に関する設定
2023.08.04
![figma-pull-down-button-prototype](https://images.ctfassets.net/ubv4j9m3121x/17JWkgqY4qWHfiYxP6XtyT/f3b822b9e42c1ba478ae829523c8b1f5/figma-pull-down-button-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでクリックするとメニューが開くプルダウンボタン
2023.07.21
![figma-header-sticky-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5EOD1wmBR6r3q5MkgKhPzK/d355574cb5e20f6a60560ff6aae4f208/figma-header-fixed-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでヘッダーを画面上部に固定して追従させる(プロトタイプ)
2023.06.02
![figma-interactive-components](https://images.ctfassets.net/ubv4j9m3121x/325n1JRAO3aqcUCBp0m7R8/82d2b6a6ea329da5f68cf7365f8c7456/figma-interactive-components.png?w=1200&h=630&q=50&fm=png)
Figmaで作れるインタラクション付きコンポーネント集
2023.04.14
![figma-table-cell-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/51DedOPKQyEZ6nBeUY0irO/d8dc50a6b628bff64df3c5c391450bb6/figma-table-cell-animation-prototype.png?w=1200&h=630&q=50&fm=png)
マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)
2022.09.03
![figma-toggle-switch-with-slide-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/2bXZYxsQNq24uD7b5i9sk8/48f490c4a6048d80efeeb4d385b6e52d/figma-toggle-switch-with-slide-animation-prototype.png?w=1200&h=630&q=50&fm=png)
スライドするアニメーション付きのスイッチ(プロトタイプ)
2022.04.15
![figma-button-with-fill-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5bM3Xobkx0BkEsS5RrXTVp/5af1f850fd1208ee316d635e8321b7fc/figma-button-with-fill-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)
2022.03.11