Figma
Pro
Integration
output
0.3.0
#Description
A virtual component that represents all the elments selected in the Figma plugin. This one allows you to manipulate any layer in Figma with your hardware. Go to the plugin site to read more about it.
This component requires the blokdots Figma plugin and the Figma desktop app. This component does not yet support code export.
#Functions
#Figma Plugin
You can get the blokdots Figma plugin in the Figma Community.
#Examples
Figma Integration
This walkthrough shows how to use hardware to control UI in Figma by using the blokdots Figma integration.
#JavaScript / Node.js
Class
FigmaIntegrationextends EventEmitterIntegration that sends commands to Figma prototypes and receives interaction events from them.
#Methods
sendReaction(message: ReactionMessage)Send a reaction command to the connected Figma prototype.
cleanUp()Disconnect from the Figma integration server and release resources.
setText(parameters: { layer: string } & TextReactionMessage["parameters"])Set the text content of a Figma layer.
setColor(parameters: { layer: string } & ColorReactionMessage["parameters"])Set the fill colour of a Figma layer.
#Example
JavaScript
import { Board, FigmaIntegration } from "@blokdots/components";
const board = new Board("/dev/ttyACM0");
await board.open();
const figmaIntegration = new FigmaIntegration();