How to build basic components on Framer

beginner 8 min read Updated 2026-03-18

Quick Answer

Building basic components in Framer involves creating reusable design elements by selecting objects, converting them to components, and customizing their properties. Components can be created from any combination of frames, shapes, text, or other elements on your canvas.

Try Framer Full Framer Review

Prerequisites

Basic understanding of design principles
Framer account and project setup
Familiarity with Framer's canvas interface
Knowledge of layers and frames

Step-by-Step Instructions

Create Your Base Design Element

Start by designing the element you want to turn into a component on Framer's canvas. This could be a button, card, icon, or any combination of shapes and text. Use the Insert menu or press F to add frames, shapes, or text elements. Ensure your design is properly grouped and positioned as desired.

Keep your initial design simple and well-organized with clear hierarchy for easier component management.

Select All Elements for Your Component

Click and drag to select all the elements that should be part of your component, or hold Shift and click each element individually. You can also use Cmd+A (Mac) or Ctrl+A (Windows) if you want to select everything on the canvas. Make sure all related elements are included in your selection.

Use the Layers panel to verify you've selected all the correct elements before proceeding.

Convert Selection to Component

Right-click on your selected elements and choose Create Component from the context menu. Alternatively, use the keyboard shortcut Cmd+K (Mac) or Ctrl+K (Windows). Your selection will be converted into a component instance, indicated by a purple border and component icon in the layers panel.

Name Your Component

In the Properties Panel on the right, locate the component name field at the top. Replace the default name with something descriptive like "Primary Button" or "Product Card". Good naming helps you find and manage components later. The name will appear in your Assets Panel for future use.

Use consistent naming conventions like "ComponentType/Variant" for better organization.

Configure Component Properties

With your component selected, go to the Component section in the Properties Panel. Here you can add Component Properties by clicking the + button. Create properties for elements you want to customize, such as text content, colors, or visibility. Choose the appropriate property type: Text, Boolean, Color, or Instance Swap.

Start with essential properties like text and color - you can always add more advanced properties later.

Test Your Component Instance

Create a new instance of your component by dragging it from the Assets Panel onto your canvas, or duplicate the existing one with Cmd+D (Mac) or Ctrl+D (Windows). Select the instance and modify the component properties in the Properties Panel to ensure they work as expected.

Edit the Master Component

To modify your component's design, double-click on any instance or select Edit Master Component from the right-click menu. This opens the component in edit mode. Make your changes to the design, layout, or add new component properties. Press Esc or click outside to exit edit mode.

Changes to the master component automatically update all instances across your project.

Organize in Assets Panel

Open the Assets Panel on the left sidebar to view all your components. You can organize components into folders by right-clicking and selecting New Folder. Drag components into folders for better organization. This panel is where you'll access components for future use across different pages.

Create folders by category like "Buttons", "Cards", "Navigation" to keep your component library organized.

Common Issues & Troubleshooting

Component properties not showing up in instances

Ensure you've properly connected the component property to the specific element. In component edit mode, select the element and link it to the property in the Component Properties section.

Component instances not updating when master is edited

Check if the instance has been detached from the master component. If so, you'll need to replace it with a fresh instance from the Assets Panel or reset overrides.

Cannot create component from selection

Make sure you have at least one element selected and that you're not trying to create a component from another component instance. You may need to detach instance first if working with existing components.

Component appears broken or elements are misaligned

Check the Auto Layout settings and constraints of elements within the component. Ensure proper spacing and alignment rules are set in the component's master design.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing