Roller · Design Linter
Roller is the first ever Design Linter - giving you the power to automatically find and fix style inconsistencies in your files. Be confident every design you hand-off is 100% consistent with your Style Guide or Design System. How to use Roller:1 - Import or add your styles to the Roller Library2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library3 - Replace the Error with one of your Library’s styles4 - Rinse & repeat to reach 100% consistency Lint in the following categories:• Colors - Quickly fix the 50 (or 5,000) shades of gray that are lurking in your designs. • Text - If a subtle line-height or letter-spacing is off, Roller will pick them up and get you back on system. • Borders - Roller lets you add the width and colors of your borders - making it easy to find any rogue input field or card. • Shadows - Roller gives you superhuman eyes - making it possible to detect subtle differences in shadow blurs or x, y offsets. • Radiuses - Be confident that any button, card, input etc. has the correct border-radiuses applied. Keep your team in-sync:Roller lets you store and share your Library with teammates. Make sure everyone on your team has up-to-date resources and styles when linting.
Plugin Preview
About this plugin
Roller is the first ever Design Linter - giving you the power to automatically find and fix style inconsistencies in your files. Be confident every design you hand-off is 100% consistent with your Style Guide or Design System. How to use Roller:1 - Import or add your styles to the Roller Library2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library3 - Replace the Error with one of your Library’s styles4 - Rinse & repeat to reach 100% consistency Lint in the following categories:• Colors - Quickly fix the 50 (or 5,000) shades of gray that are lurking in your designs. • Text - If a subtle line-height or letter-spacing is off, Roller will pick them up and get you back on system. • Borders - Roller lets you add the width and colors of your borders - making it easy to find any rogue input field or card. • Shadows - Roller gives you superhuman eyes - making it possible to detect subtle differences in shadow blurs or x, y offsets. • Radiuses - Be confident that any button, card, input etc. has the correct border-radiuses applied. Keep your team in-sync:Roller lets you store and share your Library with teammates. Make sure everyone on your team has up-to-date resources and styles when linting.
Plugin Details
| Version | 15 |
|---|---|
| Created | September 6, 2019 |
| Last Updated | January 5, 2021 |
| Category | Accessibility tools |
| Creator | Toybox |
| Stats | 15152 installs, 606 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:plugin.js
More Like This
Discover other plugins in the Accessibility tools category.
Stark - Contrast & Accessibility Checker
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