Theme

A Theme represents a visual theme in Figma Slides. Each theme groups together a set of color variables and text/grid styles that define a cohesive visual identity for slides.

Use figma.getDocumentThemes to retrieve all themes in the current document:

const themes = figma.getDocumentThemes()
for (const theme of themes) {
  console.log(theme.name)
}

You can resolve a theme's variables and styles using the existing Variables and Styles APIs:

const themes = figma.getDocumentThemes()
const theme = themes[0]
const collection = await figma.variables.getVariableCollectionByIdAsync(theme.variableCollectionId)

Theme properties

id: string [readonly]

The unique identifier for this theme.

name: string [readonly]

The name of this theme.

variableCollectionId: string [readonly]

The ID of the VariableCollection that contains this theme's color variables.

Use getVariableCollectionByIdAsync to retrieve the collection.

variableIds: readonly string[] [readonly]

The IDs of the color Variables in this theme.

Use getVariableByIdAsync to retrieve individual variables.

styleIds: readonly string[] [readonly]

The IDs of the styles (text and grid) in this theme.

Use figma.getStyleByIdAsync to retrieve individual styles.

Theme properties​