Figmaがダークモードに対応。背景色設定も簡単、目に優しい!ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

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

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

Figmaがダークモードに対応。

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

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

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

後日追記)

petsブラウザ版も同じ手順でダークモードに切り替え可能になりました。


Figma(インストール版、ブラウザ版)の設定手順。

テーマの選択方法。

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

Figmaの設定画面。

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

ここで、ダークモードやライトモードを選べる。OSの設定に合わせたい場合は「System theme(テーマ)」を選択する。

ダークモードの設定はこれだけ。設定は次回以降も保存される。

「基本設定」のショートカット。

  • Mac:「Command」 + 「,(カンマ)」
  • Win:「Ctrl」 + 「,(カンマ)」

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


Figmaの背景色の設定と、Dark Reader。

背景色、背景透過の設定方法。

右側の「Design(デザイン)」のパネルから、「Background(背景)」で背景色の設定ができる。透過も可能。

例)

背景色を#333333にした場合。

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

Figmaの背景色を変更。

背景色を透過(透明)にしたい場合。

カラーパネルの透明度のスライダーで調整可能。

カラーパネルは、Background(背景)の16進数のカラーコード左側にある四角形のアイコンをクリックすると現れる。

Figmaの背景色を変更。透明、透過に。

Dark Reader。

パソコンで長時間作業をしている場合、目の保護のためにも「Dark Reader」のインストールがおすすめ。ChromeやFirefoxでは無料で使える。

petsインストール方法は、下記のメモに。

参考メモ:Dark Readerのインストールと使い方。ダークモードで目を大切に!

Figmaがダークモードに対応。背景設定も簡単で、目に優しい!

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


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

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

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。