Skip to main content

my code


install marked


npm install marked @types/marked

// This plugin will open a window to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for the plugins. It has access to the *document*.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (see documentation).
import { marked } from 'marked';

const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
console.log(html);

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {
// One way of distinguishing between different types of messages sent from
// your HTML page is to use an object with a "type" property like this.
if (msg.type === 'create-rectangles') {
const nodes: SceneNode[] = [];
for (let i = 0; i < msg.count; i++) {
const rect = figma.createRectangle();
rect.x = i * 150;
rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
figma.currentPage.appendChild(rect);
nodes.push(rect);
}
figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
}

// Make sure to close the plugin when you're done. Otherwise the plugin will
// keep running, which shows the cancel button at the bottom of the screen.
figma.closePlugin();
};


got error



how to fix the error?


what is the reason for the error ?


{
"name": "test2",
"version": "1.0.0",
"description": "Your Figma Plugin",
"main": "code.js",
"scripts": {
"build": "tsc -p tsconfig.json",
"watch": "npm run build -- --watch"
},
"author": "",
"license": "",
"devDependencies": {
"@figma/plugin-typings": "*",
"typescript": "*"
},
"dependencies": {
"@types/marked": "^4.3.0",
"marked": "^5.0.2"
}
}

my tsconfig.json


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

only tsc used


{
"name": "test2",
"id": "1235966160601492466",
"api": "1.0.0",
"main": "code.js",
"capabilities": [],
"enableProposedApi": false,
"editorType": [
"figma"
],
"ui": "ui.html"
}

I want to use marked on the plugin backend, not the plugin ui


The default TS compiler can’t bundle libraries into a single file unfortunately, so you can’t use it when you need to use any libraries/frameworks in your code. You’ll need to use Webpack, Esbuild, Rollup or other bundlers to do this.


change to use Esbuild


{
"name": "test2",
"version": "1.0.0",
"description": "Your Figma Plugin",
"main": "code.js",
"scripts": {
"build": "esbuild code.ts --bundle --outfile=code.js",
"watch": "npm run build -- --watch"
},
"author": "",
"license": "",
"devDependencies": {
"@figma/plugin-typings": "*",
"typescript": "*"
},
"dependencies": {
"@types/marked": "^4.3.0",
"esbuild": "0.17.19",
"marked": "^5.0.2"
}
}

run npm run build


got error



fixed.


correct ✅


esbuild code.ts --bundle --target=es6 --outfile=code.js

wrong ❌


esbuild code.ts --bundle --outfile=code.js

refer to

https://esbuild.github.io/api/#target


esbuild default target is esnext


refer to esbuild - Content Types


Syntax transform Spread properties transformed when --target is es2018


Figma plugin backend (sandbox) only supports es6(es2015)



so we need change esbuild target to es6


Reply