This boilerplate provides a solid foundation for developing Framer plugins using TypeScript, Jotai for state management, and a local storage option. It includes various examples demonstrating usage and interactions, a type-safe router for creating multiple pages or tabs, and Jest for testing.
- TypeScript support
- Zustand for state management
- Local storage integration
- Tailwind + Shadcn setup
- Type-safe routing for multiple pages/tabs
- Jest for testing
- Various usage examples
-
Clone this repository
-
Navigate to the plugin directory:
cd apps/framer-plugin -
Install dependencies:
pnpm install
-
Start the development server:
pnpm run dev
This will open the plugin on
http://localhost:5173
- Open Figma
- Click on the Figma logo in the top-left corner
- From the dropdown menu, select "Plugins"
- Choose "Development" > "Show Development Mode"
- Go to the "Plugins" tab at the top of the Figma window
- Click "Open Development Plugin"
- Select your plugin from the list
While this boilerplate provides a robust starting point, there are some limitations in the current Framer ecosystem:
- Creating custom text elements within nested frames is not currently supported. If you know how to set the parent of a text element, please contribute or reach out!
We welcome contributions to improve this boilerplate! If you have any questions, suggestions, or improvements:
- Open an issue in this repository
- Submit a pull request with your changes
To dive deeper into the technologies used in this boilerplate:
We hope this boilerplate provides a great experience for developing Framer plugins. As the Framer ecosystem matures, we'll continue to update and improve this boilerplate. Your feedback and contributions are greatly appreciated!
Enjoy building your Framer plugin!