Using your StencilJS Design System in Framer X

StencilJS + Framer X

There’s been a lot of talk recently about Web Components, and since people are beginning to think differently about the components they are building for their web applications, I wanted to reflect this shift in the way that Framer X handles components that aren't written in React.

Namely, by showing how Framer X can support components from StencilJS.

To give some background, Framer X is a React-based tool for prototyping, designing, and building products, but with living components that actually work. (No more designing with pictures!) Teams can also sign up for a team account, where they can use their Private Team Store, to distribute components to the wider team.

StencilJS is a toolchain built by Ionic (Shout out to my fellow Wisconsinites) for building reusable, scalable design systems using Web Components. As I heard more and more about developers creating design systems using StencilJS, I thought it would be fun to dive in, create my own design system in StencilJS, and integrate it with Framer X and the Framer Store to have a fully distributable design system for designers to use, while making sure the components are always up to date with what developers are making.

This article isn’t here to explain why you should or shouldn’t use Web Components, but rather how to provide your designers with a full interactive set of components to design with, in Framer X.

Getting Started:

First, we're going to need a Design System built in StencilJS. Luckily, the Ionic team has an awesome CLI tool that will help you generate the environment needed to start building components.

After starting the CLI tool, I chose the option to build components. There's a ton of documentation around building these components, and also an already built example component for you to inspect if you're interested in checking it out! From here, I built out a few more custom components.

Publishing your components as a Design System:

Okay, so we have a few components built, so now what do we do?

StencilJS is already on it. Once you're done making your components, you can simply run npm run build to generate a production-ready library of components ready for most web environments.

To use them, we still need to publish them somewhere. In our case, the easiest way we can publish our set of components is simply by running npm publish, which will publish the built package to the npm registry under whatever you have listed under the "name" key in your package.json.

Using your components in Framer X

Start by opening up a new Framer X Project. Framer X uses React under the hood, but that doesn’t mean you can’t use your custom Web Components. The easiest way to include your components in Framer X is to add the script tag through a custom React Hook. If you’re new to React, a good place to start is here.

1. Add this Gist to the code folder of your Framer X Project.
2. Add the custom hook + script URL to your component file. The script URL for your components will look something like "https://unpkg.com/my-components/dist/my-components.js".
3. Use the custom elements in the render body of the component. An example component might look something like this.
4. Optionally add Property Controls to visually edit your component.
5. Publish your components to the Framer Team Store!

What my Stencil Components look like in Framer X!

Wrapping up

Since we're not specifying a version in the url we're using to get our components ("https://unpkg.com/my-components/dist/my-components.js"), Framer will always grab the latest version of the components that are being used! This means that any time someone who is working on the StencilJS Design System makes an update, the anyone using the components in Framer X will get the latest one, without needing to re-publish to the Team Store!

You can view the code for the StencilComponents I've built here, and see the components in Framer X by downloading this package.

You can also check out this starter kit to learn more about how StencilJS components are maintained in Framer X, and see a working example of some components living in a Framer X project.

This should be a good starting point for teams with a Design System built using Web Components that want to use Framer X!

If you have any questions or want to chat, you can send me a tweet!