---
url: "/ja/bannerify/animation/live-preview.md"
description: "キーフレームやプロパティを調整しながら、カスタムアニメーションをリアルタイムで確認します。"
---

# ライブプレビューを使う

> キーフレームやプロパティを調整しながら、カスタムアニメーションをリアルタイムで確認します。

### 動画チュートリアル：Figmaのバナーデザインにカスタムアニメーションを追加する

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

[Video](/assets/videos/bannerify/animation/live-preview-speeds.mp4)

更新したキーフレームとそのプロパティでアニメーションがどう見えるかは、キーフレームのプロパティの横にある**Live preview**エリアで確認できます。キーフレーム、プロパティ、イージングに加えた変更は、すべて自動でライブプレビューに反映されます。

> **Tip:** **ライブプレビューの再生速度は調整できます**。カスタムアニメーションが速度によってどう見えるかを確かめたい場合は、プレビューの下にある**Duration**スライダーをドラッグして、プレビューの1ループにかかる秒数を変えることで、ライブプレビューの再生速度を変更できます。