- HTML5: HTML5 for front-end ui modal of plugin.
- vanilla CSS: For styling the modal HTML UI.
- typescript: for writing the logic for the plugin gradient using Figma API methods.
- Figma API : for accessing files , methods for creating frames , accessing figma tools and methods in typescript.
- assets: Project assets such as images, fonts, and styles.
- node_modules: Directory for installed dependencies.
- node_modules/@figma: Figma-related modules and typings.
- node_modules/figma-plugin-ds: Figma plugin design system library.
- node_modules/figma-plugin-ds/dist: Distribution files of the Figma plugin design system.
- node_modules/figma-plugin-ds/src: Source files of the Figma plugin design system.
- node_modules/typescript: TypeScript compiler and related files.
- node_modules/typescript/bin: Executable files of the TypeScript compiler.
- node_modules/typescript/lib: Library files for different languages supported by TypeScript.
- node_modules/typescript/lib/es: TypeScript library files for Spanish language support.
Gradify is a Figma plugin that allows designers to easily create beautiful gradients with unlimited color combinations according to your choice of colors. You can create Linear Gradients and Mesh Gradients, with handpicked color combinations that makes the gradient look professionally pleasing .This plugin is built using HTML, CSS, and TypeScript and is intended to be used within the Figma design tool.
You can also find instructions at: Figma Plugin Setup Docs
This plugin template uses TypeScript and NPM, two standard tools in creating JavaScript applications.
Step 1: Download Node.js
Download Node.js, which comes with NPM. This will allow you to install TypeScript and other libraries.
Download Link: Node.js Download
Step 2: Install TypeScript
Install TypeScript globally using the following command:
bash
npm install -g typescript
Step 3: Get Figma Plugin Type Definitions
In the directory of your plugin, get the latest type definitions for the Figma plugin API by running:
bash
npm install --save-dev @figma/plugin-typings
Understanding TypeScript
If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code is already valid TypeScript code.
TypeScript adds type annotations to variables, enabling code editors like Visual Studio Code to provide information about the Figma API while you are writing code and help catch bugs you previously didn't notice.
For more information about TypeScript, visit: TypeScript Official Website
Using TypeScript
Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js) for the browser to run.
Recommended Development Environment: Visual Studio Code
Download Visual Studio Code if you haven't already: Visual Studio Code Download.
Open your plugin directory in Visual Studio Code.
Compile TypeScript to JavaScript:
Run the "Terminal > Run Build Task..." menu item, then select "npm: watch".
You will have to do this again every time you reopen Visual Studio Code.
That's it! Visual Studio Code will regenerate the JavaScript file every time you save.
prash240303 23 contributions |