×

Using symbol overrides in Sketch and Craft

With the introduction of Sketch version 41, a feature was introduced and that allows the inclusion of symbol overrides. This allows for the fields within a symbol to override with data that is different from the fields defined within the symbol itself.
 

What are symbol overrides?

Symbol overrides allow you select a symbol in a Sketch document and change the fields that are defined within them. When using Craft with overrides, this means that if you have symbols within symbols, they can be overridden as long as these symbols are the same size. 
 
The screenshot shows the ability to select an override from a list of symbols that are the same size:
 
Overrides2.png
 
Above, the navigation bar symbol is selected and because the icons in the navigation bar are defined as symbols and are the same size. 
 
These symbols can be included in a library so that any changes to the base symbol are reflected in the document. The changes in the library are reflected in the design when the color of the Star’ icon is changed and the icon is included in the library.  Changes are pushed to the library and then the design is updated.
 
Overrides1.png
 

How to use symbol overrides with Craft

 
Where a symbol includes fields that can be overridden, use Craft Duplicate to auto populate the field overrides in your document.
 
Creating a symbol populated with data from Craft Data allows for the data to be pulled from the sources that populate copies of the symbol.
 
For example, a symbol has been created that includes a picture from unSplash, a man's name, a headline, and a date, all from the Craft Data plugin using the custom data option. When duplicated, these symbol field values are filled according to values from these selected data types.
 
Overrides3.png
 
After the duplication event, the symbols are populated with the details from the original duplicate field types, so that overrides are applied to each duplicate of the original symbol.
 
Overrides4.png
 
Note the overrides set above, these are the fields in the original symbol that were filled with the Data plugin.