この記事を読むとわかること
社内勉強会の概要
IMAKEの雰囲気
Figma Sitesの制作のコツ
Figma の新機能「Figma Sites」について、特徴や制作時のコツを学ぶ社内勉強会を行いました。
先日出版した書籍「デザインからサイト構築まで FigmaだけでWeb制作」の執筆者直々の講義です！
その様子をスタッフがレポートします！
目次
Figma Sitesを学ぶ社内勉強会
まだまだ情報の少ないFigma Sites。スタッフ全員がスムーズに扱えるようにと、社内勉強会が行われました。
講師は、11月21日に出版した書籍「デザインからサイト構築まで FigmaだけでWeb制作」で、Figma Sitesパートを執筆した弊社COO・小泉。
執筆者直々の講義ということで、スタッフ一同ワクワクで参加しました！
本記事では、社内勉強会でどんな講義が行われたのか、デザイナーのタナベがレポートします！
Figma Sitesとは？
この記事を最初に見た方のために、おさらいです。
Figma Sites は、FigmaだけでWeb サイトを作成して公開できる機能で、HTML やCSS といったコードを書かずに、Figma 上で作り込んだデザインやインタラクションが再現されたWeb サイトを公開できます。
詳しくは、先日公開した記事で紹介しているので、こちらをご覧ください！
Figma Sitesでの制作のポイントを学ぶ
今回の勉強会のメインは、Figma Sitesのデモンストレーションです！
デザインからFigma Sitesで作成していくときに、後々苦労しないためのポイントの講義をしていただきました。
一部を抜粋して皆さんにも共有します！
スムーズに制作を進めるポイントについては、先日公開した記事でもご紹介しています
1.制作をはじめたらすぐ公開
先に公開することで以下のようなメリットがあるそうです！
講義のポイント
- .figma.siteのドメインは早いもの勝ち。制作中に使いたいドメインが無くなってしまうことを防ぐ ※独自ドメインを利用する場合は気にせず！
- ブラウザで実際の表示を確認できるので、最終段階での修正を減らせる
- URLで共有できるので、クライアントとのやりとりがスムーズ
スタッフからの質問
Q：公開してから制作だと、作業工程が丸見えになりませんか？
もちろん必要に応じて未公開に戻したり、パスワードをかけることもできるので、安全に制作できるそうです！
2.「プライマリーブレークポイント」で制作
Figma Sitesは、レスポンシブ対応のためのブレークポイントを設定することができ、その中のひとつを、「プライマリーブレークポイント」にするのですが、ここで制作を行うことが非常に大切だそうです！
講義のポイント
- プライマリーブレークポイントで作業すると、自動で他のブレークポイントにも反映される
- プライマリーブレークポイントではない場所に置いたものは、そのブレークポイント内でしか見た目が反映されず、他の場所では非表示になる。
- 先にプライマリーブレークポイントに全ての共通パーツを置き、例外だけ他のブレークポイントで作業するのが効率的だし、整合性のとれたサイトになる
注意点
四角はプライマリーブレークポイントを設定した、Desktopのアートボードにおいたもの。
丸は設定していない、Mobileのアートボードにおいたもの。
一見、丸はMobileにしかないように見えますが、レイヤーパネルを見ると…
Desktopでも非表示で存在しています。
てことは…
プライマリーブレイクポイントを意識しないと、気づかないうちに非表示のオブジェクトでいっぱいになっているかも、ってことですね…コワイ。
3.オートレイアウト＆コンポーネントの活用
レスポンシブ対応のために、オートレイアウトやコンポーネントは積極的に使っていく必要があるのですが、苦手な方も多いのでは…？
Figma Sitesでは各ブレイクポイントのサイズが並んでいるので、どういう設定でどういう挙動になるのか目で見て理解しやすいのでは？と小泉は言っていました。
オートレイアウトの学習にも使えるかも！？
講義のポイント
- オートレイアウトは「折り返し」で設定
- オートレイアウトで対応できないデザインは、バリアントを作成しコンポーネント化 「値」はブレイクポイント名に
オートレイアウト
折り返しで設定すれば、自動で各ブレークポイントで並べ替えされます。
画面幅が変わった時に、「段落ち」する状態がベスト。
バリアント
オートレイアウトでは対応できないレイアウトのときは、各ブレイクポイント毎のレイアウトのバリアントを作成します。
「値」の名前を各ブレイクポイントの名前で設定すると、レイアウトが自動で反映されるようになります！すごい！
4.スタイルの設定＆ガイドの作成
デザインを作り始める前にスタイルの設定を行い、必要なコンポーネントやバリアントを作成して、スタイルガイドとしてまとめておくと良いそうです。
講義のポイント
- テキストのレスポンシブ対応は、テキストスタイルから設定
- レイアウトのバリアントもはじめに作成しておくと良い
テキストスタイル
テキストスタイルの「ブレイクポイント」を設定しておくと、画面幅に応じてフォントサイズが自動で変わります。
タグの設定もはじめに行っておくのが良いそうです！
スタイルガイド
アートボード外にセクションを作って、バリアントを並べています。
スタッフからの質問
Q：バリアント化した見出しなどでタグ付けに例外がある場合（h1のサイズだけど実際はh1じゃないなど）はどうしたらいい？
その場合は、該当部分のみタグを変更して対応すればいいそうです（アートボード上にあるのはインスタンスなので、個別で変更ができます）
5.ノーコードだけど、設計は必要
ノーコードツールであっても、コーディング的な考えを持ちながら設計・デザインすることで、適切にマークアップされ、アクセシビリティにも配慮されたサイトになります。
ここは、小泉が最も熱く語っていた部分です…！
デザイナーには難しい内容ですが、サイト制作に携わるからにはしっかり押さえておきたい…！
講義のポイント
- タグは適切なものに変更する
- アクセシビリティの設定も行う
- Headタグの中身は、「設定」から
それぞれのオブジェクトの横に、今のタグが表示されています。
初期設定では、テキストはpタグ、フレームはdivタグです！
このままでもサイト公開はできますが、コード的には好ましくない状態なので、適切なタグに変更しましょう。
他、アクセシビリティ（Alt・WAI-ARIA）の設定や、headタグの設定もきちんとしましょうね〜とのことです！
制作のポイントの詳細については、後日小泉が記事化の予定なのでお楽しみに！
インタラクションについて
インタラクションについてもデモンストレーションが行われました。
Figma Sitesには様々なインタラクションが用意されているので、今っぽい動きのあるサイトも簡単に作成できます。
「インタラクション」タブから、つけたい動きを選択できます。
カードカルーセルなど、インタラクションに用意されていないものは、「Figma Make」を活用しましょう！
Figma Makeとは…
Figmaのコンポーネントを作成できるAIツール
デフォルトで用意されているものを、AIとの会話で加工することもできます。
Reactのコードが書けるなら…
コードレイヤーを使って、直接コードを書いて作成したり、
自分でデザインしたフレームをコード化して、カスタムすることもできるそうです！
この辺は、デザイナーには難しい話でした…。私はおとなしくMakeに作ってもらいます（笑）
Figma Sitesは、複雑なデザインにも対応できる拡張性の高さが魅力的だなぁと思いました！
まとめ＆感想
スタッフからも「Figma Sitesでの制作の流れがわかり、理解が深まった」と大好評だった勉強会。多くの質問も出て、予定の1時間を大きく超えて終了しました。
Figmaでのデザイン制作に慣れているスタッフでも、わからないことが多かったFigma Sites。
この勉強会を通じてFigma Sites独特のワークフローを知ることができたので、今後の業務ではスムーズに制作が進められそうです。
筆者はデザイナーですが、コーディングも少々嗜むので、コーディング的な思考でデザインをするのがとても面白そうだな〜とワクワクしています！早く業務で作りたいな〜！
Figma Sitesでのサイト制作もおまかせください！
弊社が大切にしている考え方、制作の流れについては下記記事にまとめています。
こちらもご覧いただけたら嬉しいです。
