Beginner
How to build basic components on Framer
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.
Prerequisites
- Basic understanding of design principles
- Framer account and project setup
- Familiarity with Framer's canvas interface
- Knowledge of layers and frames
1
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.Tip
Keep your initial design simple and well-organized with clear hierarchy for easier component management.
2
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.Tip
Use the Layers panel to verify you've selected all the correct elements before proceeding.
3
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.4
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.
Tip
Use consistent naming conventions like "ComponentType/Variant" for better organization.
5
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.Tip
Start with essential properties like text and color - you can always add more advanced properties later.
6
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.7
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.Tip
Changes to the master component automatically update all instances across your project.
8
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.
Tip
Create folders by category like "Buttons", "Cards", "Navigation" to keep your component library organized.
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.
Ready to get started with Framer?
Put this tutorial into practice. Visit Framer and follow the steps above.
Visit Framer →