Prerequisites:
● Completed Chapter 1: Set-up Skeleton Figma Library
Import Custom Theme
Open Skeleton v3 Figma Library

Open Skeleton themes plugin
Click on the Actions
¹ button in the toolbar, search for Skeleton Themes
², and click on the Skeleton Themes
³ plugin when it appears.
Important: The plugin is compatible only with the Skeleton v3 Figma Library.

Add new theme
The library includes a default theme, Cerberus
. To add your theme, click Add theme
⁴.

Select theme
Copy your theme code by visiting the Skeleton theme creator. Click Import
⁵, then select a theme⁶, or compose your own.

Copy theme
Open the Code
tab in the right panel⁷ and copy the theme code⁸.

Paste theme
Return to the Skeleton Themes
plugin in Figma, paste the theme code⁹, and click Upload
¹⁰.
Note: Uploading the theme may take 3–5 minutes, depending on your device.

Publish updates
After uploading, publish the library to make the new theme accessible. In the left panel, click the Book
icon¹¹, then click the Publish...
button¹². When the modal appears, click Publish
again¹³.
Note: Publishing may take 5–7 minutes.


Apply Custom Theme in Project
Prerequisites:
- Completed Chapter 1: Set-up Skeleton Figma Library
- Completed Chapter 2: Import Custom Theme
Open Project
Open the project where the Skeleton Figma Library
is applied.

Set the stage
Add page examples
components on the canvas to preview your theme.

Switch theme
In the Pages
section⁴ on the right panel, click Apply variable mode
, hover over Theme
, and select your imported theme⁵.

Voilà! Your theme is now applied to the components.

Switch modes
Skeleton themes include light
and dark
modes by default. Switch modes the same way you switch themes: in the Pages
section⁶, click Apply variable mode
, hover over Color Scheme
, and select the scheme⁷.

Your components are now in the Dark
Color Scheme
.
