どーも！とーますです。

先日、こちらの記事を書きましたが…
（まだ読んでない方は下のリンクからどうぞ！）

Figmaの色がブラウザで変わる？原因はカラープロファイル設定

なんと、

まだ「Figmaで見たカラーと、ブラウザで見たカラーが違う！！！」

という現象が起きていました。

ブラウザのカラーは、Figmaよりもくすんで（彩度が低い）見えています。
そこで、Webチームのみんなで改めて原因を検証しました。

問題が起きていたFigmaファイルの状況

「Figma全体のカラープロファイル設定で、
元々「Display P3」だったものを「sRGB」に変更していた」

設定自体は正しいのですが……
ここに、落とし穴がありました。

Figma全体のプロファイル設定は「新規作成時」にしか適用されない

つまり、

すでに作成済みのページには設定が反映されません。

そのため、過去に作業していたFigmaファイル内のページは、
ページごとにカラープロファイルを変更する必要があります。

Figmaでページごとにカラープロファイルを変更する方法

Figmaプロジェクト内の、個別ページで「ファイルのカラープロファイル」を変更します。

① カラープロファイルを変更したい「ページ」を選択し、「sRGB」に変更

添付スクショの通りに操作し、「sRGBに割り当てる」 をクリック。

② 小ウィンドウが開くので、「外観を保持→sRGBに変換」する

「外観を保持（変換）」が選択されていることを確認し、そのまま 「sRGBに変換」 をクリックします。

これで、

・見た目の色はほぼそのまま、カラーコードは適切な値に変わる

・ブラウザ上でもFigmaと同じ色で表示される

という状態になります。

※注意１
下の 「値を保持（割り当て）」 を選んでしまうと、カラーコードが変わらない代わりに、 Figma上の色がくすんでしまうので注意してください。

※注意２
カラープロファイルをsRGBに変更して、またDisplay P3に戻すというような変更を繰り返すと、元の色に戻せなくなります。

お困りの方にとって、参考になれば幸いです！

それじゃあね～～～