In this article, we will cover how to create a sticker sheet for project designs. Sticker sheet is also known as deisgn guide or design system, which it layouts all the design elements including components, typography, color, and iconography. Components consist of resuable UI components such as buttons, menus, and cards. Typography includes typographic elements such as fonts and font families. Color has color choices, including an overall palette and specific component colors. Iconography is basically icons representing recurring actions or navigation choices a user might interact with.

We will go over the process step by step in Figma, but you can use any design software to create design system or sticker note. Sticker Sheet or Design Guide usually has its own frame or page.

Let get into it.

First, open your project in Figma then navigate to your recent file or create a new one. Then create a new page in Figma by click on the plus sign on the right in the layer panel.

After that create a new frame, which will be the canvas for your sticker sheet. To create a new Frame from the Region Tools menu in the top-left corner of your screen in Figma. Shortcut on keyboard is cmd+A (on Mac) or ctrl+A (on PC). Choose Desktop as the frame format to have plenty of room to create your sticker sheet.

Select your sticker sheet UI elements

There are a few basic elements you can start creating now to use for your app.

Typography

Select a font that aligns with your product’s branding tone and style. For example, creating an app for kids, rounded fonts can be very appealing and playful. In the professional or serious setting a simpler fonts will do.

In this space, typography is normally organized based on its importance from the most essential information being bold and the least important represented as a lighter weight. It is about play around to find which one works best for your design. You can add style to typography by changing color, spacing, opacity and more.

Color

Color is an integral part of your branding and can evoke emotion in your users. It is a tool that you can use to inspire emotion in users. To learn more about color theory and how the psychology of color can affect your users, check out this article from Medium: The Ultimate UX Guide to Color Design.

Think about the color theory behind the colors you choose and how they’ll represent the app that you’re designing. Once you select your colors, create shapes and fill them with those colors to make color swatches that you feel fit with what you’ve designed so far. Keep those shapes on the page for reference as you design.

Buttons

Button styles should reflect your brand’s style just as much as your font choice and the colors you choose. As you start to define the syle that your app will use, you can cycle through button types to see which you prefer for you app.

Keep in mind that buttons, like byperlinks, have an instantly recognizable appearance. They are most often an outline shape on a white background or a shape with a solid fill.

To create a button on Figma:

1. A draw a rectangle using the Rectangle tool from the menu at the top left (keyboard shortcut = R). Drag the rectangle until you get the dimensions you want for your button.

2. Using the Text button at the top left, add a text box on top of your button.

3. Center the text and change the size using the Design panel to the right of the Canvas.

4. Click back onto the shape layer of your button in the Layer panel.

5. Soften the shape of your button in the Properties section of the Design panel by changing the corner radius of each corner. The higher the number, the more rounded the corners.

Buttons usually have state like hover, active, and inactive, therefore you might need to take those states in consideration when creating buttons.

Saving Components

After you have created typography, color, and buttons for your app, you can start saving your assets as components. Components are useful in keeping design elements consistent and look the same throughout the design.

By documenting your design elements as components, you’ll improve the consistency of your designs and save yourself valuable time as you continue designing your product.

1. First, ensure that you’ve named each asset in your Layer panel. This is particularly important for assets with a few pieces, like buttons

2. Next, select your asset, either in the Layer panel or on the Canvas.

3. Then, right-click on that asset and click Create Component, or select the icon with 4 dimonds on the top bar.

Once you save your assets as components, any updates to the component will automatically change across any files that the asset is used in, called the instance. In other words, the component represents the original appearance, while the instance follows any changes that are made to the component.

States and variants

One thing to keep in mind as you design is that some of your components won’t always look the same. This is the continute process after creating the buttons, where states and variants become handy in smoothing the transition. States are visual representations of the status of a specific component or interactive element in your designs. With various states of the buttons, variants allow you to group and organize similar components into a single container. Making variants helps organize your components and improve the design experience of your product for you and your fellow designers. Check out the article on create and use variants by Figma.

Arrange UI elements onto the sticker sheet

Once you know all the components and elements to include in the sticker sheet, it is time to arrange them. Start by choosing fonts for the heading of each item by choosing a different fonts from the one you will use in your actual design work.

Begin arranging items in your sticker sheet by category. Keep all the buttons together, all the icons together, etc. Make sure to keep an eye on the spacing between your elements in your sticker sheet. Feel free to use a grid if it helps you keep things aligned. Without keeping your spacing inline, things can begin to appear messy pretty fast.

You can review Figma’s material baseline design kit for reference.

Long-term benefits of sticker sheets

Sticker sheets help UX designers work faster and smarter. From fonts to buttons, logos to animations, and more, you can collect every key element and component for your designs and have them available to use any time.

Sticker sheets also ease the collaboration process if you’re working as part of a large team. When you share your designs with developers, a sticker sheet will clarify the coding process as they work on each component. The sticker sheet will also serve as a style guide for fellow designers and help them stay consistent as well.

Good luck!