Designing components that support scaling and improve workflow between designers, developers, and managers.
Crafting re-usable and flexible components is one of the most efficient ways to improve workflow between designers, developers, and managers. On top of that, it’s also just good practice to break down a feature to a component level. However it does require extra consideration. Get to know the scope of the feature and truly understand the requirements of the user to do their task and making the biggest impact for the business.
What does a user need to do? What information do they need? How can we guide them to their goals efficiently? How can we make this easier to implement? Having the answers to these questions will help shape up the requirement for the component and the different permutations that is needed for it. This can save time in the long run for developers because it makes the component flexible for the different use cases it might be in. There is a balance to this. Too many permutations can be cumbersome and unnecessary, which is why it's good to fully flesh out the requirements and keep it in scope.
Utilising Figma’s auto-layout and component properties can really elevate a component library’s flexibility. This way of building components can get quite complicated and it really requires a good level of understanding of how components interconnect with one another. The most important part in all of this is understanding how to work the three common grouping structures - group, frame, and auto-layout. This really comes in handy when you're tackling responsive designs, and sometimes you'll even need to mix and match these grouping types to get the effect you want.
Well-documented design components are essential for clarity and ease of collaboration. They provide a comprehensive guide on purpose, usage, and behaviour, ensuring consistency across projects and facilitating efficient implementation. Further down the line, the documentation serves as a valuable resource for troubleshooting, aiding onboarding, and contributing to better communication between the different collaborators involved in the project.
