WeblifyのAdd、Navigator、Styleタブでは、Webサイトのページを編集可能なFigmaレイヤーとして作成・編集できます。生成されたレイヤーにはWeblifyのメタデータが保持されるため、プラグインでプレビュー、監査し、静的なWebサイトとしてエクスポートできます。
ページを作成する
- Navigatorタブを開き、New page nameに名前を入力してAdd pageを選択します。または、Addタブを開いてTemplatesを選び、テンプレートを選択すると、テンプレート名の付いた新しいページとして追加されます。
- コンテンツを追加する前に、生成されたページをFigmaのキャンバス上かNavigatorで選択します。
何も選択されていない場合、Weblifyは最初に見つかったWeblifyページを使うか、Homeという名前のページを作成します。Addタブのフィルターの下の行に、新しいコンテンツが挿入される場所が表示されます。
セクションと要素を追加する
Addタブは、検索できる1つのライブラリです。Templates、Sections、Elements、Layoutsのフィルターを使うか、名前で検索します。ナビゲーション、ヒーロー、コンテンツ、料金、フォーム、フッターなど、ページの完全なエリアにはSectionsを使います。個々のコンポーネントにはElementsを使います。項目を選択すると挿入されます。
項目を挿入する前に、Weblifyのページ、セクション、または列を選択してください。これによりWeblifyが親を予測どおりに判断でき、エクスポートされる構造が保たれます。
項目に星を付けると、Favouritesに追加されます。自分で作ったセクションを再利用するには、Navigatorでそのセクションの ⋯ メニューを開いてSave to My sectionsを選びます。すると、AddタブのMy sectionsに表示されます。
構造を編集する
Navigatorタブには、ページと、現在のページのセクションが一覧表示されます。次の操作ができます。
- ページを追加し、ページやセクションをドラッグして並べ替え、⋯ メニューで名前の変更、複製、非表示、削除、ホームページの設定を行う。
- ページの横にある ⚙ ボタンを選択してURLと検索用のメタデータを編集し、Save pageを選択する。
- セクションの ⋯ メニューを使って、ヘッダーまたはフッターとしてすべてのページに表示する。
ページのメタデータには、タイトル、説明、正規URL、SNS共有用のフィールド、ファビコン、Twitterカードの種類、検索エンジンの設定が含まれます。
選択したセクション、行、グリッド、列がタブレットやスマートフォンでどのように表示されるかを設定するには、Styleタブを開いてResponsiveを展開します。
スタイルと画像を適用する
Styleタブを開いてBrand stylesを展開すると、生成されたコンテンツで使われるテーマ、色、タイポグラフィ、角丸を確認できます。Imagesを展開するとプレースホルダー画像が一覧表示されるので、エクスポートの前に実際の画像URLに置き換えられます。
Previewタブを開くと、プラグインから離れずに現在のWebサイトを確認できます。