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

Add files to Figma

  • 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

Publish libraries

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.

Set custom thumbnails

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".

Enable theming support

1. Install the “Reshaped” plugin. We've built it to simplify theming enablement in Figma as it requires zero integrations and offers an intuitive dark mode support. But feel free to use other solutions such as "Themer" or "Figma Tokens".

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”
  • Follow the same steps as for the Light mode, but now sync the Dark mode

You’re all set!

Use libraries

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 what your product’s default mode is

Now you have Reshaped components and styles available in the file.

2. Drag Reshaped components from the assets folder. Make sure to minify the number of detachments and use vanilla instances. This way, you'll keep the source of truth intact and will be able to get all component updates directly in product files.

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.

Update library version

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.

Use with a free Figma plan

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