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
Snippet
Description
xtemp⇥
"Template for adding property controls"
xboo⇥
"ControlType Boolean"
xstr⇥
"ControlType String"
xcol⇥
"ControlType Color"
xenu⇥
"ControlType Enum"
xima⇥
"ControlType Image"
xfil⇥
"ControlType File"
xnum⇥
"ControlType Number"
xfun⇥
"ControlType Fused Number"
xarr⇥
"ControlType Array"
xchil⇥
"ControlType Array with Children (multiconnector)"
Release Notes
1.0.0
Initial release of snippets & template
Credits
This package was inspired by the awesome work of Davo Galavotti and his Framer X Code Snippets package.
Feedback & Improvements
Any type of feedback is extremely useful.
If you have any idea on how to improve this package or there is something wrong / missing, open an issue or message me directly on twitter @aroagilbo :)
