Figma Sitesの簡易取説（できること、できないこと、気をつけること）
Figma Sitesとは
Figma Sitesとは、Figmaと同じ操作感でWebサイトのデザイン〜公開までできるノーコードツールです。
Figmaアカウントがあれば、任意のプロジェクトで作成→サイトを選択するとすぐに始められます。
（サイトの公開には有料プランの契約が必要です）
https://www.figma.com/ja-jp/sites/
かんたん まとめ
できること
Figma（デザイン）でできること（多分ほぼ）すべて
ブレイクポイントの管理
テキストスタイルにもブレイクポイントの指定が可能
ブレイクポイントをまたいで一括編集
指定ブレイクポイントだけのデザイン調整（※要注意）
meta要素編集
h1~h6, nav, section等のタグ指定（脱・全部div）
altの追加
公開時の画像圧縮
アニメーション
できない（できなさそう）なこと
最適なマークアップ（ul, ol, li, tableなど…）
自動的なマークアップ（基本は全部div）
自動再生のスライドショー
フォーム、検索機能の実装（Googleフォーム等の埋め込みは可）
指定ブレイクポイントでのみ編集した箇所の確認、連携
educationプランでの利用
気をつけること
テキストスタイルのブレイクポイントを活用しよう
アクセシビリティ設定をしよう
「プライマリー画面」を編集しよう！
「プライマリー画面」を編集しよう！！
「プライマリー画面」を編集しよう！！！
今日遊んだメモを簡易取説がわりに残します！
後から知って困りそうなところに★をつけておいたので、普段取説を読まない人もぜひ。
随時アップデートがあると思うので、公開前に実際の挙動をお確かめください。
2025.05.13現在
新しいデータを作る
空白のページか、テンプレートを選択して作成できる。
公開は有料プランでしかできないが、編集自体は無料プランでも可能。
（残念ながら現段階ではエデュケーションプランで作成も編集もできなかった）（放送大学ライフハックが…）
ページを追加する
ファイルナビゲーションのページで＋を押すと空白のページが追加できる。
挿入ナビゲーション内から、テンプレートを選んで追加もできる。
ブレイクポイントを追加する
各ページ右上の＋でブレイクポイントの追加ができる。
ブレイクポイントは各ページごと独立している。
（もし共通設定見つけた方教えてください…）
Figmaデザインファイルからコピペする
デザインファイルからデータをコピペができる（！）
オートレイアウトの設定が保持される。
★すべてのブレイクポイントの要素を編集する（プライマリー画面の編集）
デフォルトでは一番左のDesktop画面が「プライマリー」として設定されており、プライマリー画面でした編集はすべてのブレイクポイントへ反映される。
リンク、アクセシビリティ、アニメーションの設定も同様。
（公式名称は”プライマリーブレイクポイント”ですが、記事内では”プライマリー画面”としています。長い…）
★プライマリー設定の変更
スマホファーストのWebサイトの場合は、スマートフォンのブレイクポイントをプライマリーとして設定し、運用することもできる。
プライマリーとして設定したい画面を右クリックし、メニューから変更する。
★個別のブレイクポイントのみ編集する
各ブレイクポイントでの編集は該当の画面にのみ反映され、以降プライマリー画面からした編集は反映されない。
どの要素が個別編集済みか確認できない。
（確認できる方法見つけた方教えてください）
そのため、不必要に各ブレイクポイントで編集するべきではない。
★個別の編集をリセットする
要素を右クリックして「すべての変更をリセット」すると個別の編集をクリアして、プライマリー画面の内容に戻る。
以降、プライマリー画面からの編集が反映されるようになる。
テキストスタイルの設定が完全でない場合、フォントサイズ等もプライマリー画面と同様になる。（対応策）
要素を追加する
Figmaデザイン同様、下部のツールバーからテキスト・画像・パスなどを追加できる。
左の挿入ナビゲーションから、テンプレートを選択して追加もできる。
リンクを追加する
右サイドバーからリンクを追加できる。
URLが外部の場合は新しいタブで開くか選択できる。
ページ内リンクの場合
ページ内リンクは右のナビゲーションバーの「インタラクション」タブから設定する。
フォームの追加（埋め込み機能）
内部の機能のみでお問い合わせフォームや検索フォーム等を実装する手段は今のところない。
埋め込み機能を使って外部ツールで作成したフォームを表示させることは可能。
編集画面では埋め込みされた要素を確認できないが、プレビュー画面では確認できる。
★テキストスタイルを設定する
Figmaデザイン同様、テキストスタイルを設定できる。
さらに、テキストスタイルにブレイクポイントを追加でき、画面サイズごとにテキストサイズ・行間・字間・段落設定の変更ができる。
★「すべての変更をリセット」時に、テキストサイズを維持する
ブレイクポイントごとの文字サイズの調整は、すべてテキストスタイルのブレイクポイント設定で行うべきだ。
個別のブレイクポイントで行った編集をリセットする場合、右クリックメニューから「すべての変更をリセット」を行うと、通常はテキスト設定もリセットされる。（プライマリ画面と同じテキストサイズになる）
しかし、ブレイクポイント設定でサイズ変更をした場合「すべての変更をリセット」してもテキスト設定は維持される。
★アクセシビリティを設定する
プライマリ画面での設定を推奨。
各ブレイクポイントで指定すると、該当のブレイクポイントにしか反映されない。
マークアップ時のタグを指定する
指定しない場合、画像以外の全ての要素は、divタグでマークアップされる。
要素を選択した状態でアクセシビリティからタブ設定を追加すると、以下から指定できる。
テキスト要素
div, p, h1, h2, h3, h4, h5, h6
テキスト以外の要素
div, article, aside, footer, header, main, nav, section
上記以外のタグ（リスト、テーブルなど）は指定できない。
画像はimgタグから変更できない。
alt、aria-labelを設定する
画像、フレーム、パスにはaltを設定できる。
リンクを設定した箇所にはaria-labelを設定できる。
（テキストリンクの場合はaria-labelを編集できない）
※alt スクリーンリーダーのための画像内容の説明。
※aria-label スクリーンリーダーのためのアクションの説明。×ボタンに「閉じる」、矢印アイコンに「戻る」「進む」などを割り当てている場合に利用。
リンクの挙動
リンクを設定した場合でも<div role="link" …>の形でマークアップされる。
tab、enter等のキーボード操作が可能だが、ページ内リンクの場合は操作できない。
別タブで開く設定をしている場合は rel="noreferrer noopener" あり。
タイトルやファビコンなどのメタ設定
左ナビゲーションバーの設定から、公開に必要な諸々の設定が可能。
GAタグの追加のほか、<head>直後、</head>直前、<body>直後、</body>直前にカスタムコードの追加もできる。
アニメーションを設定する
プライマリ画面での設定を推奨。
各ブレイクポイントで指定すると、該当のブレイクポイントにしか反映されない。
インタラクションタブで設定ができる。
プロトタイプとほぼ同様の操作が可能。
スクロールアニメーション、パララックスなども可能。
スライドショー
ボタンを押下して次の画像を表示するタイプのスライドショーはインタラクション設定で可能。
公開済みのテンプレートで設定しているものもある FigmaSitesテンプレート
自動で次のスライドを表示する設定は今のところ出来なさそう…？
プレビュー
各ページ左上の三角からプレビューを確認できる。
その他
テンプレートのプレビューサイトで確認したところ、公開時の画像は圧縮されている様子。
今回触らせてもらったテンプレート
https://www.figma.com/community/file/1487309170684591074/modern-product-launch
https://www.figma.com/community/file/1498087976362579412/trustworthy-app-download
https://www.figma.com/community/file/1498100241451260378/sincere-professional-legal-services
（何か発見したら追加します🍖）
（みんなもFigma Sitesで遊ぼう💪）
