WORD FLOW
A Figma plugin that turns any keyword into a 3-color gradient using Gemini. Type "beach" and it decomposes the word into sand + water + sky, maps each to a real-world color, and drops a gradient-filled shape onto the canvas — rectangle, ellipse, or polygon, at any angle.
Overview
Word Flow is a Figma plugin I built to remove the guesswork from gradient creation. Instead of picking colors by eye and hoping they feel right, you type a keyword — "sunset", "forest", "lava" — and the plugin returns a 3-color gradient grounded in what that thing actually looks like in the real world. The plugin runs entirely inside Figma. Pick a shape, set an angle, hit create — a gradient-filled node appears on the canvas, ready to use.
Install on Figma Community
Word Flow is live on the Figma Community. Add it to your plugins and start generating gradients from keywords inside any Figma file.
Open on Figma Community →My Role
I designed and built the plugin end-to-end: • Product direction and UI design • Prompt engineering for the Gemini call • Plugin architecture (React UI + Figma plugin runtime) • Gradient transform math to match CSS linear-gradient semantics inside Figma's coordinate system • Packaging and distribution
The Idea
Most gradient tools give you a color picker and call it a day. That's fine if you already know what you want, but it puts the hard part — choosing three colors that feel coherent — back on the user. I wanted a tool that worked the other way around: describe the feeling or the object, let the tool propose a starting point, and iterate from there. Keywords are how designers already think about mood boards and references. The plugin just extends that vocabulary into color.
How It Works
The flow is intentionally short: 1. Type a keyword — "ocean", "wavy", "copper", anything 2. The plugin sends it to Gemini with a prompt that forces visual decomposition: break the keyword into 2–3 physical elements, assign each a real-world color, return hex codes + a one-line rationale 3. The preview updates live with the returned gradient 4. Pick a shape (rectangle, ellipse, polygon), drag the angle dial, and hit Create 5. Figma drops the gradient-filled node onto the canvas, selected and scrolled into view The rationale line is the part I'm most happy with. Instead of a black-box color suggestion, you see "Sand + Water + Sky → Brown + Blue + Light Blue" — which tells you why the gradient looks the way it does, and makes it obvious how to nudge the keyword if it's off.
The Prompt
The Gemini call does a lot of work. The prompt is tuned to avoid the two failure modes I kept hitting during testing: • Abstract color psychology — if you ask for "energy", a naive model will give you a random vibrant palette. The prompt forces literal visual decomposition first, falling back to abstract mapping only for purely emotional keywords • Inconsistent output — the model returns strict JSON with exactly three hex codes and a `thought_process` field. Anything else gets rejected and mocked The examples embedded in the prompt (Beach, Forest, Sunset, Fire, Ocean, Desert, Night, Snow, Lava, Grass) anchor the model to the kind of output I want — concrete nouns mapped to concrete colors.
The Tricky Bit — Gradient Transforms
Figma's gradient API doesn't speak CSS. It uses a 3×3 transform matrix that rotates gradients around the top-left corner, not the center — so a naive rotation makes the gradient drift off the shape as you change the angle. I had to derive the matrix by hand: translate to center, rotate, translate back, then feed the result into `GRADIENT_LINEAR` with `gradientTransform`. The angle dial in the UI maps 1:1 to CSS linear-gradient semantics so the preview and the final shape match.
Bring Your Own Key
The plugin uses the user's own Gemini API key (free tier works fine). Keys are stored in `figma.clientStorage`, not in my infrastructure — I never see them, and there's no server in the loop. If no key is set, the plugin falls back to a deterministic hash-based mock generator so the UI still works end-to-end. This made development and demos dramatically easier, and it's a graceful failure mode for first-time users who just want to see what the plugin does.
Tech Stack
• React 19 + TypeScript for the plugin UI • Vite + `vite-plugin-singlefile` to bundle the UI into a single HTML payload (Figma plugins load UI as an inline HTML blob) • esbuild for the Figma-side `code.ts` bundle that has access to the `figma` global • Tailwind 3 for styling • Gemini `gemini-flash-latest` for color generation • Figma Plugin API for shape creation, gradient fills, and client storage
Reflection
This one started as a "one weekend" project and became a lesson in how much of plugin work is not plugin work. The Figma API is well-documented but opinionated — matrix transforms, typed fills, sandboxed execution, postMessage channels between UI and code. Once you accept those constraints, the actual feature is small: an input, a call, a shape. The surprise was how much the rationale line changed the feel of using it. A color picker feels mechanical. A gradient that tells you "I picked these because forests have dark bark, green leaves, and moss" feels collaborative. That's the kind of interaction I want more of in creative tools — ones that explain themselves instead of just producing output.