Creating Design Components in Framer X

From simple reusable visual elements to an entire design system—learn how to do it all.

edoardo

Edoardo Mercati

November 27, 2018

Header

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.

Download a free trial to follow along ›

Get Started

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.

Learn more about the future of design systems

Get tutorials, op-eds and case studies on design systems in Framer X as curated by our team and industry leaders.

Overrides

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.

Actions

Right-click on any instance to find one of the following actions.

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.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Creating Code Components

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.