Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

公開日:2021年10月17日

更新日:2022年07月02日

こんにちは、Shopifyテーマ開発に携わる者です。

最近、Shopifyテーマ開発にFigmaというツールを導入してみたら、かなり作業効率がよくなったので紹介します。

 

Figmaとは

Figmaは、デザインプロセスに必要なワイヤフレーム設計・UI/UX設計・プロトタイプ設計などが行えるツールです。WEBブラウザでの利用が可能で簡単に始めることができます。私はチーム開発でデザインのイメージを共有する際に使用しています。

 

Figmaを使う時に入れておいたら助かったプラグイン3選

HTML To Figma

すでにあるサイトのデザインを踏襲したい場合に、HTMLをFigmaへインポートすることができます。特定ページを作成・改修したい場合に、新しくデザインを起こすよりも、既存のページをインポートする方が効率が良く、トンマナも揃えやすいので良く使います。正直これさえあればOKです笑

Figmaコミュニティ
https://www.figma.com/community/plugin/851183094275736358/Figma-to-HTML

 

Norted

Figmaファイルに付箋を貼れるプラグインです。デザインをボスにレビューしてもらう際にコメントをもらうために使用しています。私のFigmaファイルは付箋紙だらけになります笑

Figmaコミュニティ
https://www.figma.com/community/file/873811480190908553

 

Content Reel

ブログページを作る時など、あらかじめデータが必要なときがありそんなときにダミーデータを用意するのに使用してしています。依頼が来る時はこんな情報を載せたいとか具体的にきまっていないことが多いので、これがあってとても助かっています。

Figmaコミュニティ
https://www.figma.com/community/plugin/731627216655469013/Content-Reel

 

まとめ

これまで開発するテーマを直接見ながら口頭で開発内容のやりとりをしてきたのですが、イメージのズレが多かった。何かいい方法はないかと探していたところ見つけたのがFigmaです。プロトタイプをサクッと作成してレビューをもらってそれからShopifyのテーマをコーディングしていく流れとしたことで、開発がスムーズになった気がします。みなさんもぜひ使ってみてくださいね。

※この記事は2022年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。

株式会社5-bit

2020年1月に、カナダのShopify本社より「Shopifyエキスパート」として認定をいただきました。現在までに累計で50以上のShopifyストアの構築、1000以上の機能開発経験。他社で難しい要件の実装や構築も承ります。

お問い合わせはこちら

Our Contents私たちの情報発信

ShopifyにAmazon Payを導入するメリットや設定方法を解説

Shopifyのテーマ開発環境を構築する

Shopifyのストアフロントフィルタにメタフィールドが追加されたので使ってみた

Shopifyの新着商品一覧に期間限定(公開から〇〇日以内)で商品を掲載する方法

Shopifyの注文情報をGASでCSV出力する方法

Shopifyの全商品一覧(collections/all)に表示される商品を制御する方法

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyのクーポンを特定のユーザーにのみ適用させる方法

ブログ一覧