Building a Plugin Interface
Plugins give you full control over the styling, allowing you to create any interface you’d like. The plugin template includes a minimal set of styles, consisting of global styles to help your plugin fit into the Framer UI.
Creating UI
With the Plugin template many semantic HTML are styled for you already. For example a structure like the following will fit in naturally into the Framer interface by default.
We do not maintain an official set of reusable components, however for a more in-depth library from the community, you can try Framer Toolbox from Cédric. This library includes tools and Components for elements like Segmented Controls.
Showing UI
By default the UI isn't shown and only a toast appears while your plugin is running. To make the UI appear you can call framer.showUI
. That method comes with an optional UI configuration.
You can hide the UI again with the following method.
To stop the plugin programmatically you can call framer.closePlugin
. That method comes with an optional message.
Building UI
With the Plugin template many semantic HTML are styled for you already. For example a structure like the following will fit in naturally into the Framer interface by default.
Color Tokens
Framer provides a selection of CSS color variables that automatically adjust based on the light / dark mode of Framer.
--framer-color-tint
--framer-color-tint-dimmed
--framer-color-tint-dark
--framer-color-bg
--framer-color-bg-secondary
--framer-color-bg-tertiary
--framer-color-divider
--framer-color-text
--framer-color-text-reversed
--framer-color-text-secondary
--framer-color-text-tertiary
Dark / Light Mode
If you need to adjust more UI based on the current theme, you can use CSS rules that only apply when a specific theme is active.
If you need to access the current theme from within your app, you can access it with the following code.
Built-in Classes
Currently the plugin template includes a couple CSS classes for common UI in Framer.
framer-button-primary
applied to a<button />
element to make it a primary button color.framer-divider
applied to a<div />
to be a horizontal rule.
Displaying Notifications
Your Plugin can display notifications displayed to users via framer.notify