What the new Smart Components mean for legacy Design Components
With the release of Smart Components, components are now capable of much more advanced behavior including Variants and Variables.
For this to happen, we had to make some changes to the architecture behind the legacy design components.
We understand you may have questions about this, so we’ll try to answer the most common ones below.
If you have any questions left unanswered, our support team will gladly answer them!
Creating a new component
The difference between legacy design components and new components
All the functionality you know from legacy design components is still supported in the new approach to creating components, with the exception of importing design components into code components (read more below).
As before, you still create a component out of a Frame by pressing ⌘ + K for Mac or Ctrl + K for Windows or now also by clicking the Component tool in the toolbar.
Where legacy design components provided you the option to display property controls for text and image layers, the same can now be done using Variables, and you are now able to do this for many more properties.
Importing components into code
New components can not yet be imported into code components. Support for this is on its way together with more advanced applications for importing components.
Note: For this reason, though, we do not recommend turning legacy design components into smart components if you are using any in your project’s code components.
Publishing components to a package
We’re working hard to revamp the entire component sharing workflow, and to enable this from Framer Web.
This means that currently, Smart Components can not yet be added to an existing package. If you do need to create a legacy design component to add to a package of yours, contact support@framer.com.
Do my existing design components still work?
Yes! All existing Framer projects should work the same way as before. With this release, existing design components remain supported just like before.
You won’t quite be able to create components in the format of design components anymore, but all existing legacy components remain fully supported.
If your components seem to have changed, whether in the Preview or on the canvas, please let us know by shooting an email to support@framer.com.
How do I spot legacy design components from new components?
The context menu will show a suggested message to convert the component if you are dealing with a legacy design component.
From a Primary:
- Right-click the Primary component
- If the context menu says "Convert Component", you are seeing a legacy design component.
From an Instance:
- Right-click the Instance
- Choose "Show Primary"
- Right-click the Primary
- If the context menu says "Convert Component", you are seeing a legacy design component.
Tip: New components also don’t display the label Primary and Instance on the main canvas and in the Layers panel. This is because the Primary only lives in the Component Canvas which in turn means any new component in the main canvas is always an Instance.
Can I convert legacy design components to new Smart Components?
Any existing legacy design component can be converted to a new Smart Component by right-clicking the Primary and choosing "Convert Component".
You will be prompted to name your 'new' component, after which you land in the component canvas.
Tip: To convert components in bulk, multi-select your Primary components while holding down Shift and convert them in one go.
Right-click to convert a legacy design component
Converting Instances
If you convert a Primary legacy design component, any instances it had will not yet be an instance of your new component.
To tell Framer that these instances should be linked to the new Primary, right-click your instance(s).
From the context menu, select "Convert To Instance Of...", after which you can pick your new Primary component.
Right-click an instance to convert it to an instance of a new primary
What happens under the hood?
For components that are converted this way, we automatically convert any text and/or image property controls to the new format of Variables.
If your legacy design component (or its instances) had any event interactions, e.g. a button linking to a new Screen, the conversion process will automatically create a new custom event Variable.
Should I convert my legacy design components?
Generally, we recommend you to use Smart Components as they allow for much more advanced behavior and fully interactive states.
Only if you use a legacy design component in a code component, we recommend not turning them into a new component yet. For all other situations, you should be safe!
Can I still create legacy design components?
The new approach to constructing components is the standard for any new components you create.
If you are in a situation in which you think you require legacy design components, please reach out to us and we’ll gladly help you find a solution.