Figmaがダークモードに対応。設定方法は簡単で、目に優しい!|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

Figmaがダークモードに対応。設定方法は簡単で、目に優しい!

ダークモードで目を優しく。

Figmaがダークモードに対応。設定方法は簡単で、目に優しい!

Figma(インストール版)がダークモードに対応。

デザインツール Figmaのロゴ。

無料プランでも十分に使えるデザインツール「Figma」がついにダークモードに対応している。

以前からブラウザ版では拡張機能の「Dark Reader」で対応できていたが、インストール版でもダークモードでデザインができるようになった。

設定方法は、以下の通りで超簡単。


Figma(インストール版)の手順。

テーマの選択方法。

左上の「Main menu(メインメニュー)」から、「Preferences(環境設定)」 > 「Theme(テーマ)」で選択。

Figmaの設定画面。

Figmaはすでに日本語化もされているので、日本語の場合はおそらく「環境設定」>「テーマ」で選択できる。

ダークモードかライトモードかを選べる。OSの設定に合わせたい場合は「System theme(システムのテーマ)」を選択。

「環境設定」のショートカットは、、、

  • 「Command」 + 「,」 (Mac)
  • 「Ctrl」 + 「,」 (Win)

このショートカットはVSCodeなど、他のアプリケーションでも多々共通しているので覚えておくと便利だと思う。


Figma(ブラウザ版)の手順。

背景色の設定方法。

右側のDesignのパネルから、「Background」で背景色の設定ができる。

Figmaの設定画面。

もし、「Background」の項目が表示されていない場合は、フレーム外の何もないところをクリックするとパネルが切り替わる。

Dark Reader。

もし「Dark Reader」がインストールされていない場合は、インストールをおすすめする。Figmaのパネルがダークモードとなるのだ。

インストール方法は、下記のメモにまとめました。

参考メモ:Dark Readerのインストール手順。長時間の光に気をつけ、目を大切に。


以上、参考になれば幸いです。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。