The Figma plugin that was generated does not come with TypeScript typings included

As I attempt to follow the plugin setup guide located here, my plugin is quite simple yet effective. It consists of the following code:

figma.showUI(__html__);

// @ts-ignore
console.log(figma.currentPage.selection[0].cornerRadius);

When executed as is, the plugin functions correctly and retrieves the border radius of the selected node.

However, upon removal of // @ts-ignore, TypeScript raises an error: "Property 'cornerRadius' does not exist on type 'SceneNode'."

I have properly installed the typings, from the source here, and my .tsconfig file is structured like this:

{
  "compilerOptions": {
  "target": "es6",
  "lib": ["es6", "dom"],
  "typeRoots": [
    "./node_modules/@types",
    "./node_modules/@figma"
  ]
}

}

What element am I overlooking?

typescriptfigmafigma-api

Answer №1

figma.currentPage.selection provides an array of SceneNode. The SceneNode does not have the CornerMixin that defines the cornerRadius. It is important to ensure that the node type is supported before accessing this property.

For example, you can check the type field on the SceneNode:

const selection = figma.currentPage.selection[0];
if (selection.type === "RECTANGLE") {
  console.log((selection as RectangleNode).cornerRadius);
}

The following node types utilize the CornerMixin, as stated in the typings plugin declaration file:

RectangleNode
EllipseNode
PolygonNode
StarNode
VectorNode
BooleanOperationNode

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The transformation from className to class attribute does not occur for custom elements in JSX

I recently encountered an issue with one of my React components where the "className" attribute was being converted to "classname" in the resulting HTML, instead of the expected "class" attribute. The component had a custom element definition as follows: ...

reactjstypescriptjsxtsx

Exploring the capabilities of the Next.js router and the useRouter

import { routeHandler } from "next/client"; import { useRouteNavigator } from "next/router"; const CustomComponent = () => { const routerFromHook = useRouteNavigator(); } export default CustomComponent; Can you explain the disti ...

javascriptreactjstypescriptnext.jsnext-router

execute the function once the filereader has completed reading the files

submitTCtoDB(updateTagForm:any){ for(let i=0;i<this.selectedFileList.length;i++){ let file=this.selectedFileList[i]; this.readFile(file, function(selectedFileList) { this.submitTC(updateTagForm,selectedFileList); }); } } } ...

javascriptangulartypescript

Using Typescript: Defining a property's type based on the value of another property in the same object

I'm dealing with a TypeScript interface that consists of two properties (type:string and args:object). The contents of the args property may vary based on the value of the type. I'm looking for the correct type definition to specify for the args ...

typescriptconditional-types

What is the best method for eliminating the .vue extension in TypeScript imports within Vue.JS?

I recently created a project using vue-cli3 and decided to incorporate TypeScript for added type safety. Here is a snippet from my src/app.vue file: <template> <div id="app"> <hello-world msg="test"/> </div> </template& ...

typescriptvue.jstsconfig

Defining types for functions that retrieve values with a specified default

My method aims to fetch a value asynchronously and return it, providing a default value if the value does not exist. async get(key: string, def_value?: any): Promise<any> { const v = await redisInstance.get(key); return v ? v : def_value; } W ...

javascripttypescript

What is the best way to add JSX to the DOM using React?

Looking to make an addition to my DOM. let parent = document.getElementById("TabContainer"); let settings = <Box id="test"> <GlobalSettings activeTab={"test"}></GlobalSettings> </Box> ...

reactjstypescriptdom

The async pipe is failing to function properly when used with the same observable

I'm facing an issue with the async pipe in my view as it's not loading any data dynamically. On my page, I need to change observable values multiple times such as reloading the page, loading more values, and updating news content based on differ ...

angulartypescriptionic-frameworkrxjsionic4

Issue encountered while deploying Next.js application on vercel using the replaceAll function

Encountering an error during deployment of a next.js app to Vercel, although local builds are functioning normally. The issue seems to be related to the [replaceAll][1] function The error message received is as follows: Error occurred prerendering page &q ...

javascriptreactjstypescriptnext.js

retrieving class instances from a Firebase database

I have a new group called GroupA group A { value1: string; value2: string; total(): number { return value1 + value2; } } I want to store instances of GroupA in my database, but when I retrieve them, they are in Object format which does not a ...

typescriptfirebasefirebase-realtime-database

Nest JS Guards - Employ either of two approaches

I have implemented two different JWT based strategies in my application: The first strategy involves single sign-on for organization members, where an external provider generates a JWT. The second strategy is for email/password authenticated external user ...

javascripttypescriptnestjs

What is the process for transferring an existing collection or data in Firestore to a subcollection?

My firestore database currently has the following structure with documents: root | |---transactions/... I am looking to transfer all transactions to a new subcollection as shown below: root | |---users/user/transactions/... Any suggestions on how I can a ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Revise Swagger UI within toggle button switch

My project aims to showcase three distinct OpenApi definitions within a web application, enabling users to explore different API documentation. The concept involves implementing a toggle button group with three buttons at the top and the Swagger UI display ...

htmlangulartypescriptangular-materialswagger-ui

A guide on effectively utilizing ref forwarding in compound component typing

I am currently working on customizing the tab components in Chakra-ui. As per their documentation, it needs to be enclosed within React.forwardRef because they utilize cloneElement to internally pass state. However, TypeScript is throwing an error: [tsserv ...

javascriptreactjstypescript

How is it that I can assign a string value to my declared number object parameter in Typescript?

In my code, I have defined an interface called DateArray: export interface DateArray { year : number; } Within my component, I am declaring a new variable named dateArray like this: private dateArray: DateArray = { year: null }; Then, I am a ...

typescript

Issue with Loosing Focus in React TextInput when typing the letter "S"

My TextInput is acting strangely - it loses focus only when I type the letter s. All other letters work fine. <FormControl key={"1"} sx={{ m: 1 }} variant="outlined" onChange={handleFilterValueChange}> <InputLabel htmlFor=& ...

reactjstypescript

Encountering issues when attempting to set up graphqlExpress due to type

This is my first experience using GraphQL with Express. I have created a schema: import { makeExecutableSchema } from "graphql-tools"; import { interfaces } from "inversify"; const schema = ` type Feature { id: Int! name: String ...

node.jsexpresstypescriptgraphqlapollo-server

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

javascripthtmlangulartypescript

A guide on implementing directives in Angular 2

I am trying to load my navbar.html in my app.component.html by using directives and following the method below: Here is my navbar html: <p>Hi, I am a pen</p> This is my navbar.ts: import {Component, Directive, OnInit} from '@angular/c ...

angulartypescript

Ways to Resolve the "TS2533: Object May Be Either 'Null' or 'Undefined'" Error on a Dynamic Object

I'm encountering an issue with the following code snippet: interface Schema$CommonEventObject { formInputs?: { [key: string]: Schema$Inputs; } | null; } interface Schema$Inputs { stringInputs?: Schema$StringInp ...

typescripttypesinterface