Figmaでデザインする際のちょっとしたコツ

こんにちは。デザイナーのむろおかです。普段は主にアプリやWebサイトのデザインをしています。

社内のデザイナーはそれぞれの別の案件に関わっているので、困った部分や学んだ知識を気軽に共有できるようデザイナー全体での雑談・相談会を設けています。

今回はそんな雑談で話題に上がった『Figmaでデザインする際のちょっとしたコツ』を3つご紹介します。


色指定

アプリやWebサイトは2,3色程度の基本色+グレーの構成が多いと思います。

メインカラーが決まった後、カンプ作成を進めるとhoverしたときや、うっすら背景に色を付けたい時など用途に合わせて色が増えていくので、カンプ上で管理する必要が出てきます。

社内のデザインカンプはFigmaで作成しており、Figmaの機能『Color Style』で色を管理しています。Color Styleに登録した色を使えば、少しだけ調整したい場面でも一括で変更ができるのでとても便利です。

メインカラーはもちろんですが特にグレーに注意しています。グレーは見た目で違いが分かりにくいため、色がブレがちです。

サービスを運営していく中で改修や追加が発生した際、同じデザイナーが作業するとは限らないため、追加作業を重ねるうちにどんどんと色数が増えてしまうことがあります。

f:id:bookwalker_writer:20220117185355p:plain

全体の統一感につながるため、カンプで全ての色を把握できる状態にしておくのが望ましいです。


font-family

例えばfont-familyが下記のような場合。

font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

macで表示されるのは、英数字がHelvetica、和文がHiraginoです。カンプ作成中、英数字だけHelveticaになることを忘れているとカンプと実装で見た目がズレてしまいます。

f:id:bookwalker_writer:20220117214638p:plain

文中に英数字が混じる程度ならあまり問題ありませんが、値段や日付は数字が目立つ部分なので、上記の指定ならカンプでもHelveticaを使ったほうが良いです。

また、iosアプリでは英数字がSan Francisco、和文がHiraginoで表示されるのですが、このHiraginoはすこし特殊で実機で見るとカンプより1pxほど小さいサイズになってしまいます。

カンプと差異が出てしまうので、アプリではカンプのpx+1pxの文字サイズで実装しています。


カンプの確認

Figmaではプレビュー、もしくは『Figma Mirror実際の大きさを確認します。
(Figma Mirrorは選択中のフレームを別端末で確認できる機能です

SPサイト・アプリはサイズ感が分かりづらいので、Mirrorでスマホの画面を見ながら調整しています。

気をつけたいのは、SPサイトでは実際はブラウザの枠が追加されるという点です。簡単でも良いので枠を設置しておくと、Mirrorで見たとき正確に確認できます。

f:id:bookwalker_writer:20220117214647p:plain

まとめ

以上、『Figmaでデザインする際のちょっとしたコツ』でした。

個人的に「ここはこうすればよかったんだ〜」と、印象深く覚えている箇所をまとめたので少し細かい内容になりましたが、こういった細部への注意がひいては良いアウトプットにつながると思っています。

この記事を読んだ方にも、新しく気づいた点があれば幸いです。