Figma Variables from Image
Figma Variables from an image are named color variables generated from dominant hues in a photo, then imported into Figma so components share the same codes as design tokens and CSS. PhotoTones Pro ($7/month) exports Figma Variables JSON and Tokens Studio JSON — privately, in your browser.
Create Figma Variables from a Photo in 3 Steps
- Upload a reference image to PhotoTones — no server upload
- Click “Generate Color Palette” — up to 12 colors on Pro
- Copy Figma Variables JSON or Tokens Studio JSON with PhotoTones Pro and import into Figma
Import photo colors into Figma Variables
Figma Variables JSON + Tokens Studio JSON — $7/month. Or download the full brand kit ZIP with a figma/ folder included.
Export Formats for Figma
- Figma Variables JSON — structured color variables for Figma’s native Variables panel
- Tokens Studio JSON — for the Tokens Studio for Figma plugin and token-driven teams
- Hex list — quick clipboard paste into color styles (free tier can copy hex manually)
Pair with design tokens from an image so engineering receives the same values designers see in Figma.
Import Path
Variables panel: Open Local Variables in your Figma file and import or paste the JSON. Map collections (e.g. Brand / Primary) and bind fills to variables instead of hardcoded hex.
Tokens Studio: Install the plugin, import the Tokens Studio JSON, and sync to Figma variables for live component previews.
Longer walkthrough with eyedropper comparison: Figma colors from a photo.
Free Hex Paste vs Pro JSON Export
Free PhotoTones extracts up to 6 colors — copy hex into Figma styles by hand. Pro unlocks one-click Figma Variables JSON, Tokens Studio JSON, extended palettes, and the brand kit ZIP with a ready figma/ folder.
Stop eyedropper sampling
Deterministic palette → Figma Variables in one export. Less than one billable hour at $7/month.
Frequently Asked Questions
What are Figma Variables from an image?
Figma Variables from an image are named color variables created from dominant hues extracted from a photo, then imported into Figma so components use the same codes as design tokens and CSS. PhotoTones Pro exports Figma Variables JSON and Tokens Studio JSON from your palette.
Do I need PhotoTones Pro for Figma Variables JSON?
Yes. One-click Figma Variables JSON and Tokens Studio export require PhotoTones Pro at $7/month (cancel anytime). Free users can still copy hex codes and paste them manually into Figma color styles.
How do I import PhotoTones JSON into Figma?
Copy Figma Variables JSON from PhotoTones Pro and import or paste it into Local Variables in your Figma file. For Tokens Studio, open the plugin, import the Tokens Studio JSON export, and sync to Figma variables.
Does PhotoTones have a Figma plugin?
No live plugin connection. The workflow is extract in the browser, copy JSON, and import into Figma — which keeps image processing private and avoids uploading client photos to a third-party plugin host.
Can I get a full brand kit with Figma files included?
Yes. PhotoTones Pro brand kit ZIPs include a figma/ folder with Variables and Tokens Studio JSON plus the print-ready guide, design tokens, theme CSS, and Adobe ASE.