figma var in ts

In Figma plugin development with TypeScript, the global figma variable works exactly the same as in JavaScript - you simply write figma and access its properties and methods directly[1][3].

Using the Global Figma Object

The figma global object is available throughout your main plugin code and can be used identically to JavaScript:

// Works the same in TypeScript as JavaScript
const localCollections = await figma.variables.getLocalVariableCollectionsAsync();
const selection = figma.currentPage.selection;
const component = figma.createComponent();

TypeScript Advantages

The main difference with TypeScript is that you get type safety and autocompletion. Figma provides official TypeScript typings that give you:

Type annotations for all API methods and properties
IntelliSense/autocompletion in your editor
Compile-time error checking

For example, when accessing selection, TypeScript knows the correct type:

const selection: SceneNode[] = figma.currentPage.selection;

Important Limitation

One crucial point to remember is that the figma global object is only available in your main plugin code (typically code.ts), not in UI files (ui.tsx)[4]. If you need to access Figma's API from your UI, you must send messages from the UI to the plugin code[4].

Getting TypeScript Support

To get the latest TypeScript typings and full IDE support, install the official typings package[3]:

npm install --save-dev @figma/plugin-typings

This provides comprehensive type definitions for the entire Plugin API, helping you catch errors and understand the available methods and properties as you develop your plugin[3].

[1] https://www.figma.com/plugin-docs/working-with-variables/ [2] https://www.figma.com/plugin-docs/typescript/ [3] https://www.figma.com/plugin-docs/api/api-reference/ [4] https://forum.figma.com/ask-the-community-7/how-i-can-get-access-to-global-object-figma-in-ui-tsx-26779 [5] https://9elements.com/blog/variables2css-writing-a-figma-plugin/ [6] https://www.figma.com/plugin-docs/api/data-types/ [7] https://www.growthaccelerationpartners.com/blog/enhancing-design-efficiency-creating-a-custom-figma-plugin [8] https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma [9] https://www.youtube.com/watch?v=pA4n712h1Vc [10] https://baselinedesign.io/posts/baseline-14-a-guide-to-variables-in-figma

In Main Plugin Code (code.ts)

The figma global object is available throughout your main plugin TypeScript file:

// Access figma variables
const localCollections = await figma.variables.getLocalVariableCollectionsAsync();

// Access current selection
const selection: SceneNode[] = figma.currentPage.selection;

// Create nodes
const component = figma.createComponent();

// Work with variables
const collection = figma.variables.createVariableCollection("example-collection");
const weightVariable = figma.variables.createVariable("weight-variable", collection, "FLOAT");

Important Limitation: UI Files

The figma global object is NOT available in UI files (like ui.tsx)[1]. If you need to access Figma's API from your UI code, you must send messages from the UI to the plugin code:

In UI code (ui.tsx):

// Send message to plugin code
parent.postMessage({ pluginMessage: { type: 'get-selection' } }, '*');

In plugin code (code.ts):

// Receive message and access figma API
figma.ui.onmessage = msg => {
  if (msg.type === 'get-selection') {
    const selection = figma.currentPage.selection;
    // Process selection and send back to UI
    figma.ui.postMessage({ type: 'selection-data', selection });
  }
};

TypeScript Benefits

With TypeScript, you get enhanced development experience when accessing the figma global:

Type safety: TypeScript knows the correct types for all figma properties[2]

Autocompletion: Your IDE will suggest available methods and properties

Error catching: TypeScript will warn you about potential type mismatches

function turnFrameIntoComponent() {
  const selection: SceneNode[] = figma.currentPage.selection;
  if (!selection.length) { return }
  
  // TypeScript ensures you check the node type
  if (selection[0].type !== 'FRAME') { return }
  
  const component = figma.createComponent();
  // TypeScript provides autocompletion for component properties
}

eonist/figma var in ts.md

Using the Global Figma Object

TypeScript Advantages

Important Limitation

Getting TypeScript Support

eonist commented Jun 10, 2025

Uh oh!