Using Polymer Web Components
Earlier this year, I started to explore more of the possibilities that Framer X has to offer when it comes to design systems not built using React.
I started off this exploration with a web component Framework called StencilJS. After reading more into the world of web components, I quickly learned about other tools and methods for building these custom HTML elements.
Then I discovered a library called Polymer, a project developed by engineers at Google, designed to make building complex web apps more accessible and efficient. Polymer is built on top of other popular design methodologies, most notably their own design framework, Material Design.
While Polymer aims to solve a complex problem by providing a reusable solution for creating components and apps, I chose to continue my journey exploring the world of web components. I decided to re-build a small design system in Polymer and use it inside Framer X.
Building Polymer Components
To start this exploration, I first needed some components to work with. Heading to the Polymer Project website, I found a few different options to get started. They offer different options based on whether you're looking to create thing for everything from web apps to web components. I ended up starting a project using LitElement, a simple starting point for creating reusable web components.
After getting the first few things set up, I was ready to start building my components. I decided to rebuild the component library we created in the Framer Bridge Starter Kit, which was built to show one of the ways to use a design system in Framer X. The docs for building LitElements are great, which makes it really straightforward when it comes to building a few simple UI elements.
From here, we're ready to publish the components to the NPM registry.
Using Polymer components in Framer X
Now we can move onto adding these components to Framer X.
The first step was to install my newly published package. Luckily, Framer X makes it easy to install packages from NPM. Then I wrote a small script that defined the custom-elements I wanted to use. After that, I was able to include this file in the code folder of my Framer X project which made it possible to use my web components. From there I was able to add my web components to a .tsx file so I could see them in my project. My component file looked like this.
Working with Polymer was great, and definitely helped me grasp another way of understanding how web components work.
As always, feel free to reach out to me on Twitter with any questions or comments.