FigmaのデザインをStudioでWebサイト化した時のポイント

こんにちは。Ichikawaです。

最近行っていた業務で、Figmaで作成したデザインをStudioに移行してWebサイト化するというものがありました。
私はStudio自体は触った経験はありましたがFigmaからの移行作業は初めてで、FigmaとStudioの連携で慣れない部分が数多くありました。

今回はその時の経験を踏まえながら、FigmaデータのStudio移行のやり方とその際に心掛けるとよいポイントについて書いていこうと思います。

Studioとはどんなツール？

Studioを大まかに説明するとデザインエディタを用いた直感的な操作が可能なノーコードWebサイト制作ツールです。

コード無しで一定以上のデザイン性を持つWebサイトが作成可能であり、この部分が他のノーコードWeb制作ツールと一線を画す部分です。

FigmaのデザインをStudioに移行する

今回の作業では『Figma to Studio』というプラグインを使って作業を行います。

Figma to Studioとは、Figmaで作成したデザインを簡単にStudioにインポートできるプラグインです。
https://studio.design/ja/figma-to-studio

今回はこのプラグインを使ってFigmaのデザインを移行していきましょう。
手順は下記のようになります。

①Studioのアカウントを作成する

②Figmaが最新状態であることを確認する

③Figma上でFigma to Studioをインストールする

④Studioにログインする

⑤移行したいフレームを選択し、「クリップボードにコピー」を押下する

⑥Studioのエディタ上でペーストする

一連の作業を通して「FigmaのデザインをStudioに移行する」という工程は完了しました。
ここからは移行したデザインデータを実際にWebサイトとして見れるように整える作業となります。

Studioでレイアウトを整える

Figmaから移行したデザインをそのままStudioのプレビューにかけると、いくつかの問題点が残っています。
具体的には以下のポイントが問題となります。

1つずつ対策を見ていきましょう。

【対策1】要素が固定幅で設定されてしまうとき

要素の幅は上部メニューのWidth部分から調整できます。
一つずつ要素を検証し、意図せずに固定幅になっているレイアウトは%やvw指定に直しましょう。

【対策2】レスポンシブ化する際に要素の並び方が崩れてしまうとき

Studioでは、各要素の並べ方としてFlexboxに似たシステムが採用されています。要素の並べ方を変えるためにはこの独自の仕様を理解する必要があります。

1つ目は要素を揃える位置の考え方です。右左と上下揃えに加えて3つのオプションがあります。
詳しくは下図をご覧ください。

2つ目は要素の並べ方の考え方です。5つのボタンがあり、それぞれFlexboxに近いプロパティが設定されています。
こちらも詳しくは下図をご覧ください。

ベースの考え方はFlexboxとほぼ同じなので、HTMLやCSSを書いたことがある人ならとっつきやすいでしょう。

レスポンシブ化する際の画面を見ながら調整するのは苦労することもありますが、これらの概念を頭に入れておくことで作業効率が変わるはずです。

【対策3】画面幅によって画像が歪んで見えてしまうとき

この問題はFigmaからStudioへの移行で頻発しがちな問題です。原因としては前段で述べたことと近く、画像の高さが固定幅扱いになっていることが原因です。

つまりwidth: 100%、heigth: autoを画像(および画像の親divタグ)に設定できれば回避できることになります。 

これらを実行することで画像の歪みは解消できるはずです。

最後に

ここまで読んでいただきありがとうございます。

時間的制約やスタッフの能力など、様々な理由でコーディングを経由せずにFigmaのデザインからWebサイトを制作したい場面に遭遇するかもしれません。

そういった場面においてこの記事が参考になれば幸いです。