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. Use the ControlType.Font
2. Use the ControlType.ResponsiveImage
3. Display Icons in the Property Controls
4. Get the Property Controls from a component

ControlType.Font

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

font: {
    //@ts-ignore
    type: ControlType.Font,
    controls: "extended",
    displayFontSize: true,
    displayTextAlignment: false,
    defaultFontType: "monospace",
    defaultValue: {
        fontSize: 14,
        lineHeight: "1.5em"
    },
},

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,
    },
})

Icons in 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,
},

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