wartburggraaf/polymer-framer-components

A repository for Polymer Web Components in Framer X

Framer X / Polymer LitElement Components

This repository is an example of a few components based on the framer-bridge-starter-kit component library, but built entirely using Polymer LitElement Web Components.

These components can be used within any Web Framework, but were designed to illustrate the workflow between maintaining a Web Component based Design System in Framer X.

---

Components

This package contains 4 main components:

<my-button />

A flexible button with multiple props to change the appearance.

Property	Type	Description	Default
text	string	Button text	Download App
fluid	boolean	Width of button	true
disabled	boolean	Button disabled state	false
kind	enum	Button Kind	default

---

<my-input />

An input field with props to change the appearance.

Property	Type	Description	Default
value	string	Input value
placeholder	string	Input placeholder	Email
disabled	boolean	Input disabled state	false
error	boolean	Input error state	false

---

<my-toggle />

A usable toggle with props to change it's state.

Property	Type	Description	Default
disabled	boolean	Toggle disabled state	false
on	boolean	Toggle on state	false

---

<my-tooltip />

A tooltip with props to change the appearance.

Property	Type	Description	Default
arrow	enum	Arrow direction	left
text	string	Tooltip text	Component
error	boolean	Tooltip error state	false

---

Using Components

Follow the steps below to use these components in your project.

Framer X

Check out this repository to learn more about how these components are maintained in Framer X, and see a working example of these living in a Framer X project.

Framer X uses React under the hood, but that doesn't mean you can't use your custom Web Components. If you're new to React, a good place to start is here.

In order to use Polymer LitElements in Framer X, you need to make sure you export the class that is defined in the component file. See this example for and idea of how this looks.

This way, you can import the component and define the custom element within Framer X. See Polymer.tsx in this Framer X project to see how you can import all your components at once.