Group your property controls

When we started building our first few code components, the right panel quickly turned into chaos.

Twenty-plus sliders, color pickers, toggles all stacked vertically with no structure.

It worked, but it felt wrong. Designers had to scroll endlessly to find what they needed, and it didn’t look anything like Framer’s native components.

That’s when we realized the fix was ridiculously simple: group related controls into one object.

This single change makes your component panels cleaner, faster to use, and easier to maintain.

Why this matters

When designers drop a component onto the canvas, the first thing they see is your right-panel layout. That’s your UX.

If it’s cluttered, your component feels messy.

If It’s tidy with “Colors,” “Spacing,” or “Layout” sections it immediately feels professional, like it was built by the Framer team itself.

Grouping controls with ControlType.Object also helps you:

• Keep related values (like padding, radius, and shadow) together.

• Prevent default overrides (Framer loves to inject random colors if you don’t define defaults).

• Simplify state management by passing one object (ui) instead of four different props.

Example

Here’s a compact version of how we now organize most of our visual settings:

import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

export default function Card({ title, ui }) {
  return (
    <div style="{{" padding:="" ui.padding,="" borderradius:="" ui.radius,="" background:="" ui.bg,="" boxshadow:="" ui.shadow,="" }}="">
      {title}
    </div>
  )
}

Card.defaultProps = {
  title: "Card title",
  ui: { padding: 16, radius: 12, bg: "#fff", shadow: "0 4px 12px rgba(0,0,0,0.08)" },
}

addPropertyControls(Card, {
  title: { type: ControlType.String, title: "Title" },
  ui: {
    type: ControlType.Object,
    title: "Appearance",
    controls: {
      padding: { type: ControlType.Number, title: "Padding", defaultValue: 16, min: 0, max: 64 },
      radius: { type: ControlType.Number, title: "Radius", defaultValue: 12, min: 0, max: 40 },
      bg: { type: ControlType.Color, title: "Background", defaultValue: "#fff" },
      shadow: { type: ControlType.BoxShadow, title: "Shadow", defaultValue: "0 4px 12px rgba(0,0,0,0.08)" },
    },
  },
})

What this does

Now your panel shows one neat collapsible menu called Appearance.

Designers can open it to tweak padding, radius, background, and shadow all grouped in context.

It’s faster to edit, easier to scan, and looks just like Framer’s native property panels.

Pro tip

You can create multiple grouped objects like:

• ui for colors, radius, shadows

• typography for fonts and sizes

• meta for behavioral settings

Each one adds structure and reduces clutter without changing how your component works.

In short

Organizing controls this way doesn’t just clean up your code it elevates your component’s user experience.

It’s one of those subtle details that turns a “working component” into a designed one.