Three cases to use background color as component in Figma
#Figmatip → a few lessons learned
During development Material Design System for Figma a few simple tricks were discovered. Everything is based on having color as component.
Accelerate design and development time by up to 50%
Material Design System for Figma consists exactly of 512 material UI components and 1171 material icons.
- Unique architecture for quick customization
- Equipped with simple & clear documentation
- Dedicated to fit desktop & mobile applications
- Made with material design guidelines following
- Uses Figma ‘Instance’ features at maximum
- Supports Figma web API for real-time integration
- Customers support 7 days per week!
Learn more → http://setproduct.com/material
If you still in doubts, I recommend you to watch the overview 🎥
Masking icons with color component
In case you need to obtain recoloring ability for icons set in your team library, simply put the color component over the icon, select both and choose “Use as mask”. The more icons you have, more the same actions you have to repeat for each icon.
Custom border with color overrides
This one is rather narrow case, but if you want to have your borders connected to the master-color component either, you have to build your design blocks within it. Pick your color component, clone it, scale to 1px lines and place near frame borders to emulate the Tab:
Adding shadow for clipped frames
If you wish to keep your overflow content hidden and avoid the limit of having shadows simultaneously, you have to place your clipped component or group inside another frame and place behind the background rectangle with shadow:
Created with Material prototyping system 🔨 for Figma
❶ Explore the system → http://setproduct.com/material
❷ Components overview → http://setproduct.com/material/components
❸ More videos → http://setproduct.com/material/videos
❹ Purchase & download → http://setproduct.com/material/download
❺ 1000+ material icons → http://setproduct.com/material/icons_pro
