DIY UI, Part 2: Extracting Assets from UI Kits
Introduction:
Welcome back! In the first post in this series, we delved into the world of DIY UI design for embedded systems and introduced the concept of using off-the-shelf UI Kits and Element Packs. Today, we’re taking the next step in this journey. You’ve chosen your UI Kit, and now it’s time to extract the assets you need to create a cohesive and visually stunning user interface. This blog will focus on two popular types of UI Kits: Photoshop documents (.psd) and Figma files (.fig). We’ll cover the essentials of working with these files, ensuring you can efficiently and effectively extract the elements needed for your embedded systems project.
Getting Started with .psd UI Kits:
Opening the Kit:
While Photoshop is a widely used standard of the design industry, it may not be acceptable for a myriad of reasons. There are several free or cheap alternatives, but Photopea.com has become my editor of choice when I need photoshop effects and filters, i.e. the fancy stuff that makes it look professional. When choosing your editor, make sure the opened file looks just like the website preview and that you do not need to flatten or merge any layers upon opening the file.
Left: .psd imported into Photopea. Right: Watermarked preview from CreativeMarket.com
Exploring Layers and Groups:
The best .psd UI Kits are like well-organized filing cabinets, with each layer and group neatly labeled and structured. Start by familiarizing yourself with the layers and groups in the file. There should be logical hierarchy, making it easy to locate the elements you need. Look for layer groups named “Buttons,” “Icons,” “Backgrounds,” etc. This organization is your map, guiding you through the design assets.
Customizing Elements:
Before extracting, you may want to customize certain elements to match your project’s theme. Change colors, adjust sizes, and tweak designs as necessary. For instance, if you have a button that needs to be a different shade to match your brand’s color scheme, now is the time to make those adjustments. If you are new to these tools there is a large user community out there to help with video tutorials. Still uncomfortable? Check out our Design Services.
Removing Embedded Text:
Most UI Kit files come with text layers that you might not need but are there to provide examples of what it could look like and offer a suggested font that pairs well with the design. To ensure the elements are ready for use in your embedded system, you will either need to remove any embedded text layers or create duplicate copies of each item for all possible labels, including any translations. It might seem like a no-brainer to remove the text, but that is not always the case. This choice might depend on the effects used on the label itself, such as glowing letters. Also note that many embedded systems do not have the full suite of text editing features that you have in graphic design tools, so dynamic text may not look as good as the text shown in the .psd file.
Exporting Elements:
Once you’ve customized and cleaned up your elements, it’s time to export them. This is where context is key to making your life easier down the road. Many times, when dealing with interactive or otherwise dynamic components, we need multiple images from a single component. As a simple example, a slider has a channel and a handle. We can extract them individually by duplicating the layer, or layer group into a new file. In Photopea you can select the layer or layer group and choose “Duplicate Into …” from the Layer menu. Duplicating layers in a .psd file will get you a new file with a lot of extra transparent regions the size of the original file. Utilize the “Trim” feature of your image editor to get just the bits of the image you need, before finally saving the file as a .png to preserve transparency and quality of the images.
Exporting, Step 1: Duplicate layer group into new project
Exporting, Step 2: Trim extra transparent regions
Exporting, Step 3: Save as .png
Repeat these steps for all the components you need, and you’ll be ready to start iterating on a UI in minutes.
Working with Figma UI Kits:
Opening the Kit in Figma:
Figma has a web version and a desktop app with the ability to open external files. Additionally, there is a Figma Community page which includes a search tool and offers free UI Kits that open directly into Figma. I’ll be working with this free Nuemorphic UI Kit I found through the community page.
Understanding Components:
Figma’s strength lies in its use of components, which are the UI building blocks we are looking for. In a typical well-organized UI Kit, these are organized onto their own page or grouped together in part of a page. Find the list of Pages and it shouldn’t be too hard to spot the components as they are typically laid out like a menu of UI Elements you can easily pick from.
Customizing Components:
Just as with a .psd, you’ll want to customize components to fit your project’s needs. Adjust colors, sizes, and styles to match your brand and vision. Figma makes this easy with its intuitive interface and real-time preview of changes. Everything here will almost always be vector-based, so scaling up will not have a pixelated effect.
Removing Embedded Text:
In Figma, removing embedded text is mostly straightforward. Select the text within a component and delete it. Multiple component states may be copies of the same Component called an Instance. Here, the top button is the component, while the bottom is an instance. Notice the Icon difference. You can change the instance without changing the component, but changing the component will affect all instances.
Exporting Components:
Figma has some handy exporting features. Select the component you want to export, then use the “Export” feature in the right-hand panel, near the bottom. If it’s not there, you might just be in Dev Mode. Choose PNG as the format for high-quality, transparent images. Make sure that the “Ignore overlapping layers” is checked so you have a transparent background.
The final step in exporting is to trim any extra transparency from the image. When isolating parts of a multi-image object, like a slider with channel and handle images, the export could create a handle image the full width of the channel. A simple trim will make short work of that, but alas this can’t be done easily in Figma. Since the images are already rasterized, you can use just about any image editor you want. Tools like GIMP or ImageMagick can make quick batch jobs here.
Tips for Efficient Extraction:
Batch Processing:
Figma as well as many image editors allow for batch processing, which can save you significant time. Image editors often have Macros or Actions to automate repetitive tasks, so trimming and saving can be done in 1 click. In Figma, you can select multiple components and export them all at once. This is particularly useful when you have a large number of assets to extract.
Consistent Naming Conventions:
Maintain a consistent naming convention for your exported files. This practice not only keeps your assets organized but also makes it easier to integrate them into your embedded system’s development environment. Name your files descriptively, such as “btn_primary_up.png” and “btn_primary_down.png” for button states.
Resolution and Scaling:
If you don’t have a wireframe or other design to base precise sizes from, don’t spend forever trying to get the perfect resolution of your exported assets. A few generic sizes are fine for prototyping. For example, a button might have 2 or 3 different widths, all with a consistent height. Scaling the images after they are in a rasterized format can lead to an inconsistent look, so the goal is to be in the right ballpark now and start iterating, with the intention of coming back and getting the pixel-perfect fit once the design is finalized.
Skip to the fun stuff:
Support is available for all parts of this process. Finding the right UI Kit is a great starting point for a designer and the research you’ve already done will yield dividends. By clearly understanding your needs and the design elements you’ve chosen, you can collaborate more effectively. Whether you need help with customization, asset organization, or even final integration, having a skilled designer on board can elevate your project and save you valuable time in the long run.
Conclusion:
Extracting assets from UI Kits can be your shortcut to designing a cohesive and visually appealing user interface for your embedded systems project. The process can be streamlined with the right approach and tools. By following these steps, you’ll be well on your way to creating a professional-grade UI without the need for extensive graphic design skills.
Stay tuned for our next blog post, where we’ll dive into the process of assembling these assets into a functional and beautiful user interface. Until then, happy designing!
Author Bio:
Brian Deters is a Firmware Engineer with over 16 years helping bring products to life with intuitive graphical user interfaces. He started his career as an FAE and after moving into development he got his hands into every part of the Amulet ecosystem, which gave him the insights to transform constrained embedded systems into delightful user experiences. In his free time he enjoys spending time with his children and woodworking in his garage.