こんにちは。 株式会社アジケでUIデザイナーをしているやまもとです。 約2ヶ月ぶりにnoteを書いていますが、今回はFigma How to記事になります! 少し前にプロトタイプを制作する機会があり、その時習得したプロトタイプでアコーディオンUIを表現する方法を書いていきたいと思います。 約1年前にFigmaの記事を書いた時はAuto layoutとVariantsについて書きましたのでそちらも是非読んでみてください! 今回のゴールこのような開閉するアコーディオンをFigmaのプロトタイプで制作していきます! Step1:必要なパーツを準備Variantsのon/offで開閉をできるように設定アコーディオンが開いている状態と閉じている状態を用意し、Variantsで開閉ができるよう設定します。 Step2:パーツを複製Auto layoutを設定アコーディオンが閉じている状態を3つコピーし