Why variants instead of separate components? I've got an entire journal entry about when to use variants VS. That's a lot of effort for information that's so predictable and unlikely to change! Instead of layer-spelunking, you could build out variants that handle all possible ratings and make them available at the top level of the component. If the default variant is a 5-star rating, but you need one that depicts 3.5, designers have to dig into the layers and update all those icons, and change the text. It is especially important if you use base components or atomic design principles, and tends to come up for complex molecule-level size components and beyond. This will save folks from deep-clicking, and that in turn can save lots of time. Quality 2: The most common modifications are accessible from the component's top layer. Something else to note about thoughtful layer naming: it's necessary in order for other qualities, such as 2 and 7, to be done successfully. If you're curious about how many different approaches there are to layer naming, consider subscribing to my newsletter! I'm compiling a list of Figma layer naming methods that I'll eventually publish here on my blog. Whatever you choose, be consistent, and document your naming conventions. I think it's a nice way to keep tidy enough without feeling like you're embarking on a deep clean (unless you're into that). Or you just keep your layers "clean enough" and free of any Frame 1851 or Rectangle 234 objects lying around by using general terms like "container", "row", and "column." Dimitry Bruin encourages this for folks who work solo. Luis has published a figma community file outlining when and how you'd take this step. Or perhaps you want to prioritize engineer's experience in the file by including CSS class names in your layers. The names will reflect the category of information held in each column, for example: "First name", "Last Name", "Phone number", "Age", "isCustomer." How, when, and if you name layers entirely depends on how you and your team use Figma.įor example, if you use the Google Sheets Sync plugin, your layers will be named after column names in the sheet so the instances can accept data when you run the plugin. There are 4 distinct qualities a highly usable Figma component has: Quality 1: Layers are thoughtfully named. Signifiers show us what actions a product affords us, and when we understand those actions we understand the ways in which the product can be used, and how usable it is. Thoughtfully designed signifiers are instrumental to creating a highly usable product. Can a user easily discover key features? Once a user discovers key features, are they able to understand how and why to use them?" Patrick writes that usability is all about "discoverability and understanding. Skip down to the free checklist resource ⭐️ Usability What does it mean to have a usable Figma component, and what exactly is "usability" anyway? For each area of UX, I've explained which characteristics of Figma components contribute to that area.īy the end of this post you'll have the information you need to go back and improve past components you've made, and well equipped to make excellent ones from this day on! This post is about applying those areas to Figma components. If you've spent any amount of time in anyone else's files, you've probably noticed they set things up differently than you do! There's a lot we can learn from each other by sharing our work, but when we're producing components for others to use, we should make sure the folks on the receiving end are getting a good product. But how do we ensure we're delivering on good UX? We can turn to Patrick Thornton's post about the 5 areas of UX, and use those areas to evaluate the UX of any product: And good designers are concerned with producing products that offer the best possible experience for the people using them. Whether you're building and using them for yourself, for your teammates, or publishing them for the wider world to use, every component you make is a tiny product in and of itself.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |