The Shadcraft Figma kit offers a comprehensive set of components that align with the official shadcn/ui framework. This section walks you through how to work with components in Figma — from basic editing to documenting changes for developer handoff.

Editing Components

Each component in the kit is styled using Tailwind CSS utility classes. In Figma, we replicate this structure by using variables from the Primitive, Theme, and Mode collections, along with shared styles. This setup ensures visual consistency and allows for easy updates across your design system.

Example: Editing the Tooltip Component

Let's say we want to modify the Tooltip component to have a slightly larger font size.

1. Navigate to the Tooltip page in your main library file

2. Locate the component named Tooltip / Text inside the Components section

3. Select all the Tooltip component variants

4. Change the label text from text-xs to text-base

Implementation in Code

Developers can now update the component in code based on the design edits:

1. Open the ui/tooltip.tsx file

2. Replace the text-sm class with text-base

3. Save the file and verify the changes in the Ul

Because the Figma variables map directly to Tailwind classes, the design-to-code handoff is fast and accurate.

Creating New Components

If you're designing a brand-new component, follow these guidelines to maintain consistency with the Shadcraft system:

1. Start with a Frame using the correct constraints and resizing behaviours

2. Add text using predefined Text Styles

3. Apply colors from the Mode collection (to support light/dark themes)

4. Use Primitive variables for spacing, sizing, borders, and radius

5. Use auto-layout wherever possible

6. Hit option+d6+K to convert the frame to a component

7. Add variants for different states where needed (e.g. default, hover, focus, disabled)

8. Use Figma properties to organise toggles, slots, or variants cleanly

9. Add usage documentation within the Figma file to help developers understand the intent and flexibility