How to Get Linear Gradient from Figma MCP via Cline

Question

Cline (vibe coding tool) is insisting that Figma MCP cannot provide gradient values, and is telling me the only way for it to grab gradient values is by guessing from a screenshot or having me provide directly. I can’t imagine this is the case-- or is that accurate?

drzivil · Answer

I've been diving deep into Figma's gradient system recently, and I can help explain what's going on with those confusing transform values.

The Short Answer

Those gradientTransform values are a 3x2 affine transformation matrix that positions, rotates, and scales the gradient. Figma provides an official helper function that converts these into readable handle positions:

javascript

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

const params = extractLinearGradientParamsFromTransform(paint.gradientTransform);
// Returns: { start: {x, y}, end: {x, y}, width }

If you are interessted in Figma to Dev handoffs check out our Plugin where i have implemented this functionality:
https://www.figma.com/community/plugin/1492108013732875788/figma-to-oxygen-builder-for-wordpress-ready-made

The Short Answer

Sign up

Login with SSO

Login to the community

Login with SSO