AdvancedPropertyControl.md

Advanced Property Controls

There are more possibilities in terms of property controls than what the official documentation covers. See below extra gems for Property Controls:

1. ControlType.Cursor
2. ControlType.Font
3. ControlType.ResponsiveImage
4. Display Icons in the Property Controls
5. Customize the ControlType.Object
6. Get the Property Controls from a component

ControlType.Cursor

The ControlType.Cursor adds a cursor panel to your property control, allowing the user to select a cursor from a predefined list. When using this control type, you will receive the corresponding CSS name of the selected cursor as a prop. (e.g.: grabing, default)

export function CodeComponent({ cursor }) {
    return <img style={cursor: cursor} />
}

addPropertyControls(CodeComponent, {
    cursor: {
        type: ControlType.Cursor,
    },
})

ControlType.Font

The ControlType.Font allow you to use the Official Font Picker

font: {
    type: ControlType.Font,
    controls: "extended", // "basic" or "extended"
    displayFontSize: true,
    displayTextAlignment: false,
    defaultFontType: "monospace", // "sans-serif" or "monospace
    defaultValue: {
        fontSize: 14,
        lineHeight: "1.5em"
    },
},

Adding defaultFontType makes the Font property non-optional.

ControlType.ResponsiveImage

The ControlType.ResponsiveImage allow you to use the src, srcSet, and alt HTML attributes from the <image /> tag, and the positionX and positionY for the CSS attribute object-position.

export default function ResponsiveImage({ image, style }) {
    return <img
            {...image} //apply the src, srcSet and alt attribute
            style={{
                ...style,
                objectPosition: `${image.positionX} ${image.positionY}`,
            }}
        />
}

addPropertyControls(ResponsiveImage, {
    image: {
        type: ControlType.ResponsiveImage,
    },
})

Display Icons in the Property Controls

Framer display icons on really specific property as Text Alignement or Device Orientation. You can reproduce this Control by mentionning the correct optionTitles or optionIcons. You can see below the different Property Controls:

Horizontal

horizontal: {
    type: ControlType.Enum,
    defaultValue: "center",
    options: ["left", "center", "right"],
    optionTitles: ["Left", "Center", "Right"],
    displaySegmentedControl: true,
},

Vertical

vertical: {
    type: ControlType.Enum,
    defaultValue: "center",
    options: ["top", "center", "bottom"],
    optionTitles: ["Top", "Center", "Bottom"],
    displaySegmentedControl: true,
},

Text Align Horizontal

textAlignH: {
      type: ControlType.Enum,
      options: ["text-align-left", "text-align-center", "text-align-right"],
      optionIcons: [
          "text-align-left",
          "text-align-center",
          "text-align-right",
      ],
      displaySegmentedControl: true,
},

Text Align Vertical

textAlignV: {
    type: ControlType.Enum,
    options: ["text-align-top", "text-align-middle", "text-align-bottom"],
    optionIcons: [
        "text-align-top",
        "text-align-middle",
        "text-align-bottom",
    ],
    displaySegmentedControl: true,
},

Directions

directions: {
    type: ControlType.Enum,
    defaultValue: "Left",
    options: ["left", "right", "top", "bottom"],
    optionTitles: ["Left", "Right", "Top", "Bottom"],
    optionIcons: [
        "direction-left",
        "direction-right",
        "direction-up",
        "direction-down",
    ],
    displaySegmentedControl: true,
},

Direction

direction: {
    type: ControlType.Enum,
    defaultValue: "horizontal",
    options: ["horizontal", "vertical"],
    displaySegmentedControl: true,
},

Any Direction

anyDirection: {
    type: ControlType.Enum,
    defaultValue: "horizontal",
    options: ["vertical", "horizontal", "both"],
    displaySegmentedControl: true,
},

Alignement

alignment: {
    type: ControlType.Enum,
    options: ["flex-start", "center", "flex-end"],
    optionIcons: {
        directions: {
            right: ["align-top", "align-middle", "align-bottom"],
            left: ["align-top", "align-middle", "align-bottom"],
            top: ["align-left", "align-center", "align-right"],
            bottom: ["align-left", "align-center", "align-right"],
        },
    },
    defaultValue: "center",
    displaySegmentedControl: true,
},

Orientation

orientation: {
    type: ControlType.Enum,
    options: ["portrait", "landscape"],
    optionTitles: ["Portrait", "Landscape"],
    optionIcons: ["orientation-portrait", "orientation-landscape"],
    displaySegmentedControl: true,
},

Customize the ControlType.Object

There are three undocumented ControlType.Object options: buttonTitle, icon, and optional.

Optional

You can make the object removable by adding optional: true. When the object is removed, it shows an "Add..." button.

object: {
    type: ControlType.Object,
    optional: true,
    controls: {
        toggle: {
            type: ControlType.Boolean,
        },
    },
},

Button Title

You can add a custom title to the button to replace the default one with buttonTitle.

object: {
    type: ControlType.Object,
    buttonTitle: "Style",
    controls: {
        toggle: {
            type: ControlType.Boolean,
        },
    },
},

Button Icons

The icon option lets you change the icon shown on an object property's button from the default three dots to another icon.

There are two icons currently available: "effect" and "boolean"

effect: {
    type: ControlType.Object,
    icon: "effect",
    controls: {
        toggle: {
            type: ControlType.Boolean,
        },
    },
},
toggle: {
    type: ControlType.Object,
    icon: "boolean",
    controls: {
        toggle: {
            type: ControlType.Boolean,
        },
    },
},

Optional Colors

The optional: true setting can be applied to ControlType.Color to make it removable.

color: {
    type: ControlType.Color,
    optional: true,
},

Get the Property Controls from a component

The function getPropertyControls lets you get property controls from a Code or Design component. It returns an object that lists each control by their ID:

{
    RgCWTcpQA: {
        defaultValue: true
        title: "Primary"
        type: "boolean"
    }
}

For example, you can pass by property controls from Design to Code components. From here, you can add any extra controls and overrides that you would like to apply to your design component:

import { addPropertyControls, ControlType, getPropertyControls } from "framer"
import MyDesignComponent from "https://framer.com/m/MyDesignComponent-d94O.js"

export default function Frame(props) {
    const { content } = props
    //You can modify props here
    return (
        <MyDesignComponent {...props} />
    )
}


addPropertyControls(Frame, {
    //You can add here any extra controls you would like
    ...getPropertyControls(MyDesignComponent),
})

References

1. 💬 Discussion about Icons in Property Controls
2. 💬 Disccusion about ControlType.Font
3. 💬 Disccusion about ControlType.ResponsiveImage