When hovering over an asset, an 'x' icon will appear. You can add a description to illustrate a group more effectively and to enable team members to understand when and how this particular group should be used. Double click on it if you want to rename it. When you switch to the Icon or Image category and click on the '+' icon, a window will appear to help you import an image (in PNG, JPEG, JPG, SVG or GIF format) or icon (in SVG or PNG format ) from local drives. You can select a color and click on the blank area outside the panel to add it to your palette. To add a color, select the color category and click '+.' A color picker will then appear. You can either add colors, images, or icons directly on the web or import fonts, layer styles, and components using our Sketch plugin. There are two ways to add assets to your libraries. On the left-hand panel, when you hover over a group, a trash can will appear. To rename a new group, click on the group name in the workspace. Click the '+' icon to create a new group. If you hover over a group, a '+' icon will appear. When you create a design system library, you can find six categories on the left-hand panel, including colors, fonts, layer styles, components, icons, and images. To manage design assets better, you can create multiple groups under each category, and drag-and-drop these groups to reorder them. Many image formats, such as PNG, JPEG, JPG, SVG, and GIF, are supported. With the Mockplus Design System, you can easily import different icons in both SVG and PNG formats.Īs well as icons, you can also import images such as banners, and cover and background images. When developing software, icons are also widely used. Once imported, any changes will be synced if you edit these components in your design tools. You can import components to online libraries using our plugin.

With some simple clicks, the layer style gathered in the online libraries can also be applied to any layer of your design tool. With the Mockplus Design System, you can curate a layer style in your design tools and add it to the online libraries using our plugin. Layer styles-such as element frames, shadows, and gradients-are frequently used in website or mobile design. With the Mockplus Design System, you can create and reuse your own font systems. This way, they can apply these colors directly to different elements like texts, borders, and backgrounds to improve the site's ability to engage users.įonts are another element that is key to the creation of a unique brand identity. In order to build a unique brand identity, product teams customize a whole color system for their products and services. You can then change the basic settings of this library, such as its name and description.Ĭlick 'More' on the cover of a DS library and choose 'Delete' to delete the DS library.Īfter creating a library, you will be given six categories with which to gather and manage your colors, fonts, layer styles, components, icons, and images separately. To change the library's settings, click 'More' and 'Information' on the cover of the library. Click the pencil icon to rename the library. When hovering over any library, a pencil icon will appear. Select one and give it a name to create a new library.Ĭlick 'More' on the cover of a library and choose 'Clone' to make a copy. You can edit these assets and then add or import new ones to customize the library to your own design system. Sample: The library is already set up with basic assets like colors, fonts, layer styles, icons, texts, and images. You can add or import assets directly or use the Sketch plugin. You will see two library options in the pop-up window:īlank: The library is empty.

To create a new library, click 'New' at the top left of the library homepage. Here's how you can get the most out of the design system library: Create New Libraries

And, with a simple link, your entire team can join, view, share, and maintain the same design language. Any changes you make are auto-synced online. If your company offers users multiple products or services, it may help you to create several libraries to unify and manage the various design systems separately. You can define categories and groups to ensure brand consistency. When using the Mockplus Design System, design system libraries are where you can gather, organize, and manage all design assets, such as colors, images, components, and other common UI patterns.

Axure rp logo svg