Variants and Variables are here, and you can now test them in the beta feature on Framer Web.
For this reason, the Variants and Variables features are first available only as a beta feature.
Third-party browser cookies
Variants will currently not work if third-party cookies are disabled in your browser.
If you think this may be the case for you, consider enabling them.
Find below list to see which processes aren’t yet (fully) supported:
|Sizing of Primary||Scale animations or open/close animations are not yet possible, as the primary's root Frame can’t yet be scaled between Variants.|
|Scroll||Scroll components are not yet compatible with Variants and Variables.|
|Page||Page components are not yet compatible with Variants and Variables.|
|Transforms||Support for scale (scaleX, scaleY), origin (originX, originY), separated rotationX, rotationY, rotationZ, and skew (skewX, skewY) is out of scope for now.|
|Auto-sizing||The ability to auto-resize the component based on its contents is out of scope for now.|
|Stack, Shadow and Border||These properties can not yet be turned into Variables.|
|All Text properties||The ability to customize all text layer properties as a Variable is in progress.|
|Graphic / SVG layers||If your component has a custom Graphic, it may not animate well when using Variants.|
|Image Variables||Image fills do not work properly yet as Variables.|
The below list displays a number of known issues:
|Shared Preview||It is a known issue that some components may appear different in the Shared Preview|
|Component deletion||Newly created design components can not yet be deleted|
|Magic Motion||When a component also contains a Magic Motion transition, you may see unexpected behaviour in the transitions.|
|Detaching||Components can not be detached yet|
|Publishing||Components can not yet be published|