Run npm install -save-dev Set up TypeScript compilation Plugins are defined using multiple files and you'll want to be able to edit them all of them, so one trick is to open the folder itself rather than any of the files inside it. Open the folder you just created using Visual Studio Code. Give it a name, then choose "With UI & browser APIs" in the next screen.
This will bring up the "Create a plugin" modal to create a sample plugin. Go to Menu > Plugins > Development > New Plugin. You can open any existing document or create a new one. Log in to your account and open the file editor in the Figma desktop app If you already have the desktop app, please make sure to update to the latest version, as several features have been added specifically in order to provide a better plugin development experience. The Figma desktop app can be downloaded here. This is because Figma needs to read your code saved as a local file. Get the Figma desktop appĪt this time, plugin development and testing needs to be done using the Figma desktop app. (This isn't installed by Visual Studio Code). To install TypeScript, run sudo npm install -g typescript in a terminal. You can download Node.js here, which will include NPM. This lets you use TypeScript, which we think makes developing good plugins much easier.
Visual Studio Code can be downloaded here. We provide a type definition file to make this experience even better. But we find that TypeScript and Visual Studio Code provide the best editing experience. Neither are mandatory: you can develop plugins in any text editor and use any language which can be translated to JavaScript (including JavaScript itself!). These instructions intend for you to develop plugins in TypeScript using Visual Studio Code.
By the end of this guide, you will have a plugin that opens a modal, asks the user for a number, and creates that many rectangles on the canvas. This short guide will walk you through the steps needed to setup your development environment for writing and running a simple plugin inside of Figma.
0 kommentar(er)
