これは何
Figma Tips Advent Calendar 2022の参加記事です
エンジニアの同期に、Figmaで初めてデザインを作ろうとしているエンジニア向けに知っておいたことを書いて欲しいと言われたので書きます
この記事はFigmaのファイルを開いてデザインをいざ作成するぞ！というところからスタートします。その前の基本的なFigmaの見方や使い方は以下の記事をご覧ください！
本編
実際に手を動かしながらFigmaを使っていきます。
まずはデザインするページのワイヤーフレームを用意します。
ワイヤーフレームはFigmaで作っても手書きでもなんでも大丈夫です。
今回はゲームのレビューサイトのユーザーページを作成しようと思い、こんなワイヤーフレームを用意しました。
ヘッダーがあってユーザーの情報があってピックアップゲーム、ゲーム機、各媒体のゲーム...最後にフッターと並んでいるページです。
下準備
では早速作っていきましょう！と言いたいところですが、後々楽をするためにここで一度下準備をしておきます。
FigmaにはText stylesやColor stylesというものがあり、デザインないで使うテキストや色を定義して使い回すことができます。
最初にこれを定義しておくと、だんだんデザインが増えてきたときの管理のしやすさや作りやすさが段違いに上がるので、最初に定義してしまいましょう！
さまざまな企業が公開しているFigmaのデザインシステムやHIG、Material Designなどを覗いてみるとどんな定義がされているかがなんとなく掴めるのでおすすめです。
1から構築するのは大変なため、今回は筆者が使い慣れているQiita Blogでも公開しているQiitaのデザインシステムをそのまま定義しようと思います。
Text Styles
Text Stylesは「Text Styles Generator」を使って定義していきます。
- Text Styles Generatorプラグインをダウンロードする
- このFigmaファイルの「Text styles」というレイヤーをコピーして、手元のファイルにペーストする
- 「⌘ + /」でコマンドパレットを開き、「Text Styles Generator」を検索して「Generate Text Styles」を選択する
- Text stylesが追加される
プラグインの説明はこちらの記事をご覧ください！
Color Styles
次に、Color Stylesを定義します。
Qiitaのデザインシステムをベースにサービスのメインカラーを入れて定義していきます。
メインカラーはプライマリーボタンの色になることが多いので、ボタンの背景に敷いた時に違和感がないかやテキストが読みづらくないかを考慮して決めましょう！
注意が必要なのはイエロー系と赤系の色です。
イエロー系は、背景にしても文字色にしても文字が読みにくくなりがちなので、少しオレンジに寄せるのがおすすめです。
赤系の色をプライマリーにするときは、ボタンがエラー表示に見えてしまうので、赤以外の色でプライマリーボタンの色を設定するのがおすすめです。
メインカラーが決まったらColor stylesに登録します。
- 登録したい色を指定したオブジェクトを選択して右サイドバーの「Fill」のメニューから「::」のアイコンを選択し
- ドロップダウンの右上の「+」アイコンをクリック
- Nameに「Main」と入力して「Create style」を選択
残りのColor stylesは、プラグインで一気に登録してしまいます！
-
Chroma Colorsプラグインをダウンロードする
-
このFigmaファイルの「Color styles」というレイヤーの中にある四角形のオブジェクトをコピーして、手元のファイルにペーストする
-
テキスト部分はロックしてあるので、ドラッグで選択すれば四角形のオブジェクトのみが選択できます 
-
-
「⌘ + /」でコマンドパレットを開き、「Chroma Colors」を検索して選択する
-
Color stylesが追加される
ここまでで下準備が完了しました！次回は実際にデザインを作成していきます :)