「Figma to Shopify」とは？

リンク：https://www.figma.com/community/plugin/1325097335621267194/figma-to-shopify-with-instant

「Figma to Shopify」とは、Figmaで作成したデザインをそのままShopifyに適用できるツールです。
正確にはinstantという中間ツールを用いてデザイナーがFigmaで制作したビジュアルやUI要素をShopify側へ反映することで、非エンジニアでもShopifyのテンプレートが構築できます。

「Figma to Shopify」の利用方法

①「Instant」のユーザ登録

＊Figma・Shopifyのアカウントは 既にアカウントを持ってるものとします。
https://app.instant.so/loginへアクセスして、ユーザ登録します。

②Figmaデータの準備

ECサイト用のFigmaデータを準備します。
デザイン作成の際は、なるべくオートレイアウトを使っていデザインを作成しましょう。

③「Figma to Shopify」プラグインインストール

④取り込みたいデザインを選び、プラグイン起動

Figmaで取り込みたいデザインを選び、プラグイン起動。「Copy Design」を押下します。
※レイヤーが多すぎたり重いとコピーできない事があります。

⑤instantへペースト

右クリックか、CTrl＋VでコピーしたFigmaのデザインをペーストします。
※ここで、ペーストしたものをInstant上で見栄えを調整していく必要があります。

⑥shopifyとinstantを連携

hopifyとinstantを連携すると、左のバーの「アプリ」からinstantを開けるようになるため、そこからinstantを開きます。

⑦instantでデザインしたぺージをひらく

⑧instant上で公開設定

ポップアップに表示されている「Enable shopify（アプリの埋め込みを有効化）」＜「skip&publish（スキップして公開）」を押下します。

⑨公開

公開されると、上記のポップアップが表示されます。
「View page」をクリックすると、該当のURLに、instatで作成したページが公開されています。

料金

Shopifyへテンプレートとして利用には大抵の場合に、月額の料金がかかります。使いたい規模によって料金が変わっていき、料金表は以下です。
少なくとも一番下のプランは契約する必要があり無料では使える範囲は狭いです。

使ってみた感想

メリットとデメリット

メリットはインスタント側で結構調整が必要なので、 コーディングの知識がなくてもShopifyテンプレートをつくれる所です。

デメリットは機能実装には知識がいるのと、instansの調整には時間がかかる（STUDIOやWIXなどノーコードでのサイト構築に近いような肌感でした。）ので工数が全くかからないわけではなさそうです。

また、デバイスの切り替えがレスポンシブデザインではなく、デザイン幅以下（微妙な幅）になったとき、設定によってはデザインが右側から削れていくアダプティブデザインが採用されています。