Skip to main content
Components are like lego bricks. You can reuse them in your designs. Example components are buttons, cards, and modals.
Do you work with an existing design system? You can import it from Figma or use our Chrome Extension with Storybook to bring your components into Magic Patterns.

​
Creating a New Component

Components live inside Design Systems. To create a new component:
1

Open your Design System

From the dashboard, navigate to Design Systems and open the Design System where you want to add the component.
2

Go to the Components page

Inside your Design System, open the Components page to see all your existing components.
3

Create a new component

Click Create Component. You can create components via text prompts, screenshots, or by importing from Figma.
Just like how you’d create a normal design in Magic Patterns, you can prompt your component to life via plain text or with images. We recommend being specific and using screenshots as references when possible for the best results.

​
Editing Components

Once you’ve created a component, you can make updates and publish new versions.

​
Using Components

There are two ways to use components from your Design System in designs:

​
Automatic Usage with Design Systems

When you create a Design System and add components to it, the AI will automatically use those components when generating designs. You don’t need to manually reference them. Just select your Design System when creating a new design.

Learn about Design Systems

Set up a Design System with your components for automatic usage across all designs.

​
Manual Reference with @

You can also explicitly reference components in your prompts using the @ symbol. This is useful when you want to use a specific component or reference components from outside your current Design System. How it works:
  1. Start typing @ in the chat
  2. A component selector appears
  3. Select the component you want
  4. The component is added to your prompt
Example: 
Create a pricing page using @PricingCard and @CTAButton

​
Updating & Upgrading Components

When you publish a new version of a component, you have two ways to upgrade instances in your existing designs:

​
Bulk Upgrade Component Instances

When you publish a new version, a modal appears showing all designs that use that component. You can:
  • Select which designs you want to upgrade
  • Click “Upgrade Instances” to update them all at once
  • This allows you to upgrade multiple designs simultaneously

​
Manual Upgrade

  • To manually update a component already being used in an existing design, after publishing a new version, go to the code tab, find the component, and click the “Update” button.
This gives you full control over upgrading individual components one at a time.

​
Video Tutorial on Updating Components

​
Deleting Components

Deleting a component is permanent and cannot be undone!
You can also deprecate a component instead of deleting it, which means the AI will no longer use it in new designs.
  1. Open your Design System and find the component
  2. Click the three dots next to the component name and select Delete
  3. Confirm the deletion
Delete a component from a Design System