Using Your StencilJS Design System
Lately there’s been a lot of talk about web components. Considering this shift toward components for web applications, this seems like a good time to note that Framer X also handles components that aren't written in React. Namely, by supporting components from StencilJS.
To provide some background, Framer X is a React-based tool for prototyping, designing, and building products—except with living, interactive components that actually work. Teams can also sign up for an account that unlocks a private storefront, allowing designers to collaborate on components with each other, and developers. Less designing with pictures, more designing the real deal.
StencilJS is a toolchain by Ionic, for building reusable, scalable design systems using web components. In this post we’re diving in and building our own design system in StencilJS, then integrating it with Framer X and the Framer Store to create a fully distributable design system. It’s a better system for component-based design, and one that ensures designers are always using the same up-to-date components as developers.
This post 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.
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, choose the option to build components. There's a ton of documentation around on building these components, and a pre-built example component for you to inspect. But today, you’re going to learn how to publish your components.
Publishing components as a design system
Okay, so we have a few components built, 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. List it 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.
- Add this Gist to the code folder of your Framer X project.
- Add the custom hook + script URL to your component file. The script URL for your components will look something like
- Use the custom elements in the render body of the component. An example component might look something like this.
- Optionally add Property Controls to visually edit your component.
- Publish your components to the Framer Team Store!
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 X 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, anyone using the components in Framer X will get the latest one, without needing to re-publish to the Team Store!
You can also check out this starter kit to learn more about how StencilJS components are maintained in Framer X, and view 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, who also want to use Framer X!
If you have any questions or want to chat, send me a tweet.