From figma-friend
Runs Figma plugin API JavaScript in open design files to create shapes, modify properties, extract data, and manage slots. Requires user login and file access.
npx claudepluginhub markacianfrani/claude-code-figma --plugin figma-friendThis skill is limited to using the following tools:
This skill allows you to interact with Figma to assist with various design tasks.
Mandatory prerequisite skill for `use_figma` tool calls to execute JS in Figma files. Enables node create/edit/delete, variables/tokens setup, component building, auto-layout changes, property binding, and programmatic file inspection.
Loads mandatory prerequisite context before every use_figma tool call for Figma writes or JS-executed reads like node edits, variable setup, component building, or file inspection.
Generates Figma components or screens from requests like 'make a button' or 'design a settings page'. Compiles CSpec to scene graph, executes via MCP, and verifies output.
Share bugs, ideas, or general feedback.
This skill allows you to interact with Figma to assist with various design tasks.
You'll be interacting with Figma via the web browser. First, you'll want to
navigate_page tool to go to Figma's website. Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file.evaluate_script to confirm that you have access to the figma global object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see evaluate_script tool to run JavaScript code that interacts with the Figma plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file.Slots are a component property type that creates flexible placeholder areas inside components. Designers can add, edit, and arrange content in instances without detaching.
Note: As of March 2026, the Slots API is undocumented in the official plugin API reference. The ComponentPropertyType docs still only list BOOLEAN, TEXT, INSTANCE_SWAP, and VARIANT — but the runtime fully supports SLOT.
// On a ComponentNode:
const slot = component.createSlot(); // empty slot, auto-named "Slot"
const slot = component.createSlot(frame); // converts existing frame child to a slot
createSlot() returns a SlotNode (type: "SLOT"). It behaves like a frame — it has all layout, fill, stroke, corner radius, and sizing properties.
A slot supports the same properties as a FrameNode:
layoutMode, primaryAxisSizingMode, counterAxisSizingMode, paddingTop/Right/Bottom/Left, itemSpacingwidth, height, layoutSizingHorizontal, layoutSizingVertical, minWidth, minHeight, maxWidth, maxHeightfills, strokes, cornerRadius, clipsContent, effectsappendChild(), insertChild(), childrensetBoundVariable(), boundVariablesSlot-specific:
resetSlot() — resets the slot to its default content (on instances)Slots register as component property definitions with type: "SLOT":
component.componentPropertyDefinitions
// → { "Content#99:0": { type: "SLOT", description: null, preferredValues: [] } }
Edit description and preferred values via:
component.editComponentProperty('Content#99:0', {
description: 'Main content area',
preferredValues: [
{ type: 'COMPONENT', key: 'someComponentKey' },
{ type: 'COMPONENT_SET', key: 'someSetKey' }
]
});
Empty collapsible slot — hug-sizes to nothing when empty, expands when content is added:
const slot = component.createSlot();
slot.name = 'prefix';
slot.fills = [];
slot.layoutMode = 'HORIZONTAL';
slot.primaryAxisSizingMode = 'AUTO';
slot.counterAxisSizingMode = 'AUTO';
// After inserting into an auto-layout parent:
slot.layoutSizingHorizontal = 'HUG';
slot.layoutSizingVertical = 'HUG';
Fixed-size icon slot — constrains content to a specific size:
const slot = component.createSlot();
slot.name = 'icon';
slot.fills = [];
slot.layoutMode = 'HORIZONTAL';
slot.primaryAxisAlignItems = 'CENTER';
slot.counterAxisAlignItems = 'CENTER';
slot.resize(16, 16);
slot.clipsContent = true;
// After inserting into auto-layout parent:
slot.layoutSizingHorizontal = 'FIXED';
slot.layoutSizingVertical = 'FIXED';
Important: layoutSizingHorizontal = 'HUG' requires the slot to have layoutMode set (making it an auto-layout frame) AND to be a child of an auto-layout parent. Set layoutMode and insert into the parent before setting HUG/FILL sizing.
Slots don't inherit or force color on their children. To make icons/content adopt the right color per component variant, use variable modes:
icon-color variable that aliases to the correct text color per modesetExplicitVariableModeForCollection() on each variant frameicon-color variable// Create theming collection
const themeCollection = figma.variables.createVariableCollection('Component / Button Theme');
const primaryMode = themeCollection.modes[0].modeId;
themeCollection.renameMode(primaryMode, 'primary');
const secondaryMode = themeCollection.addMode('secondary');
// Create the icon-color variable
const iconColor = figma.variables.createVariable('icon-color', themeCollection, 'COLOR');
iconColor.setValueForMode(primaryMode, { type: 'VARIABLE_ALIAS', id: whiteVar.id });
iconColor.setValueForMode(secondaryMode, { type: 'VARIABLE_ALIAS', id: tealVar.id });
// Apply modes to variants
primaryVariant.setExplicitVariableModeForCollection(themeCollection, primaryMode);
secondaryVariant.setExplicitVariableModeForCollection(themeCollection, secondaryMode);
// Bind icon fill to the variable
const fills = iconNode.fills;
fills[0].boundVariables = { color: { type: 'VARIABLE_ALIAS', id: iconColor.id } };
iconNode.fills = fills;
Icons bound to icon-color will resolve to white inside primary variants, teal inside secondary, etc.
The full reference to the Figma plugin API can be found here: Figma Plugin API Documentation.