A Guide to Creating Design Systems In Framer X

Find out why the Framer X Team Store is now the perfect home for your design system.

tom

Tom Watson

November 27, 2018

Header

T oday we launched a beta version of the Framer X Team Store, a fantastic place to create, build and scale your company’s design system.

Request beta access to the Team Store ›

While design systems are considered a given at most companies, there’s rarely a clear cut path to success. Prior to joining Framer, I helped build design systems for both Facebook and Pinterest and in both cases, upfront investment and cross-team coordination were required to reap any real efficiency gains. At Pinterest, after the initial euphoria of getting everyone aligned and using the design system, we immediately began struggling with keeping things up to date, getting engineers in sync, and managing two disparate sets of components — one in our design tool, and one built by the engineers.

Thankfully, the Framer X Team Store is a thoughtful product offering that helps provide value from day one, making it easier to implement, keep updated and scale your design system across both design and development. In the following guide, we take you through the thinking, process and benefits of building your design system in Framer X:

Build a shared visual foundation

Let’s talk process — so you’ve moved beyond just brand assets, and between all the designers on your team, you now have a library of icons, button states, an input field or two, and a few basic compositions, maybe a login window and signup screen. If we’re being honest, they’re probably all sitting in Sketch, possibly using Sketch Libraries. Well the good news is, this isn’t the worst starting place. From here, it’s easy to bring everything into Framer X and start working on a system that gets your whole design team aligned.

To start, we recommend you collect and organize each package into separate project files. Create a file for icons, buttons, inputs, or in any format that makes sense for your team structure. This helps keep things somewhat organized and gives you a good base.

Don’t worry about making it perfect — the how’s of organizing components are rarely straightforward. A good way to begin is by taking your brand and product guidelines (general color and type rules) and applying a grid system to everything. Simple, defined rules for the spacing of the objects in layouts provides designers with the flexibility to quickly design pages and flows. Once that base is set, you can easily use those rules to start defining components.

From basic to custom components

Start with the basics — buttons, loading indicators and sliders — and build up from there, adding in various components that are unique to your company. For Facebook, it’s Newsfeed stories, at Pinterest it’s the Pin object. Now at Framer, we’re dogfooding our own product with Fraction, a React-based design system. In our experience, turning smaller building block components into more compositional components make for even faster project layouts.

This particular method helps you keep design components updated and have other components reflect those changes when you make updates. Framer product designer Edoardo Mercati has a great post up on just how exactly to create, organize and publish design components in Framer X.

One of my favorite features of the Team Store is the auto-updating. In Framer X, when someone makes a change to a project file and publishes an update to the Store, everyone who has installed that package immediately gets notified in the app. They can choose to update that package and resulting set of components, or opt out. A far cry from reminding team members to check an intranet site or a shared folder of files (tools have really come a long way for designers).

Even if you only invest in creating a visual design system in the Team Store, you’ll start to get tremendous value by aligning your team and keeping everyone updated when things change, all directly within the tool itself.

The power of interactivity

Now this is where Framer X and your design system really start to come together. Since it’s Framer, you already know that all of our components can also be code components. This means that how you structure your design system can be tailored to your company’s brand and product guidelines.

If your organization wants tight control over the exact spacing and specific usage of your buttons, make it a code component and set up custom UI that allows the designers on your team to select from a specific set of properties.

You can quickly and easily set primary and secondary buttons, disabled states, rules around sizing, and even truncation or size limits. Again, it’s all powered by code, so you’re always able to configure everything so that any designer who installs the component can simply toggle between pre-approved brand colors, specs and usage.

To create a code component, you’ll follow an off-canvas workflow that begins in the component panel. Framer Design Lead Benjamin den Boer shows you just how to create a code component in Framer X.

Supercharge designs with live data

Live data is the best way to avoid designing with unrealistic images or fictitious content, and fantastic for validating prototypes much earlier in the process. Code components make this simple. By setting up your components to use our file control property you can quickly load in JSON files or connect directly to your company’s API to load always up-to-date data directly in Framer X. Any kind of data can be pulled in — user profiles and photos, street addresses, restaurants, exchange rates or transaction information.

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.

Once you start, I’m confident you’ll start to understand why using code components within the product design workflow makes complete sense. While you may start with design components, the ability to add constraints, interactivity and data will quickly lead you to the practical and quick functionality of code components. In the end, you’re building in code, so regardless of the language your developers use, the practicalities of working in code quickly become apparent. Edge cases, consistency, constraints — it all comes into focus when you start using Framer X with code components.

I’m far from a code-savvy designer, and likely, neither is everyone on your team. But from what we’ve seen, a few motivated folks can help leverage the full power of Framer X to uplevel the entire team. As part of the Team account, we offer implementation assistance with getting your design system up and runnng.

A single source of truth

Once you’re using code components, the next logical step is to find a way to streamline getting your production code into your design tool. This is the holy grail, having engineering and design always in sync.

Since every company has a different setup, we don’t have an exact playbook on how to import production components. But as you can see, some of our customers have already started to do it and as we finish building out our own React-based design system, Fraction, so we’ll start to share our best practices soon.

So far, I’ve only covered the basics of the Team Store. If you think your team will benefit from having a truly interactive design system, talk to us about all the ways we can support you with a Teams package.

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 ›

Creating Code Components

Read more ›

Creating Design 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.