figma plugin to create new pages in typescript

To create a new page in Figma using Typescript, you will need to first create a new Figma plugin project in Typescript. Here are the steps you can follow:

  1. Create a new Figma plugin project using the Figma Plugin CLI. Run the following command in your terminal:
index.ts
npx create-figma-plugin my-plugin --typescript
47 chars
2 lines

This will create a new plugin project with Typescript support.

  1. Inside the src folder of your new project, create a new file named create-page.ts. This file will contain the logic to create a new page in Figma. Add the following code to the file:
index.ts
import { createPage } from 'figma-plugin-ds';

export default function () {
  createPage().then((newPage) => {
    console.log(`Created new page with ID: ${newPage.id}`);
  });
}
179 chars
8 lines

This code imports the createPage function from the figma-plugin-ds library and uses it to create a new page. The ID of the newly created page is logged to the console.

  1. Open the main.ts file in the src folder and import the createPage function from the create-page.ts file:
index.ts
import { createPage } from './create-page';
44 chars
2 lines
  1. Replace the contents of the run function with a call to the createPage function:
index.ts
export default function () {
  createPage();
}
47 chars
4 lines
  1. Run the plugin by running the following command in your terminal:
index.ts
npm run start
14 chars
2 lines

This will start a development server for your plugin.

  1. Open your Figma file and run your plugin by selecting Plugins > Development > My Plugin from the menu bar. A new page should be created in your Figma file with a randomly generated name.

Note: In order to create a new page, your plugin will need to have the can-create-page capability set in the manifest.json file. You can add this capability by adding the following line to the capabilities array in the manifest:

index.ts
"canCreatePage": true
22 chars
2 lines

And that's it! You should now have a working Figma plugin that can create new pages in Typescript.

gistlibby LogSnag