Figmaで使えるSWELL用テンプレート

SWELLを使うサイトの画面設計に利用できるFigmaテンプレートを紹介します。テンプレートのダウンロード先は、この記事の有料部分に掲載しています。単品1,000円で購入でき、WAZAの有料技術記事読み放題プランでも利用できます。

Figma Designへ読み込む .fig ファイルです。WordPressへインストールするテーマや、SWELLの設定を自動反映するデータではありません。

文章・色・配置をFigmaで検討した後、WordPress側でSWELLの設定やブロックを使って実装します。

そこでSWELLのデザインをFigmaで扱えるデータを作成してみました。

全て編集・加工しやすい単位までパーツ化しております。

2024年5月にブロックのデザインパターン集を追加した記録があります。現行SWELLの全機能・全デザインを網羅することを保証するものではありません。

Figmaで使えるSWELL用テンプレートについて

以下は既存テンプレートの紹介内容です。1920px・390pxは素材の設計幅なので、制作するサイトの幅に合わせて調整してください。掲載画像は過去の制作例で、今回すべてのフレームをFigmaで再確認したものではありません。

記事ページには主要なWordPressブロックから、SWELLブロックまでのパーツも入っております。

全て編集・加工しやすい単位までパーツ化しております。

【2024.5追加】SWELLブロック&WordPressブロックの見た目･全21種類デザインパターン集

2024年5月に追加したブロックの見た目のパターンを紹介しています。配布ファイルはFigma用で、WordPressへそのまま取り込むHTMLテンプレートではありません。

購入・ダウンロードについて

この記事をcodocで単品購入するか、対象の購読プラン「WAZAの有料技術記事読み放題｜WordPressカスタマイズで差をつけよう！」に加入すると、記事末尾のダウンロード先を閲覧できます。すでに対象プランを購読中の方は、契約しているcodocアカウントでログインしてください。

商用利用・加工・再配布・顧客への納品の条件が分からない場合は、購入前に運営者へお問い合わせください。

Figmaへの読み込みと編集の手順は、Figmaメソッドの無料解説記事で確認できます。

よくある質問：Figmaで使えるSWELL用テンプレートについて

このテンプレートは、何のためのものですか？

記事では、SWELLのデザインをFigmaで扱えるデータとして作成したもので、サイトのベースがSWELLのときに、SWELLのデータからワイヤーやデザインを作れるようにするものです。全て編集・加工しやすい単位までパーツ化しています。

どんなページが入っていますか？

記事では、トップページ、記事ページ、カテゴリーページ、著者ページが、それぞれ1920pxと390pxのPCとスマホの2種類で入っています。記事ページには主要なWordPressブロックから、SWELLブロックまでのパーツも入っています。

SWELLブロックのデザインも入っていますか？

既存の紹介では、2024年5月に21種類のデザインパターン集を追加したと案内しています。Figma用の見た目の素材であり、現行SWELLの全ブロック・全設定の再現を保証するものではありません。

テンプレートは無料ですか？

テンプレートのダウンロードは有料です。この記事を単品1,000円で購入するか、対象のWAZA購読プランに加入すると、有料部分のダウンロード先を閲覧できます。

購入したあと、更新データも入手できますか？

提供中のファイルは、有料部分のダウンロード先で確認できます。追加データの有無や更新内容はこの記事で案内します。将来の更新時期や、SWELLの全機能への追従を保証するものではありません。

SWELLのすべての機能を再現していますか？

すべての機能を再現するものではありません。配布ページの確認範囲と、使用するSWELLの設定・表示を照合してください。Figmaでの編集をWordPressへ自動反映する機能もありません。