Prevent unlinking of code components in Framer

How to Prevent Unlinking of Code Components in Framer

When working collaboratively on design projects in Framer, you might want to ensure that code components remain consistent and prevent accidental unlinking, especially if team members aren't familiar with handling code. Framer provides an easy and effective way to safeguard your code components using a special annotation.

Why Prevent Unlinking?

Unlinking a code component disconnects it from its original source, making it independent. While this offers flexibility, it can cause confusion, especially in larger teams where consistency and centralized updates are crucial.

How to Prevent Unlinking in Framer

To prevent unlinking of your code components, simply use the annotation @framerDisableUnlink. This annotation ensures the component remains connected to its original source and prevents easy unlinking through the Framer interface.

Here's how to apply it correctly:

//*
 * @framerDisableUnlink
 * @framerIntrinsicWidth 200
 * @framerIntrinsicHeight 200
//
export default function MyComponent(props) {
  // Component logic here
}

Make sure this annotation is placed directly above your component code without any other code in-between.

Best Practices

• Annotations Location: Always place the annotation directly above your component declaration.

• Combine this annotation with other existing layout and sizing annotations like @framerIntrinsicWidth and @framerIntrinsicHeight as shown above.

• Note that while unlinking can be prevented in Framer's UI, the component's code is still accessible through developer tools. Therefore, avoid placing sensitive information directly into your component code.

By adopting this annotation in your workflow, you'll ensure consistency, reduce confusion among collaborators, and maintain the integrity of your project's design system.

For more details, refer to the official Framer component sharing guide.