figma var in ts

figma var in ts.md

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 TypeScript, you work with Figma variables through the figma.variables API, which provides methods for creating, reading, and manipulating variables in your plugin code.

Creating Variable Collections and Variables

To create a new variable collection and variables in TypeScript:

const collection = figma.variables.createVariableCollection("example-collection");
const weightVariable = figma.variables.createVariable("weight-variable", collection, "FLOAT");
const colorVariable = figma.variables.createVariable("color-variable", collection, "COLOR");

Working with Variable Collections

You can manage collections and their modes:

const collection = figma.variables.createVariableCollection("new-collection");
collection.renameMode(collection.modes[0].modeId, "light");
const darkModeId = collection.addMode("dark");

// Rename variables and collections
const colorVariable = figma.variables.createVariable("color-variable", collection, "COLOR");
colorVariable.name = "text-primary";
collection.name = "semantic colors";

Getting Existing Variables

To retrieve variables that already exist:

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

Binding Variables to Nodes

You can bind variables to different properties of nodes:

For regular nodes:

const exampleTextNode = await figma.getNodeByIdAsync("1:4") as TextNode;
exampleTextNode.setBoundVariable("fontWeight", weightVariable);

For text ranges:

const exampleTextNode = await figma.getNodeByIdAsync("1:4") as TextNode;
exampleTextNode.setRangeBoundVariable(0, 5, "fontWeight", weightVariable);

For text styles:

const localTextStyles = await figma.getLocalTextStylesAsync();
const exampleTextStyle = localTextStyles[0];
exampleTextStyle.setBoundVariable("fontWeight", weightVariable);

Reading Bound Variables

To get variables that are bound to nodes:

const exampleTextNode = await figma.getNodeByIdAsync("1:4") as TextNode;
const exampleTextNodeVariables = exampleTextNode.boundVariables;

// For text segments with different variable bindings
const segments = exampleTextNode.getStyledTextSegments(['boundVariables']);

Removing Variable Bindings

To unbind variables, set the bound field to null:

const exampleTextNode = await figma.getNodeByIdAsync("1:4") as TextNode;
exampleTextNode.setBoundVariable("fontWeight", null);

TypeScript Benefits

With TypeScript, you get type safety and autocompletion when working with variables. The @figma/plugin-typings package provides complete type definitions, so you'll get proper IntelliSense for variable types like "COLOR", "FLOAT", "STRING", and "BOOLEAN"[1][3].

The key advantage is that TypeScript will catch type mismatches and provide suggestions as you work with the variables API, helping prevent runtime errors in your plugin[1][3].

[1] https://www.figma.com/plugin-docs/typescript/
[2] https://www.figma.com/plugin-docs/working-with-variables/
[3] https://www.figma.com/plugin-docs/plugin-quickstart-guide/
[4] https://www.youtube.com/watch?v=pA4n712h1Vc
[5] https://github.com/lauthieb/variables-converter-figma-plugin
[6] https://forum.figma.com/ask-the-community-7/passing-code-js-or-code-ts-values-variables-to-ui-html-13762
[7] https://www.figma.com/community/plugin/1374999882684650654/figma-variables-to-css-typescript-push-to-bitbucket
[8] https://www.figma.com/blog/figmas-journey-to-typescript-compiling-away-our-custom-programming-language/
[9] https://www.npmjs.com/package/figma-api
[10] https://evilmartians.com/chronicles/how-to-make-next-level-figma-plugins-auth-routing-storage-and-more

The figma global variable is accessible in TypeScript exactly the same way as JavaScript - you simply write figma directly in your code.

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
}

Getting TypeScript Support

To get full TypeScript support, install the official typings:

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

This provides complete type definitions for the entire Plugin API, giving you proper IntelliSense and type checking when working with the figma global object[5].

[1] https://forum.figma.com/ask-the-community-7/how-i-can-get-access-to-global-object-figma-in-ui-tsx-26779
[2] https://www.figma.com/plugin-docs/typescript/
[3] https://www.tonyward.dev/articles/figma-variables-to-css-variables
[4] https://www.figma.com/plugin-docs/working-with-variables/
[5] https://github.com/craftzing/fft-example-figma-variables
[6] https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
[7] https://github.com/Supernova-Studio/figma-typescript-api
[8] https://www.youtube.com/watch?v=1ONxxlJnvdM
[9] https://dev.to/onyeneke/how-to-use-variables-in-figma-2599
[10] https://www.youtube.com/watch?v=pA4n712h1Vc