Brua
GitHub: Meginhufr/brua-figma-plugin

Figma plugin

Publish a frame or a component from Figma into a change set, with alt text, and let the layer remember its asset.

The plugin is the designer's side of Brua. It needs a Brua account with a role in the project, which is the one place in the docs where a sign-in appears; the developers on the team need none.

Install

The plugin is in review on the Figma Community; once approved, it installs from there like any other. Until then, run it as a development plugin in the Figma desktop app, which the browser version can't do: clone the repository, run npm install and npm run build in it, then in any design file choose Plugins → Development → Import plugin from manifest and pick its manifest.json.

Publish a frame

Run the plugin, sign in with your Brua account the first time (with the code from your authenticator app after the password, if you have two-factor on), and pick the project to publish to from the ones you have a role in. Select a frame or a component, check the asset id the plugin suggests from the layer's name, write the alt text in each of the project's languages, or take the text the plugin found in the layer, or mark the image decorative, and press Publish for review.

The plugin exports the layer at 2×, uploads it, waits while every size and format is made, and puts the new version in a change set. Nothing goes live from the plugin alone: an approver merges the change set in the back office, and the diff there shows what changes for the people showing the asset, including a warning when the proportions differ from what is in production.

What the layer remembers

The layer keeps its asset. Selecting it again shows the asset, a preview, and links to it in the back office and on the edge, which Figma opens in the browser. Publish again and it becomes a new version of the same asset; the alt text is kept only if you confirm the image still means the same. A layer stays with its asset's project, whichever project the window shows. Forget the link to start over.

On a component or a component set, the plugin also writes the asset's id, version, project and link into the component's description and adds the link as its documentation link, so anyone who selects the component sees them in Figma's design panel without the plugin.

Dev Mode

In Dev Mode the file is read-only, so the plugin shows the Brua asset the selected layer is linked to, its id, version and a preview, and the layer carries a Dev Resource link to the asset's page in the back office. Switch to Design mode to publish.

Next