Framer Developer Gems

This repository documents advanced features not covered in the official Developer documentation from Framer. It's a curated list of function in use in Framer discovered by the Community. These discoveries open the development of more advanced components and overrides. As additional documentation, it doesn't cover the basics and suppose you are already aware of it. If you are not, you can refer to the Further Reading section to learn more about Framer and React developement.

Discovered Gems

Below is a list of gems discovered by the community that have been discussed in the forum (💬) or documented here (📝).

• 📝 Advanced Property Control
  There are more possibilities in terms of property controls than what the official documentation covers. You can:

  • Display Icons in the Property Controls
  • Use the Font Picker
  • Get the Property Controls from a Component

• 📝 RenderTarget
  The RenderTarget function lets you know where Framer renders the component.

• 📝 Handshake
  Export your Design Component in a Next.js Project

• 📝 useStore
  Share data between two Code Components or Code Overrides across the Website.

• 💬 useRouter
  Navigate between your website pages.

• 💬 @framerDisableUnlink
  Disable the Code Edition of your Component

Futher Readings

Some helpful guides to learn React × Framer development.

• Official Framer Developer Documentation

• Legacy Framer Documentation

• React Guide by Framer

• Official React Documentation

Contribute

Feel free to contribute to this documentation by sharing or documenting your discoveries. You can add one by submitting a pull request or tag me (@Victorien) in the related discussion from the Framer Forum. Thanks to all Framer members for their contribution ❤️.