- 2 days ago
- 4 min read
StyleSync - Import Design Tokens & Styles into Framer
StyleSync is a Framer plugin that extracts actively-used styles from your Figma files, design token files, and websites, and imports them directly into Framer as native color and text styles. No manual copying, no missed tokens, no mismatched values.
What StyleSync Does
Every design workflow involves moving styles between tools. Designers maintain color palettes and typography in Figma, developers define tokens in CSS or JSON, and production sites carry their own computed styles. Getting those values into Framer accurately and quickly is tedious work done manually.
StyleSync automates that transfer. It reads your styles from wherever they live, shows you a preview with full control over what gets imported, and injects only the styles you select directly into your Framer project as native color styles and text styles, accessible from any element in the canvas.
Import Methods
StyleSync supports three distinct import methods, each designed for a different point in your workflow.
Figma File Import
Paste any Figma file URL and StyleSync scans the entire document for actively-used styles. Rather than pulling every style defined in the file including unused library styles, StyleSync walks the document tree and extracts only the styles that are actually applied to elements. This keeps your Framer style panel clean and relevant.
Supported:
Fill colors and solid color styles
Typography styles including font family, size, weight, line height, and letter spacing
Both local styles and shared library styles in use
To use Figma import you will need a Figma Personal Access Token. You can generate one in Figma under Settings → Security → Personal access tokens. Name it anything, copy it, and paste it once into StyleSync. It is stored locally and never transmitted to any third party.
Upload File
If your team works with design tokens in code, upload your token file directly. StyleSync parses the file client-side and extracts all color and typography values.
Supported formats:
CSS files — extracts custom properties from :root, resolves var() references, handles clamp() values
JSON files — supports Tokens Studio format, Figma Variables export, and W3C Design Tokens specification
Drag and drop your file or click to browse. StyleSync auto-detects the format and parses it immediately.
Paste Code
Skip the file entirely and paste CSS or JSON directly into the plugin. Useful for copying styles from a codebase, a Storybook, or a design system documentation site. StyleSync auto-detects whether the pasted content is CSS or JSON and processes it accordingly.
Website URL
Enter any public website URL and StyleSync extracts the CSS custom properties and computed color and typography values from the live site. Useful for matching an existing brand's styles or importing from a live design system documentation site.
Style Preview and Selection
Before anything is imported you see a full preview of every extracted style. Each style shows its name, value, and a visual swatch for colors or a type sample for text styles.
You can:
Select individual styles using checkboxes
Use Select All / Deselect All
Review exactly what will be imported before committing
Only the styles you select are imported. Nothing is written to your Framer project until you confirm.
What Gets Created in Framer
StyleSync creates native Framer styles, not overrides or custom properties. After import:
Color styles appear in your Framer color panel, available from any fill, stroke, or background picker
Text styles appear in your Framer text styles panel, applicable to any text element
Styles are named exactly as they appear in the source file, preserving your naming conventions and token hierarchy.
Pricing
StyleSync is free to start with a usage limit on the free tier.
Plan | Price | Imports |
Free | $0 | 3 imports/month |
Monthly | $9/month | Unlimited |
Yearly | $49/year | Unlimited (save 54%) |
Lifetime | $89 one-time | Unlimited forever |
Usage is tracked server-side, tied to your Framer account. Upgrading to Pro unlocks unlimited imports across all three import methods.
How to Get Started
Install StyleSync from the Framer Marketplace
Open any Framer project
Go to Plugins → StyleSync
Choose your import method
Preview and select your styles
Click Import
How to Get a Figma Access Token
For Figma file imports StyleSync requires a Personal Access Token. Here is how to generate one:
Open Figma and click your avatar in the top left
Go to Settings
Scroll to Security
Under Personal access tokens click Generate new token
Give it a name like "StyleSync"
Copy the token and paste it into StyleSync
The token is stored locally in your browser and is only used to read your Figma file. It is never sent to Visuvate servers.
Frequently Asked Questions
Does StyleSync import all styles in a Figma file?
No. StyleSync only extracts styles that are actively applied to elements in your file. Unused library styles are ignored, keeping your import clean.
Can I use StyleSync without a Figma account?
Yes. The Upload File and Website URL methods work without any Figma connection.
What happens to my Figma token?
Your token is stored locally in your browser only. It is used exclusively to read file data from Figma's API and is never transmitted to Visuvate.
Does importing overwrite existing Framer styles?
No. StyleSync creates new styles. If a style with the same name already exists in Framer it will be added alongside it, not replaced.
I upgraded my plan. How do I activate Pro?
After purchasing you will receive a license key by email. Open StyleSync, click the gear icon, go to Account, and enter your license key.
Built by Visuvate
StyleSync is built and maintained by Visuvate, a web design and development studio specialising in Framer and Wix Studio. We build tools for designers and developers who care about workflow quality.
Comments