figma-styles

Figma Styles API

Styles are reusable design properties that can be applied to multiple nodes.

Style Types

Style Type	Applies To	Properties
Paint Style	Fills, strokes	Colors, gradients, images
Text Style	Text nodes	Font, size, line height, etc.
Effect Style	Any node	Shadows, blurs
Grid Style	Frames	Layout grids

Getting Local Styles

// Get all local styles (async)
const paintStyles = await figma.getLocalPaintStylesAsync()
const textStyles = await figma.getLocalTextStylesAsync()
const effectStyles = await figma.getLocalEffectStylesAsync()
const gridStyles = await figma.getLocalGridStylesAsync()

// Log style names
paintStyles.forEach(style => console.log(style.name))

Creating Styles

Paint Style

const style = figma.createPaintStyle()
style.name = "Brand/Primary"
style.paints = [{
  type: 'SOLID',
  color: { r: 0.2, g: 0.4, b: 1 }
}]

Text Style

const style = figma.createTextStyle()
style.name = "Heading/H1"
style.fontName = { family: "Inter", style: "Bold" }
style.fontSize = 32
style.lineHeight = { value: 40, unit: "PIXELS" }
style.letterSpacing = { value: -0.5, unit: "PIXELS" }

Effect Style

const style = figma.createEffectStyle()
style.name = "Elevation/Medium"
style.effects = [{
  type: 'DROP_SHADOW',
  color: { r: 0, g: 0, b: 0, a: 0.15 },
  offset: { x: 0, y: 4 },
  radius: 8,
  spread: 0,
  visible: true,
  blendMode: 'NORMAL'
}]

Applying Styles to Nodes

// Apply paint style to fills
const rect = figma.createRectangle()
rect.fillStyleId = paintStyle.id

// Apply paint style to strokes
rect.strokeStyleId = strokeStyle.id

// Apply text style
if (textNode.type === "TEXT") {
  textNode.textStyleId = textStyle.id
}

// Apply effect style
node.effectStyleId = effectStyle.id

// Apply grid style to frame
if (frame.type === "FRAME") {
  frame.gridStyleId = gridStyle.id
}