Figma plugin

Work on the design system, the patterns and whole pages of your sites in Figma, and send the changes back. Your sites decide what goes live.

One client, one design system, one Figma file

Keep one design system per client and one Figma file per design system. All sites of that client follow the design system, so the file serves every one of them. Modes in Figma stay color schemes, such as light and dark; there is no mode per site. The plugin lists first the sites that follow the design system of the file and puts all others under “Other sites”.

Requirements

• A Leitvia account with Pro Agency or Pro Agency Unlimited. Every person of the team can sign in; only owners and admins release versions.
• Figma Design in the browser or the desktop app, any plan. More than one mode, for example light and dark, needs a paid Figma plan.
• Sites with Leitvia Pro and an active Pro Agency or Pro Agency Unlimited license. Under Leitvia Studio, Sync, tab Leitvia account, each site shows its next check and has a “Check now” button.

Install and sign in

Install Leitvia from the Figma Community and run it in a design file. Choose “Sign in with Leitvia”. The plugin shows a code and opens your Leitvia account in the browser. The page tells you when this sign-in was started; type the code from Figma and choose “Link Figma”. Never type a code someone sent you. Go back to Figma, the plugin signs in within a few seconds.

A sign-in lasts 14 days. Your Leitvia account lists every sign-in under Design systems, section Figma plugin, where you can revoke one when a device is lost or a person leaves the team.

The six steps

The plugin opens on “Pages” and shows a line “Next step” at the top of the tabs Pages, Patterns and Design system, so you always know what comes next.

1. Send a page to Figma

In WordPress, open Pages or Posts and choose “Send to Figma” in the row of the page; “Send to Figma with images” adds the images of the media library, reduced to 1200 pixels. A pattern goes from the Lab, panel Figma. A site that follows no design system yet saves its token set as a design system with its first “Send to Figma”, named after the site. You need no other preparation.

2. Build the page

In the plugin, under “Pages”, pick the page and choose “Build page”; if it is not listed yet, choose “Refresh list”. In a file without Leitvia variables the plugin loads the design system of the site first. If the file holds another design system or version, the plugin asks: “Load version N” loads the version the site runs, “Build as the site looks” uses the colors and fonts of the site as fixed values, and “Use this file’s design” uses the variables of the file. Pages of sites that follow the design system of the file come first; everything else is under “Other sites”.

You get a frame 1440 pixels wide. Sections that use a pattern are instances of a main component on the Figma page “Leitvia patterns”. Parts Figma cannot draw, such as query loops, navigation, shop, forms or blocks of other plugins, appear as a locked view named “view only”. Inside a section, a table or another block the plugin has no shape for shows as a locked view of how the site renders it. Images keep the aspect ratio of their block. If a font of the site is not installed, the plugin lists it with a link to Google Fonts and builds only when you choose to.

3. Design

Change texts right in the page. Change the look of a pattern in its main component, so every page with that pattern follows. Change colors, sizes and spacing in the variables: values, not names, because the names are the roles sites know. If you changed the look on the page instead, the review lists that instance with “Take into main component”. Without it, style changes on a single instance stay in Figma.

4. Review changes and send

Select the page frame and choose “Review changes”, or “Review all pages” for every page built with Leitvia in the file. The plugin groups what changed:

• Design system: the variables that differ from the connected version. They are saved as the next version.
• Patterns: changed main components. Each becomes a pattern draft in the Lab of the site the page came from.
• Page: changed texts, order and sections. They go as one change to the Inbox of the site the page came from.

“Values to decide” come first: values that use no variable. Take the variable the plugin suggests or ignore each one. “Send to site”, or “Send to sites” after “Review all pages”, then does everything in one go and reports the result for each group; a group that fails does not stop the others. To send a single frame as a pattern draft, select it and use “Send to sites” under “Patterns”.

5. Apply in WordPress

Each site picks up what is meant for it with its next check. The tab Leitvia account shows the time of the next check; while something between the site and Figma is open, the site checks every hour, otherwise twice a day, and “Check now” fetches at once. In Leitvia Studio, Agents, tab Inbox, the notice “From Figma” lists what arrived. Open a change, look at the preview and the differences, then choose Apply or Decline. A change from Figma always waits in the Inbox, whatever the autonomy settings say; an applied change can be rolled back there. Pattern drafts are on no page until someone approves and places them in the Pattern Lab.

Your team can keep working in WordPress while the page is in Figma. The change from Figma is merged section by section with the page as it is now: a section only Figma changed takes the Figma design, a section only WordPress changed keeps the WordPress version, and blocks added in WordPress stay where they are. When both changed the same section, the change keeps WordPress and names the section, and a second change ending in “Figma” holds the page as it is in Figma. Apply one of them; the other can no longer be applied.

