From sketch cloud, select Add Library To Sketch.

Once sketch opens, the library will be added under HLK Cloud Libraries.

Once the library is added, you can add individual components by using the symbols menu → lobster-core → chosen component → chosen variation or state.

Update each components internal symbols and text and appearance styles as needed. Specific documentation usage is available for each component.

Save the customize symbol as a local project symbol to allow for quick re-use in your project.

When a component that has multiple states is customized, ensure you account for all states. Generally, the active state implies a hover and focus style. If you chose to separate the focus and hover style, create a new state for the component as a local symbol and take care to indicate states properly in the symbol name.

Once your project has been added to Zeplin, connect your project to the lobster styleguide. This will give developers usage context.

See zeplin documentation for directions.

Go to the ‘+’ button at the top of the screen, and name your component following the html tag name.

After selecting the new page, create a new artboard selecting the preset responsive web size 'Desktop'. Name your artboard the overall component name. Add a label to the artboard that will signify what a designer would look for when they add the component to their project. Ensure the spacing is consistent with other artboards (50px)

Any layers in the symbol are smartly named and easily indicate what they are. This is required for components to be easily consumed in external projects. For example, a nested symbol that can be replaced with another component should indicate where it is placed rather than what it is.

Text and appearance styles are smartly named and easily indicate what they are. These should all be captured at the bottom of the component artboard.

Smart layouts are applied in a way that allows the component to grow/shrink when applicable

Nested symbols are named as such: lobster-component / Parts / nested thing

All component states are captured and named as such: lobster-component / active

Export your symbols and artboards to zeplin project 'lobster core' and zeplin styleguide 'lobster'. Enter a commit message saying what was added. Exporting can be found in the main menu Plugins -> Zeplin -> Export All

Once in zeplin, make sure to group your artboards and components into sections in the same pattern as the other components.

Upload your changes to sketch cloud. Make sure that you are adding a commit message summarizing your changes and indicating which version of the library your changes will be released in. This will be indicated on the ticket.

Make sure the components get connected to the code by having a developer add them to the repo.