How to customize component properties on Framer

intermediate 8 min read Updated 2026-03-18

Quick Answer

Customize component properties in Framer by selecting a component, accessing the Properties panel, and creating custom controls for text, colors, variants, and other design elements. This allows you to create reusable components with flexible, configurable properties that can be easily modified across instances.

Try Framer Full Framer Review

Prerequisites

Basic familiarity with Framer interface
Understanding of components and instances
Knowledge of design properties like colors and typography
Experience with the Framer canvas

Step-by-Step Instructions

Select and prepare your component

Click on the component you want to customize on the canvas. If you don't have a component yet, select the elements you want to turn into a component and press Ctrl+K (Windows) or Cmd+K (Mac). In the Layers panel, ensure your component is properly named and organized with clear layer hierarchy.

Use descriptive names for your component layers to make property customization easier to understand later.

Access the Component Properties panel

With your component selected, look for the Properties panel on the right side of the interface. Click on the Component tab if it's not already active. You'll see the Component Properties section where you can add custom controls. Click the + Add Property button to start creating custom properties.

Create text properties

To make text customizable, click + Add Property and select Text from the dropdown. Choose the text layer you want to control from the Layer dropdown. Name your property (e.g., "Button Label" or "Heading Text"). Set a default value in the Default field. The property will now appear in the properties panel when you select component instances.

Group related text properties together and use clear, descriptive names that non-designers can understand.

Add color and fill properties

Click + Add Property and select Color. Choose the layer whose fill or stroke you want to control. Select whether you're controlling the Fill, Stroke, or other color properties. Name your color property descriptively (e.g., "Primary Color" or "Background"). Set your default color by clicking the color swatch and choosing from your color palette or entering a hex value.

Use your design system colors as defaults to maintain consistency across your design.

Configure boolean and variant properties

For on/off controls, add a Boolean property and connect it to layer visibility or other true/false states. For multiple options, create an Instance Swap property to swap between different components, or use Variant properties if your component has variants. Configure each option with clear labels and set appropriate defaults for each state.

Boolean properties work great for showing/hiding icons, badges, or optional elements in your components.

Set up number and padding properties

Add Number properties to control dimensions, spacing, or other numeric values. Connect them to width, height, padding, or gap properties of your layers. Set minimum and maximum values to prevent breaking your design. For padding controls, you can create separate properties for horizontal and vertical spacing or use a single property for uniform padding.

Set reasonable min/max values to prevent users from accidentally breaking the component's layout.

Test and organize your properties

Create an instance of your component by dragging it from the Assets panel or duplicating it on the canvas. Select the instance and verify all your custom properties appear in the Properties panel. Test each property to ensure it works as expected. Organize properties by dragging them into a logical order - put the most commonly used properties at the top.

Create multiple instances with different property combinations to thoroughly test your component's flexibility.

Publish and share your component

Once satisfied with your component properties, right-click the component and select Publish to Team Library if working in a team, or keep it in your local Assets panel for personal use. Add a description explaining how to use the custom properties. Your customized component is now ready to be used across your project with its configurable properties.

Document your component properties in Framer's description field or in your team's design system documentation.

Common Issues & Troubleshooting

Custom properties not appearing on component instances

Make sure you're selecting the instance of the component, not the main component itself. Check that the property was correctly connected to a layer during setup. Try refreshing the Assets panel by clicking the refresh icon.

Color properties not updating the correct elements

Verify you selected the right layer and property type (Fill vs Stroke) when creating the color property. Check that the target layer doesn't have overrides applied. Remove any manual color changes on the instance and let the property control the color.

Text properties causing layout breaks

Ensure your text layers have proper Auto Width or Auto Height settings. Check that parent containers can accommodate text changes. Use Text Wrap settings appropriately and set max-width constraints if needed.

Properties disappearing after component updates

This happens when the connected layer is deleted or renamed. Go back to the main component, check the Component Properties panel for broken connections (shown with warning icons), and reconnect properties to the correct layers.

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