Get Started with Frames

Let's see what's inside the kit, and install Frames as your Sketch library.

Frames for Sketch - Web Design Kit

Setup as a Library

◦ Open Frames file, and select File → Add as library…

Done, now Frames is your library, and you can access it symbols at any time via the Add menu Sketch styles and components panel.

Customize Layer Styles

◦ Navigate to the Get Started page.

◦ Choose and adjust any predefined styles.

◦ To see the changes click on the update Sketch styles button.

Customize Text Styles

◦ Navigate to the Get Started page.

◦ Holding key, select the desired group of text layers.

◦ Choose a new font or edit text properties.

◦ To see the changes click on the update Sketch styles button.

Frames kit provides Roboto and Rubik fonts by default, you can also get them and install from fonts.google.com.

Note: Frames kit has primary and secondary typeface built in to create unique typography and solve wider range of visuals problems for your projects. You can always change them or remove the ones you don't want to use.

Design with UI Kit

After colors and text are ready, you can jump into designing a website or prototype.

Frames kit provides a layout collection that can serve you as a source of working materials and new ideas. To use it correctly:

◦ Navigate to the UI Kit page.

◦ Choose a layout you want to start with.

◦ Edit and customize layout at your liking.

◦ Combine layouts and components to create your designs.

Additional contents

In addition to the UI kit, you can start your work with premade templates or enrich it with charts and graphics.

Templates

You can choose from a landing page, product page, store, or portfolio templates. All templates are provided in 3 resolutions to fit common screen sizes in 1440px, 1024px, and 360px width artboards.

Charts

The file includes a set of stretchable and customizable charts; you can find them by navigating to the Charts page.

Plugins

You can use Frames with popular extensions to perform advanced techniques and easily manage your design system. Learn more from the blog:

Sketch Tools for Managing a Design System

Sketch Tools for Managing a Design System 2


Still have questions?

Let me know if you have any additional questions, feel free to Tweet me or shoot an email to hello@buninux.com.