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

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

松田健聖

2021年10月17日

こんにちは、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のテーマをコーディングしていく流れとしたことで、開発がスムーズになった気がします。みなさんもぜひ使ってみてくださいね。

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

logo

株式会社5-bit

私たち『5-bit(ファイブビット)』は、SaaS型E-Commerceプラットフォーム『Shopifty』専門の伴走型EC支援企業です。

お問い合わせ・ご相談はこちらまで
Shopifyの記事一覧