Using your StencilJS Design System in Framer X

Addison Schultz
Jul 10, 2019 · 4 min read
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:

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:

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

  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

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!

Stencil Tricks

A collection of community-written articles on how to do…