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 2 Figma libraries:
- Reshaped Components
- Reshaped Theme
- 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 Inter font family as a default font and it might be not preinstalled on all machines when using code components. Make sure that during development Inter is enabled in React. Otherwise Reshaped will fallback to system fonts or you can change the font values using theming.
Open each library, click on the file name’s dropdown and select “Publish library”. 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.
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
- Reshaped Theme
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.
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.
Use Reshaped variables to control border-radius and spacing values to make sure your custom components are fully themeable.
You can test your design in light and dark mode by switching modes on the selected layers.
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
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
