This package contains a collection of snippets that will speed up your processes when wrapping your components with Framer property controls.
Language supported: Typescript React (.tsx)
Which snippets are contained in the package?
Full Template for importing and adding Property Controls
ControlType Boolean: It's displayed as a checkbox with two values. The associated property will be true or false, depending on the state of the checkbox.
ControlType String: It's displayed as an input field with an optional placeholder value.
ControlType Color: It's displayed as a color field. Represents a color value.
ControlType Enum: It's displayed as a dropdown menu and the selected option will be provided as a property.
ControlType Image: It's displayed as an image picker.
ControlType File: It's displayed as an file picker that will open a native file browser.
ControlType Number: It's displayed as an input field with a range slider by default. The displayStepper option can be provided to include a stepper control instead.
ControlType FusedNumber: It's displayed as an input field to accept a single value, alongside a segmented control allowing four distinct values to be provided.
ControlType Array: Allows multiple values per ControlType. For most control types this will be displayed as an additional section in the properties panel allowing as many fields to be provided as required.
ControlType Multiconnector: Frame will also gain an additional outlet control on the Canvas that allows links to be created between frames.
Framer X Template & Snippets
"Template for adding property controls"
"ControlType Fused Number"
"ControlType Array with Children (multiconnector)"