Installing Reshaped Figma libraries is straightforward, but we'd like to guide you through the entire process if you face any issues.
Each Reshaped release contains 3 Figma libraries:
We're using SF Pro font from Apple in some of our files which might not be pre-installed on your machine. You can get their source files on the Apple Fonts page.
Open each library, click on the file name’s dropdown and select “Publish styles and components”. This will make components and styles available for usage in your projects.
👆 Libraries are available only in Figma paid plans. Follow these steps if you have a free plan.
Make the library's cover image consistent and more readable. Open each library, and click on the "Thumbnail" frame. Open a dialogue and click on the "Set as thumbnail".
To let you work with styles we provide a free Reshaped Figma plugin. We've built it to simplify theming enablement in Figma as it requires zero integrations and offers an intuitive dark mode support. Our plugin is a good start, but in case you want to sync design tokens with external data sources or to follow a more sophisticated approach for working with design tokens – you can use Reshaped with Tokens Studio or other plugins.
Here is an example of how you can add themes when using our plugin:
1. Install the “Reshaped” plugin.
2. Add the Light mode:
3. Add the Dark mode:
You’re all set!
1. Open a Figma file where you want to use Reshaped. Go to the “Assets” tab, click on the “Library” icon and enable two Reshaped libraries:
Now you have Reshaped components and styles available in the file.
2. Start using components with the top bar Resources action or from the Assets tab in the left sidebar. Avoid detaching components to make sure you receive upcoming Reshaped updates.
3. Use Reshaped styles instead of hard-coded values for color, typography, and effects. This way, You'll maintain automatic support for dark mode and keep accessible color combinations.
4. Test your mockups in Light or Dark mode:
After testing, we recommend switching back to the default mode, so you don't have to keep both light and dark mode libraries enabled.
Every new Reshaped release comes with an updated Figma component library. Follow these steps to upgrade to the latest version:
Now you have Reshaped components and styles available in the file.
If you're using a free Figma plan, it currently doesn't allow publishing a library. But don't worry, there's still a way to explore the component library: