Setup & Usage

1. Choose & purchase your Figma Kits

Etesie offers two Figma Kits that work together:

• Primitives Kit – the Skeleton v4-compatible design system foundations (components, tokens, layout primitives).
• Auth Kit – ready-made auth flows and screens designed to sit on top of the Primitives Kit.

Coming from Skeleton? Start with the Primitives Kit.
Coming from Etesie Auth / Convex? We recommend using both, so your app UI and auth flows stay perfectly aligned.

2. Create a New Project

In Figma, go to Home¹ and select All projects² from the left sidebar². On the right side, click + Project³ and name the project Libraries⁴.

3. Import the Figma Kits

From the project page, click Create new in the top-right corner⁵ and select Import⁶. Then, choose Import from computer⁷ and select the Primitives (.fig) or the Auth (.fig).

4. Publish the libraries

To use the kits across all Figma files, they must be published as libraries.

Double-click each kit (Primitives and, optionally, Auth) to open it. At the top left, next to the file name, click the chevron v⁸ and select Publish library…⁹. In the modal, click Publish¹⁰ and wait for the library to finish publishing.

Once published, you can access the libraries (Primitives and Auth) in any of your projects.

1. Open or Create a Project to Use the Libraries

Open an existing project, or create a new one by clicking + Create new¹ and selecting Design file².

2. Add the Libraries to Your Project

In the left sidebar, click Assets³, then click the ⁴ icon. A modal will appear with the Libraries tab active. Search for your kit names (for example Primitives and Auth)⁵ and click Add to file⁶ for each one you want to use.

The libraries are now added to your file, and their assets are ready for use.

3. Use Assets (Components)

You can now access the libraries. In the Assets tab, you’ll see:

• Primitives Kit – base components and tokens that mirror the Skeleton v4 design system.
• Auth Kit – pre-built auth flows (sign in, sign up, reset password, etc.) designed to sit on top of the Primitives.

Drag components onto the canvas or search for specific ones to start designing.