😎

【Figma】Inspectを使わずにCSSコードを取得する方法

2024/03/21に公開

CSS

Figma

Web

tech

この記事の目的

2024年に dev mode が有料化されました。

それによって、今までCSSコードを確認するのに役立てていた「Inspect」機能が無料で使えなくなりました。

しかし多くのサイトでは、「Inspect」機能を使っている画像を配置しており、情報の更新が行われていない状況です。

この記事では、Inspect を使わずに CSSコードを取得する方法を紹介します。

参考資料

方法

以下の操作で、CSS をコピーできます。

コピーしたCSS はこのようになっています。

/* Beautiful */

position: absolute;
width: 399px;
height: 116px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 96px;
line-height: 116px;

background: linear-gradient(90.79deg, #A1C4FD 0.68%, #C2E9FB 99.54%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

Figma だけでは、グラデーションの角度や位置の数値を確認できませんが、CSSをコピーすることで、確認できるようになります。

この記事の目的

方法

Discussion