Components & Symbol Library

The Components & Symbol Library located within your Web Component Library contains all of the existing low-fidelity Munroe components. After selecting components that fit the needs of your web project from the available components from the Components portion of the library, you can import them as symbols into your low fidelity wireframe website project. If you add a new component to a site, please make sure to design a wireframe version of the component, so that it can be considered for inclusion into the master library and used by everyone.

Once you’ve downloaded the Web Component Library, copied the file and renamed for your particular client, and installed it in your Sketch app, you can add a component to your project by clicking Insert from the top left of your application bar. From the expanded dropdown menu, select the component that you are looking for under Symbols.

Symbol Overrides

Symbol overrides are a great way to take consistent elements of your design and customize them for different situations.

Select a Symbol instance and you’ll see an Overrides section appear in the Design tab of the Inspector. By editing these overrides in the Inspector, you can change the content inside an individual Symbol instance without changing the Source or affecting any other instance of it.

The example below shows the original Desktop / Hero / Left – Half-Width – Button component. Below that, the component was changed to a dark video from a lighter image, the H1 and Large body to white text from gray text, and the carousel from a darker color to a lighter color, all while keeping the integrity of the original component.

Pro Tip

To learn more about overrides in Sketch, click here.