Figmaがダークモードに対応。背景色設定も簡単、目に優しい！
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Figmaがダークモードに対応。
無料プランでも十分に使えるデザインツール「Figma」がついにダークモードに対応している。
以前からブラウザ版では拡張機能の「Dark Reader」で対応できていたが、インストール版でもダークモードでデザインができるようになった。
※後日追記）
ブラウザ版も同じ手順でダークモードに切り替え可能になりました。
Figma（インストール版、ブラウザ版）の設定手順。
テーマの選択方法。
左上の「Main menu（メインメニュー）」から、「Preferences（基本設定）」 > 「Theme（テーマ）」を選択。
Figmaはすでに日本語化もされているので、日本語の場合は「基本設定」 > 「テーマ」で選択できる。
ここで、ダークモードやライトモードを選べる。OSの設定に合わせたい場合は「System theme（テーマ）」を選択する。
ダークモードの設定はこれだけ。設定は次回以降も保存される。
「基本設定」のショートカット。
- Mac：「Command」 + 「,（カンマ）」
- Win：「Ctrl」 + 「,（カンマ）」
この基本設定や環境設定のショートカットは、VSCodeなど他のアプリケーションでも多々共通しているので覚えておくと便利だと思う。
Figmaの背景色の設定と、Dark Reader。
背景色、背景透過の設定方法。
右側の「Design（デザイン）」のパネルから、「Background（背景）」で背景色の設定ができる。透過も可能。
例）
背景色を#333333にした場合。
もし、「Background（背景）」の項目が表示されていない場合は、フレーム外の何もないところをクリックするとパネルが切り替わる。
背景色を透過（透明）にしたい場合。
カラーパネルの透明度のスライダーで調整可能。
カラーパネルは、Background（背景）の16進数のカラーコード左側にある四角形のアイコンをクリックすると現れる。
Dark Reader。
パソコンで長時間作業をしている場合、目の保護のためにも「Dark Reader」のインストールがおすすめ。ChromeやFirefoxでは無料で使える。
インストール方法は、下記のメモに。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
