こんにちは、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の仕様変更等により、記事の内容どおりに設定ができない場合があります。
