Figma libraries setup
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:
- Reshaped Components
- Reshaped Foundations - Light
- Reshaped Foundations - Dark
- Download the latest Reshaped release
- Unzip the archive and find Figma files with .fig extension
- Open Figma in the app or a browser
- Go to your home page or a project
- Drag downloaded files
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:
- Open “Reshaped Foundations - Light”
- Launch the “Reshaped” plugin
- Click "New theme"
- Pick a thumbnail color, add a name, sync light mode and save
3. Add the Dark mode:
- Open “Reshaped Foundations - Dark”
- Launch the “Reshaped” plugin and start editing the previously added theme
- Sync dark mode and save
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:
- Reshaped Components
- Reshaped Foundations - Light/Dark, depending on which color . It's recommended to only have one of them enabled at a time to avoid mistakes when applying our tokens to custom components you build. You don't need to change this setting when applying themes with a Figma plugin.
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:
- Launch the “Reshaped” plugin (or similar)
- Select your mockups and apply the light/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:
- Download Figma's latest component library: library name includes the version number for your convenience
- Upload it to your project
- Go to files that use the previous component library
- Go to the Assets tab and open the Libraries modal
- Find and select the previous component library
- Select "Swap library" and choose the latest component library from the list
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:
- Add component file to Figma
- Open it and create a separate page — this is where you'll be designing
- Go to the Assets tab when you need to use a component and drag it from there
