FigmaでCSSのコードを取得する

Figmaのデザインデータからコーディングを行う際、グラデーションなどのややこしい設定をCSSコードとして取得する方法をメモ。

取得方法

例として長方形を作成して、以下のようなグラデーションを設定します。

要素を選択した状態で右クリックして、コピー/貼り付けオプション > コードとしてコピー > CSS を選択します。

以下のようなコードがコピーできました。

/* Rectangle 1 */

position: absolute;
width: 270px;
height: 130px;
left: calc(50% - 270px/2 - 0.5px);
top: 90px;

background: linear-gradient(180deg, rgba(255, 0, 0, 0.6) 0%, rgba(0, 0, 255, 0.6) 33%, rgba(255, 255, 255, 0) 100%);

FigmaでCSSのコードを取得するデモページ