This project is a comprehensive template designed to help you create Figma widgets using Vite, React, and TypeScript. It provides a minimal setup with Hot Module Replacement (HMR) for a seamless development experience and includes a robust ESLint configuration to ensure code quality and consistency.
- Vite for Fast Builds: Utilizes Vite's build system for rapid development and production builds, tailored for React applications.
- React with TypeScript: Leverages the power of React and TypeScript for developing Figma widgets, offering type safety and JSX support.
- ESLint Configured: Comes pre-configured with ESLint, including rules for React, TypeScript, import order, and custom rules to ensure high-quality, maintainable code.
- Figma Plugin and Widget Typings: Includes type definitions for developing Figma plugins and widgets, enabling IntelliSense and compile-time type checking.
- Custom JSX Factory for Figma Widgets: Configures a custom JSX factory (
figma.widget.h) and fragment factory (figma.widget.Fragment) to work seamlessly with Figma's widget API.
Clone the repository:
git clone https://github.com/mikhin/figma-widget-vite-react-typescript-template.gitInstall dependencies:
pnpm installStart the development server:
pnpm run devBuild for production:
pnpm run buildsrc/main.tsx: Entry point for the Figma widget. Contains JSX code for the widget UI.vite.config.ts: Configuration file for Vite, including custom settings for building Figma widgets..eslintrc: Configuration file for ESLint, specifying rules and plugins for linting JavaScript/TypeScript code.
Included is a simple counter widget example demonstrating how to use React state, property menus, and Figma's widget API to create interactive widgets.
This project is open-sourced under the MIT license. Feel free to fork, modify, and use it in your own projects.
For more information on developing Figma plugins and widgets, visit the Figma Developer Documentation.