Roller · Design Linter
<p>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.</p><p> </p><p>How to use Roller:</p><p>1 - Import or add your styles to the Roller Library</p><p>2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library</p><p>3 - Replace the Error with one of your Library’s styles</p><p>4 - Rinse & repeat to reach 100% consistency</p><p> </p><p>Lint in the following categories:</p><p>• Colors - Quickly fix the 50 (or 5,000) shades of gray that are lurking in your designs.</p><p> </p><p>• Text - If a subtle line-height or letter-spacing is off, Roller will pick them up and get you back on system.</p><p> </p><p>• Borders - Roller lets you add the width and colors of your borders - making it easy to find any rogue input field or card.</p><p> </p><p>• Shadows - Roller gives you superhuman eyes - making it possible to detect subtle differences in shadow blurs or x, y offsets.</p><p> </p><p>• Radiuses - Be confident that any button, card, input etc. has the correct border-radiuses applied.</p><p> </p><p>Keep your team in-sync:</p><p>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.</p>
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 Library
2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library
3 - Replace the Error with one of your Library’s styles
4 - 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 | 14872 installs, 562 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.