Creating Design Components in Framer X
From simple reusable visual elements to an entire design system—learn how to do it all.
November 27, 2018
D esign components are often dismissed as large project requirements. But there’s a huge benefit in using component-based design for virtually every project, big or small. Say you’re designing an onboarding flow for your app in Framer X. You start with a mockup, and as you begin to add more elements — buttons, navigation and type — you quickly turn those into components. Twenty frames later, you’ve nailed your UX and built up a library of reusable components. Now you can start playing around with colors, branding and type by editing master components and watching as changes are reflected across the board.
Once your new design has been implemented, you can choose to package and publish your design components to the community-driven public Store or contribute to your company’s design system via your private Team Store. In the guide below, we show you how to create your first design component in Framer X.
First, make sure you have an element selected on the Canvas, like a card consisting of an image and a couple of text layers. Then, head over to the Components tab in the left-most panel, and click New. Now, name your component and click Create.
A thumbnail of your component will appear in the panel, and the selection on the canvas will turn purple to indicate that it is now a component. That’s it—you’ve now created a master component.
Masters & Instances
The design components you see in the panel are referred to as master components. If you paste, duplicate or drag a component from the panel to the canvas, you’ll create an instance of that component. All changes made to the master will be reflected within each instance.
You can double-click on any instance to edit its child layers. You can override the visual properties of any single instance and customize properties like color, opacity and radius—or override layout options like its position and size. You can always right-click and hit Reset Overrides to revert styling back to match the master component.
Right-click on any instance to find one of the following actions.
- Show Master — Selects and highlights the master component on the canvas.
- Detach From Master — Detaches the instance from its master component.
- Update Master — Updates the master based on the instance overrides.
- Reset Overrides — Rests the overrides of the instance.
Organize and Publish Components
Ready to share your design components? We recommend setting up project files for each package or collection of components that you want to publish. Within the project file you can then create design (and code) components. How you structure your packages depends on your team, but we suggest making smaller project files with a few components each. This makes it easy to update and maintain your design system over time. We also recommend storing all your project files in a shared folder and calling them something akin to “Buttons” or “Cards” for easy recognition and retrieval when you need to make updates.
Pro tip: when renaming a component, use slashes to organize it in subfolders — i.e. Layout / Cards. This is a great way to keep your component panel tidy and make it easier for your teammates to find what they need.
Once you have a project file with a few components, you can publish that to either your private Team Store or the public Store. Just navigate to the Team Store section in the app and click Publish in the upper left. Follow the same steps while in the public Store tab to publish your package for the entire community. In both cases, you’ll be able to edit the name, description, icon and artwork of the package to be published. For more detailed instructions on publishing to the Store, check out our Help Center article.
You can further extend the power of the Team Store by adding interactivity to your design system. In Framer X, you can turn design components into code components and add custom UI that allows your teammates to customize the states and interactions of the components, within the parameters of your brand guidelines. Learn more in our guide on Creating a Code Component in Framer X.