はじめに

最近、Studio の案件を担当しました。

Figma to Studio でインポートする際に、フルリキッドな画像の扱いに苦労したので、自分なりの対応方法を発見したのでご紹介します！

状況

例えば、以下のようなメインビジュアルがあったとします。

このとき、サークル同士の距離感を保ったままサイズも大きくなっていく、いわゆるフルリキッドのデザインの場合、Studio だと絶対位置（position: absolute;）の位置指定（top など）が px 指定しかないため、どこかで必ずずれてしまいます。

そこで、画像を書き出す際に、以下のように同じ大きさの画像を作成して重ねることで、比率を維持することができます。（わかりやすいように透過部分をグレーにしています。）

Figma to Studio を使う

さて、画像が用意出来たら Figma to Studio を使用します。

添付画像のように、画像化したいフレームに対して <img> という名前にし、Figma to Studio を実行します。

すると、

なぜか、画像が1枚しか認識されません。

そこで、1列に並べてから Figma to Studio を実行します。

これをStudio にペーストし、最初のアイテム以外を絶対位置にすることで比較的簡単にフルリキッド状態にすることできます。

アニメーションをつけたい時

例えば、サークルを画面外からフェードインさせて少し行き過ぎてから戻ってくる。

そんなアニメーションを表現したい場合、サークルをマスクしてしまっているとどうしても端が切れてしまうので、下記動画内のようにサークルが丸々収まるようにして画像を作成し、Studio 上でボックスを1つずつ増やし中央揃えにします。

このとき、アイテム1 は横幅と縦幅両方 100% にし、<img> は横幅は画面幅より大きくなるので、その値に適した % の値にして縦幅は auto を指定します。

例えば、画像のサイズが 2000px でカンプの設定している画面幅が 1366px の場合、

2000 ÷ 1366 = 1.4641288433

になるので、146% を指定すればサークルを個別にアニメーションさせても、サークルの端が途切れてしまうことを防ぐことが出来ます。

以下は、実際にアニメーションをさせた時の動画です。

以下のリンクで、実際にWeb上で確認することが出来ます。
ぜひ、可変させてみてください。（PCのみ）
https://gray674233.studio.site

注意事項

今回の場合だとボックスを1つ多く使うため、Studio 上のレイヤーの上限に達しやすく、注意が必要です。

また、scale のアニメーションをする際、カスタムコードを使用して scale する中心点（transform-origin）を調整する必要があります。

さいごに

今回のようなちょっとしたコツを知っておくことで、小さな時間短縮を積み重ねることができ、大きな効率化を図ることが出来ます。

少しでも参考になれば幸いです。

また、Studio は新エディタに変わったことで、よりデザインツールのような感覚で操作出来るようになりました。

所々、不安定な箇所はありますが、個人的にはどんどん進化していくのが楽しみです。