はじめに
ソーイ株式会社の臼井です。
業務では、デザイナーからFigmaで作成されたデザインを受け取り、その内容をもとにフロントエンドの改修を行うことがあります。
これまでは完成したデザインを確認して実装することが中心で、Figma上でどのように要素が作られ、調整されているのかを十分に理解できていませんでした。
そこで今回は、Figmaの基本的な操作を学ぶために、Qiitaの画面をFigma上に取り込み、以下の3つの変更を行います。
- タブを追加する
- 「投稿する」ボタンの横に「編集する」ボタンを追加する
- シェア欄にInstagramアイコンを追加する
実際にデザインを変更しながら、Figmaで要素を追加・編集する方法や、色・サイズ・画像などの情報を確認する方法を学んでいきます。
※ 本記事ではFigmaの操作を学ぶことを目的として、Qiitaのスクリーンショットを使用し、学習用の変更を加えています。Qiita公式のUI変更案を示すものではありません。
目次
この記事で伝えたいこと
この記事では、Figmaのアカウント作成から、UIの修正、色やサイズなどの情報確認、SVGの書き出しまでの基本的な操作を紹介します。
Qiitaの画面を題材に、テキストやフレームなどの機能を使って実際にデザインを変更します。
Figmaの機能を網羅するのではなく、簡単なUI修正を一通り行うことで、基本的な操作方法を身につけることを目的としています。
想定読者
- Figmaをほとんど使用したことがない人
- Figmaで簡単なデザイン修正をしてみたい人
- デザイナーからFigmaのデザインを受け取る機会がある人
Figmaの準備
アカウントを作成する
まず、Figmaの公式サイトからアカウントを作成します。
Googleアカウントなどを利用して登録することもできます。
アカウント作成後、新しいデザインファイルを作成します。
ホーム画面から「すべてのプロジェクト」を開き、対象のチームを選択します。
チームのプロジェクト一覧が表示されたら、「＋ 作成」をクリックして新しいデザインを作成します。
Figmaの画面構成
Figmaの画面は、大きく以下のように分かれています。
- 左側：ページやレイヤーの一覧
- 中央：デザインを作成するキャンバス
- 右側：選択した要素のサイズ、色、位置などの設定
- 下部：フレーム、テキスト、図形などを追加するためのツールバー
フレームについて
今回はスクリーンショット上に要素を追加する形で進めるためフレームは使用していませんが、Figmaでデザインを作成する際によく使う機能のため、簡単に紹介します。
下の画像では、Frame 1の中に「ログイン」「ログアウト」のテキストや長方形など、複数の要素を配置しています。
左側のレイヤーの青い背景で選択されている部分を見ると、Frame 1の配下に複数の要素が入っていることが分かります。
フレームを使用すると、画面やボタンなどの単位で要素を整理しやすくなり、どの要素がどのまとまりに属しているのかを把握しやすくなります。
また、フレームごとにサイズや背景色を設定したり、自動レイアウトを使用して要素同士の間隔や配置を調整したりすることもできます。
Qiitaの画面をFigmaに配置する
今回は、Qiitaの画面をスクリーンショットとして取得し、Figma上に配置します。
配置したスクリーンショットをもとに、変更したい部分をFigmaの要素として追加していきます。
スクリーンショットは1枚の画像として扱われるため、その中の文字やボタンを直接編集することはできません。
そのため、変更する部分については、テキストや図形、フレームなどの要素を使って新しく作成します。
Qiitaの画面を使ってFigmaの操作を試す
タブを追加する
ホームやトレンドなどの既存のタブが並んでいる箇所に、新しくQiitaのポッドキャストタブを追加します。
まず、既存のタブと同じ文字色にするため、Chrome拡張機能のColorZillaを使用してQiita上のタブの文字色を取得します。
今回は「トレンド」タブの文字色を取得したところ、#B6B7B7でした。
テキストボックスを追加して「ポッドキャスト」と入力し、右側のパネルから文字色を先ほど取得した#B6B7B7に設定します。
今回は、文字の太さも既存のタブに近づけるため、Semi Boldに変更しました。
これで「ポッドキャスト」タブを追加できました。
変更箇所を枠で囲むと、どこを修正したのか分かりやすくなります。
「投稿する」ボタンの横に「編集する」ボタンを追加する
次に、「投稿する」ボタンの横に新しく「編集する」ボタンを追加します。
先ほど作成したデザインは、画像のように範囲選択してコピー＆ペーストで複製することで、元のデザインを残したまま変更を加えることができます。
バックアップとして残しておきたい場合にも便利です。
下部から長方形を選択し、投稿するボタンの大きさに合わせて右に設置します。
角は左カラムの角の半径から10に変更し、塗りをBackground/Warning/Default(カラーコードは#E8B931)にします。
ボタンの色と変更箇所を分かりやすくするための枠の色と被っているため、枠の色は白にしました。
その上にテキストを追加し、「編集する」と入力します。
フォントの大きさは18にし、色は黒に変更しました。
アイコンの追加方法については、次の節で行うため、ここでは省略します。
シェア欄にInstagramアイコンを追加する
次に、シェア欄へInstagramのアイコンを追加します。
Figmaへアイコンを追加する方法はいくつかあります。
代表的な方法としては、Figma Communityで公開されているアイコンセットを利用したり、Iconifyなどのプラグインを利用したりする方法があります。
Instagramでは公式のブランド素材が公開されているため、今回はMetaのInstagram Brand Resourcesからロゴパックをダウンロードして使用します。
ダウンロードしたSVGは、Figmaへドラッグ＆ドロップすることで配置できます。
Figma上では縦横比を維持したままサイズを調整し、既存のシェアアイコンに合わせて配置位置を整えます。
Figma上の情報を確認する
UIを変更した後は、作成した要素からどのような情報を確認できるのか見ていきます。
ここからは、先ほど作成したデザインを例に、確認方法を紹介します。
色を確認する
対象の要素を選択すると、右側のパネルから色を確認できます。
実装時には、この値をCSSなどで使用できます。
color: #B6B7B7;
ただし、実際の開発では同じ色がすでにCSS変数やデザイントークンとして定義されている場合があります。
そのため、新しい値をそのまま追加するのではなく、既存の定義がないか確認することも重要です。
サイズを確認する
要素を選択すると、幅と高さを確認できます。(小さくて見づらいですが29×29と書いてあります。)
コードでは以下のように指定することがあります。
width: 29px;
height: 29px;
ただし、Figma上のサイズがそのままコード上の固定値になるとは限りません。
レスポンシブ対応や既存のレイアウトによって、異なる値や指定方法が使われる場合があります。
そのため、Figma上のサイズは実装時の目安として確認し、実際のコードもあわせて確認することが重要です。
文字情報を確認する
Textを選択すると、フォントや文字サイズ、太さ、行間、文字色などを確認できます。
今回作成した「ポッドキャスト」では、以下のような設定になっています。
- フォント：Inter
- フォントサイズ：15
- 太さ：Semi Bold
- 行間：0%
- 文字色：
#B6B7B7
SVGや画像を書き出す
Figma上に配置したアイコンや画像は、Export機能を使用して書き出すことができます。
例えば、InstagramアイコンをSVGとして書き出す場合は、対象のアイコンを選択します。
その後、右側のパネルにあるExportからSVGを選択します。
書き出したSVGは、Webサイトやアプリの素材として使用できます。
FigmaではSVGだけでなく、PNGやJPGなどの形式で書き出すこともできます。
使用する場所や用途に応じて形式を選択します。
スクリーンショットを使用する場合の注意点
今回使用したQiitaの画面はスクリーンショットのため、Figmaで作成されたデザインデータとは扱いが異なります。
スクリーンショット内の各要素は個別に選択できないため、変更したい部分についてはFigma上で新しく作成する必要があります。
また、スクリーンショットから以下のような情報を直接取得することはできません。
- テキストのフォントサイズ
- ボタンの正確なサイズ
- アイコンのSVG
- 要素ごとの正確な余白
- 実際にCSSで使用されている値
今回のような方法は、Figmaの操作を練習するには利用しやすい一方で、実際にFigmaで作成されたデザインデータを扱う場合とは、確認できる情報や編集できる範囲が異なる点に注意が必要です。
まとめ
今回は、Figmaの基本的な使い方を学ぶために、Qiitaの画面をFigma上に配置し、以下の3つの変更を行いました。
- タブを追加する
- 「投稿する」ボタンの横に「編集する」ボタンを追加する
- シェア欄にInstagramアイコンを追加する
実際にUIを変更してみることで、テキストやフレームなどの基本的な機能だけでなく、要素のサイズや色をどのように調整するのかを確認できました。
また、SVGなどの素材をFigmaへ追加する方法や、作成した要素から情報を確認・書き出す方法についても学ぶことができました。
今回は基本的な操作が中心でしたが、Figma上で要素を追加・編集し、必要な情報を確認するまでの一連の流れを実際に試すことができました。
参考文献
俺のfigma
https://naoqoo2.com/blog/%E4%BF%BA%E3%81%AEFigma/
Figmaについて
https://qiita.com/saburo555/items/267600b5e35d405a3d4d
Qiitaヘルプ: メディアキット
https://help.qiita.com/ja/articles/others-brand-guideline
Instagramブランドアセットとブランドガイドライン
https://www.meta.com/ja-jp/brand/resources/instagram/instagram-brand/
お知らせ
技術ブログを週1〜2本更新中、ソーイをフォローして最新記事をチェック！
https://qiita.com/organizations/sewii