Design components are very similar to Symbols in Sketch but more powerful. You can convert a Frame, which contains any number of layers, into a design component. If you change the Master component, all the instances across your design will change as well.
Downloads
To follow this course, you’ll need the assets. You will also find the Framer X source files to compare against your own work.
Create a Design Component
To create a design component, you need to select a Frame from your canvas, and press ⌘+K. You will notice that the element that you initially selected will have a Master label next to its original name, and if you copy the master, the copies will have the label Instance.
Unlike Sketch, the Master component doesn’t reside in a separate Page. It’s directly available for edit right in the current document. You can edit on the fly just as you would edit any other elements.
Working with overrides
A component can contain text, images, icons, etc. The number of overrides will depend on the number of editable elements that you have in your Master component. Overrides help you edit a component individually but with custom content. Any structural change made to Master will apply to instances, But you can override the positioning and size of the inner elements, as well as the size of the component as a whole.