A page always goes back to the site that sent it, and only while that site still follows the design system the page was built with. If two designers send the same page while the site has not taken the first one yet, the second gets a notice and replaces the first only when they send again.

6. Follow the status

Every page and pattern sent from Figma has a status: sent, waiting in the Inbox (for a pattern, a draft in the Lab), then applied (approved) or declined, each with its time and a link to the site. The plugin lists it under “Sent from Figma” in the tabs Pages and Patterns; owners and admins also see it under Fleet in the Leitvia account. A declined change names the reason the site gave.

Design system and release

Under “Design system” you choose the design system of the file and “Connect this file”. The plugin creates one variable per role, for example color/surface, fontSize/body or spacing/m, an effect style per shadow and a text style per font size. The top line says which design system the file holds, its version and how many sites follow it, for example “Brand · Design system v7 · 2 sites”. When a newer version exists, the button says “Update to version N”.

“Check contrast” tests the color pairs of Leitvia Studio against WCAG 2.2 AA. “Save version” stores the variables as the next version in your Leitvia account; while a color pair fails, nothing is saved, and no site changes. A new design system starts under “Start a new design system” with a name and “Create design system”, or in WordPress with “Save as design system” under Leitvia Studio, Sync, tab Leitvia account.

Owners and admins of your team release a saved version under “Design system” in the plugin or under Fleet in the Leitvia account: choose the version and the sites. Release to one site first, check it there, then release to the rest; to roll back, release an earlier version. Members see “Waiting for release by an admin”, and the Leitvia account lists such a version as “Saved, not released”. Each site gets a released version as a change in its Inbox.

Code Connect and AI agents

If you work with the Figma MCP server and an agent such as Claude, connect the Leitvia patterns with Code Connect. Dev Mode and the MCP server then show the block markup of a pattern with the texts of its instance instead of React code. You need Figma Professional or higher with a Dev or Full seat; Professional allows one library and one framework.

1. In the tab Patterns, open “Pattern library for Code Connect” and choose “Build pattern library”. Every pattern of the theme and of Leitvia Pro becomes a component with text properties on the Figma page “Leitvia patterns”.
2. Publish the file as a library of your team.
3. Paste the link of the file and choose “Download Code Connect files”.
4. Run the script build-code-connect.mjs of the skill leitvia-figma in Leitvia Pro on the download, then npx figma connect publish in the folder it wrote.

The skill leitvia-figma tells your agent the rules: a snippet of Leitvia is taken as it is, a frame without one becomes the closest pattern or a new pattern draft in the Lab, and values are only roles of the design system. Nothing goes live from Figma.

Loops and data

Query loops, entry lists and product collections arrive in Figma as what they are. Fields such as the post title or the featured image show as “[Post title]” or an image placeholder, and their layer says [data]. You design the entry of a loop once; its copies are locked and only show the rhythm. The text “Loop count” holds how many entries the loop shows: change it, and the site takes the new number. In a grid, the number of columns of the entry goes back too. The fields stay fields, so the site keeps filling them with its posts, events or products.

What does not travel

• Images from Figma. The site keeps its images; new sections get gray placeholders and say so.
• Inline formatting such as links or bold in a text you changed. The change in the Inbox names each case.
• Locked parts of a page, such as navigation or forms. They come back exactly as the site sent them.
• Colors outside sRGB. They arrive as the nearest sRGB color.

Shortcuts in Figma

The plugin has four tabs in the order of the work: Pages, Patterns, Design system and Account. Each has a status line and a short “Help”, and all but Account start with the line “Next step”. In the Plugins menu, Leitvia offers Open Leitvia, Design system, Build page, Review changes, Review all pages, Send selection to sites and Build pattern library. Layers the plugin built carry a button in the properties panel: “Review changes” on a page, “Send to sites” on a pattern. In Dev Mode the plugin only reads; build, connect, save and send in Design mode.

Privacy

The plugin talks only to leitvia.com. It sends the variables of the design system, your note and, when you send a frame or a page, its structure and texts, nothing else from the file. A page sent from WordPress carries its structure, texts and, only if you choose it, reduced images. Your Leitvia account keeps a page or pattern until the site picked it up, then only a status line with the times and the reason the site gave, all of it at most 90 days. The sign-in token stays in the local storage of Figma on your device; the account stores only a hash of it. The Code Connect files are a download on your computer; the plugin sends nothing for them, and the Code Connect command of Figma publishes them with your own Figma token. Details are in the privacy policy.