Figma

Figma's Design Libraries are very powerful tools to create reusable components and develop Pattern Libraries. However, it's important to set up your components correctly from the beginning in order to get the most out of them. Today, I'll show you the best way I found to set up UI components in order to maximize their scalability across all their design states.

Use layered blending modes and fills to create more versatile image filters across your component instances. When dealing with multiple instances of components, applying image filters across children can be difficult. The Image Filter tool works well but lacks batch editing and changing image files can reset the filter controls.