昨今のWeb制作では、ワイヤーフレームからデザイン制作までFigmaで制作を行います。
またコーディング時もやはりFigmaを見て、サイトを制作しますので、Figmaで制作は重要になっています。
例えばサイト制作のベースがSWELLであるならば、SWELLのデータからワイヤーなり、デザインをしたいですよね。
そこでSWELLのデザインをFigmaで扱えるデータを作成してみました。
Figmaで使えるSWELL用テンプレートについて
できるだけSWELLの基本のパーツを集めて再現しました。
- トップページ（1920pxと390pxのPCとスマホの2種類）
- 記事ページ（1920pxと390pxのPCとスマホの2種類）
- カテゴリーページ（1920pxと390pxのPCとスマホの2種類）
- 著者ページ（1920pxと390pxのPCとスマホの2種類）
- SWELLブロック&WordPressブロックの見た目･全21種類デザインパターン集（2024.5 追加）
【2024.5追加】SWELLブロック&WordPressブロックの見た目･全21種類デザインパターン集
SWELLブロックの全デザインパータンをHTML化しました。
Figmaで使えるSWELL用テンプレートの入手方法と使い方
テンプレートは有料です。
下記のサイトからFigmaのデータ購入してください。
まとめ
今後もSWELLを再現したFigmaのデータを追加したり、使いやすいようにデータ整理やオートレイアウト設定をしていくつもりです。
よくある質問：Figmaで使えるSWELL用テンプレートについて
このテンプレートは、何のためのものですか？
記事では、SWELLのデザインをFigmaで扱えるデータとして作成したもので、サイトのベースがSWELLのときに、SWELLのデータからワイヤーやデザインを作れるようにするものです。全て編集・加工しやすい単位までパーツ化しています。
どんなページが入っていますか？
記事では、トップページ、記事ページ、カテゴリーページ、著者ページが、それぞれ1920pxと390pxのPCとスマホの2種類で入っています。記事ページには主要なWordPressブロックから、SWELLブロックまでのパーツも入っています。
SWELLブロックのデザインも入っていますか？
記事では、2024年5月に、SWELLブロックとWordPressブロックの見た目の全21種類デザインパターン集が追加されています。SWELLブロックの全デザインパターンをHTML化したものとして紹介しています。
テンプレートは無料ですか？
記事では、テンプレートは有料です。記事の案内サイトからFigmaのデータを購入します。料金や購入条件の最新は、販売サイトで確認してください。
購入したあと、更新データも入手できますか？
記事では、1度購入すれば、追加のアップデートデータも入手可能とされています。今後もSWELLを再現したFigmaのデータを追加したり、使いやすいようにデータ整理やオートレイアウト設定をしていくつもりとも書かれています。
SWELLのすべての機能を再現していますか？
記事では、できるだけSWELLの基本のパーツを集めて再現したものと説明しています。実際に収録されている内容は、購入前に販売サイトで確認してください。
