How to convert Figma Gradient to CSS Gradient

Apirak · May 4, 2022, 7:17am

I’m trying to convert a Figma Gradient into a CSS Gradient. I figured out how to calculate degrees, but I can’t figure out how to calculate the CSS stop position .

It appears that Figma and CSS have different way to calculate stop positions.

How to convert Figma Stop position to CSS Stop position?

Position 0 => -42.51%
Position 0.3958… => 31.41%
Position 1 => 144.22%

My code convert only when start,stop of Figma and CSS are in the same position:

gist.github.com

https://gist.github.com/apirak/7cc499526fedea64d3a3b614cb18c46d

gardientUtility.ts

import { colorToRgb, rgbToHex } from "./colorUtility";

function convertToDegree(matrix:Transform):number {
  const values = [...matrix[0], ...matrix[1]];
  const a = values[0];
  const b = values[1];
  const angle = Number(((Math.atan2(b, a) * (180 / Math.PI)) + 90).toFixed(2));

  return angle <= 0 ? angle + 360 : angle;
}

This file has been truncated. show original

Nushaine_F · June 10, 2022, 2:36pm

Hi Apirak,

If you’re using the node object from a Figma Plugin, I highly recommend using this function:

import { extractLinearGradientParamsFromTransform } from "@figma-plugin/helpers";

If you’re using the Figma API, it’s a little more tedious. I implemented this before (its not always perfect, the angle gets messed up sometimes), but you can check out my code here.

I hope this helps

Nushaine_F · June 10, 2022, 2:43pm

the code is quite long since you have to a couple of tedious linear transformations if the node itself is rotated (gets even more annoying if the gradient & node is rotated).

Michael_Yagudaev · October 5, 2022, 6:18pm

Below are a couple of links that should be extremely helpful in filling in the blanks.

I’ve created a plugin for CSS Gradient => Figma Gradient and found them useful. In particular, the W3C documentation is really helpful and has formulas to use.

Gradients Compared between Figma, Sketch and CSS: Gradient angles in CSS, Figma & Sketch

W3C Spec for Gradients: CSS Images Module Level 3

CSS Gradient to Figma Plugin: GitHub - yagudaev/css-gradient-to-figma: Plugin to insert a CSS Gradient into Figma

Figma REST API Handle Positions to Figma Plugin Transform: Figma convert `gradientHandlePositions` to `transformGradient` and vice-versa · GitHub

Honky · October 15, 2022, 12:57pm

Thank you so much!!! Its really hard, How about radial?)))

Michael_Yagudaev · July 2, 2023, 10:34pm

I’d love some help on getting the Radial’s done . Someone else asked me recently about it too.

Surveme · September 24, 2023, 7:56pm

github.com

figma-plugin-helper-functions/figma-plugin-helpers/blob/9dc7b9843a2185b81011df0278e2fcd68b4c2f12/src/helpers/extractRadialOrDiamondGradientParams.ts

import matrixInverse from 'matrix-inverse'
import { applyMatrixToPoint } from './applyMatrixToPoint'

/**
 * This method can extract the rotation (in degrees), center point and radius for a radial or diamond gradient
 *
 * @param shapeWidth
 * @param shapeHeight
 * @param t
 */
export function extractRadialOrDiamondGradientParams(
	shapeWidth: number,
	shapeHeight: number,
	t: number[][]
) {
	const transform = t.length === 2 ? [...t, [0, 0, 1]] : [...t]
	const mxInv = matrixInverse(transform)
	const centerPoint = applyMatrixToPoint(mxInv, [0.5, 0.5])
	const rxPoint = applyMatrixToPoint(mxInv, [1, 0.5])
	const ryPoint = applyMatrixToPoint(mxInv, [0.5, 1])

This file has been truncated. show original

Topic		Replies	Views
How to export figma gradients to CSS or Webflow Ask the community	1	3788	February 20, 2024
Plugin API to convert gradient paint styles to CSS Plugin and Widget API	1	1643	June 5, 2024
How to set the linear gradient position with Percent value in figma？ Share an idea figma	5	609	November 13, 2023
Best way to get an animated mesh gradient to CSS? Ask the community	4	591	August 12, 2024
Calculate Gradient Transform for SVG linear gradient Plugin and Widget API	2	831	July 12, 2023

How to convert Figma Gradient to CSS Gradient

Related topics