[et_pb_section fb_built=”1″ _builder_version=”4.4.8″][et_pb_row _builder_version=”4.4.8″ width=”50%” module_alignment=”center”][et_pb_column type=”4_4″ _builder_version=”4.4.8″][et_pb_post_title author=”off” comments=”off” _builder_version=”4.4.8″ title_font=”Merriweather||||||||” title_text_align=”center” meta_text_align=”center”][/et_pb_post_title][et_pb_image src=”https://webjac.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-12-at-1.34.17-PM.png” title_text=”Screen Shot 2020-06-12 at 1.34.17 PM” _builder_version=”4.4.8″][/et_pb_image][et_pb_text _builder_version=”4.4.8″ text_font=”Source Sans Pro||||||||” text_font_size=”20px” text_line_height=”1.6em” width=”100%”]

The process of designing interfaces can get repetitive at times.

Regardless of wether you’re creating a complete design system or just some screens you’ll probably find yourself creating the same design elements over and over.

Sketch offers a great way to solve this to make the design process easier and faster.

Let’s create a list of Search Results, each one with the same interface elements (title, description, date, call to action). To do so, you’ll probably find yourself copying and pasting elements and modifying each one with its own content.

What if there’s a requirement change? There might be a request to move some elements around, change font sizes or colors.

This is where Symbols become very useful.

Symbols enable the creation of an element to reuse it across an entire project, keeping a master that works like a template. Whenever you make changes on the master it’ll update every instance of it.

Symbols can be made from every element: shapes, text, groups and even other symbols.

 

Create a new Symbol

Continuing our example, select the elements that will make our symbol (the elements of a search result) and go to the menu Layer > Create Symbol. Give it a name and voilá, a new Symbol is born!

Sketch automatically makes a new Symbols page where we’ll find the Symbol we just created and add an instance of it in the Artboard we’re currently working on. Copy and paste this instance a few times and they all will be connected to the our Symbol.

There’s another way to insert an instance of a Symbol by going to the Components Panel (left side of the Sketch app). There will be the new Symbol, just drag it into any Artboard.

 

[/et_pb_text][et_pb_video src=”https://webjac.com/wp-content/uploads/2020/06/create.mov” _builder_version=”4.4.8″ custom_margin=”||60px|||”][/et_pb_video][et_pb_text _builder_version=”4.4.8″ text_font=”Source Sans Pro||||||||” text_font_size=”20px” text_line_height=”1.6em” width=”100%” module_alignment=”center”]

Edit a Symbol

Suppose we need to make the same edits to all the Search Results. To do so double-click any instance to enter the Symbols Page where we can edit it.

Any changes made to the Symbol master will apply to all of its instances.

After making the edits click Go to Instance to return to the Artboard and they will be applied to every instance of our Symbol.  Magic!

[/et_pb_text][et_pb_video src=”https://webjac.com/wp-content/uploads/2020/06/edit-master.mov” _builder_version=”4.4.8″][/et_pb_video][et_pb_text _builder_version=”4.4.8″ text_font=”Source Sans Pro||||||||” text_font_size=”20px” text_line_height=”1.6em” width=”100%” module_alignment=”center”]

 

Edit Instances of a Symbol

So far we’ve created and modified the symbol for the Search Result. The changes we made applied to ALL instances of it, but what if we need each Search Result to have its own content? (Different titles, descriptions, etc.)

Enter Overrides.

Click an instance of a Symbol and there will be an Overrides section on the Inspector Panel to the right.

There we’ll be able to change the text elements of this instance and can even replace images. Changes made here will apply ONLY to the current instance, creating unique content while also being able to modify them all at once. Delightful! 

[/et_pb_text][et_pb_video src=”https://webjac.com/wp-content/uploads/2020/06/edit-instance.mov” _builder_version=”4.4.8″][/et_pb_video][et_pb_text _builder_version=”4.4.8″ text_font=”Source Sans Pro||||||||” text_font_size=”20px” text_line_height=”1.6em” width=”100%” module_alignment=”center”]

 

Final Thoughts

Symbols are a super powerful tool when creating interfaces and design systems. They will help you quickly update a design across an entire project while allowing each element to retain its own unique content.

There are many other things that can be done with Symbols like swapping symbols in an instance, created nested symbols, using smart layout and more.

To learn more, please refer to our documentation.

[/et_pb_text][et_pb_text _builder_version=”4.4.8″ text_font=”Source Sans Pro||||||||” text_font_size=”20px” text_line_height=”1.6em” width=”100%” module_alignment=”center”]

 

By Jaime Creixems

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]