Design Lint is a free and open source plugin for Figma built to help you find and fix errors in your designs. The plugin finds missing styles within your designs on all your layers (text, fills, strokes, border radius, and effects).
Congratulations @daniel_destefanis 👏👏👏 That's a great job!
I have 2 questions
Where did you start for building this kind of plugin?
Have you a plan to add a feature like "prettier for figma"
Report
Design LintMaker
@flexbox Thank you! So I actually started small with building my team at Discord a plugin for theming. We have two themes (light and dark) and creating designs for both wasn't efficient. It would loop over a design and update all colors that had a mapping (dark to light) and create a light theme design for us. After realizing what was possible with the Figma API and having a bit of a background in Front End, the idea of a linter came to mind. I wanted a way confidently say "ok this design is ready for development" or "ok another designer can pick up this file from me".
Prettier is a great idea honestly. There are some great plugins out there from the community like Clean Up, which helps automatically fix or tidy up your files!
Report
@daniel_destefanis Thanks for the input!
And did you use a particular setup to scaffhold the plugin?
Report
Design LintMaker
@flexbox Yes it's built off of https://github.com/nirsky/figma-... which provides the basic sample plugin but with react, typescript, etc.
Report
Figma Letters@daniel_destefanis Nice idea for a plugin. Congrats on the launch. will definitely use it and share it with the community (www.twitter.com/figmaindia)
Report
Design LintMaker
@divjpatel Wow that's incredible! Yes please do! My goal was this to be a resource for design teams of all sizes. Can you let me know localization is an issue while you use it?
Report
Figma Letters@daniel_destefanis Didn't encounter any issues while using it. I will keep you posted if the community (www.twitter.com/figmaindia) has some feedback. Are you up for an AMA session with the community?
Report
FiberyWow, nice plugin. Trying to migrate current designs to the system and this plugin will save me a lot of time. Thanks
Report
Design LintMaker
@mike_yermolayev Glad you're excited! I cannot wait to use it on my own teams design system.
Report
This is superb. Thanks for making this available. Not sure if it's possible (or it's already there and I've missed it) but it would be useful if this could alert you if something is an instance of something. I just corrected a missing color style on an instance when it would have been better to correct the component. Actually, now that I think about it…Maybe I just need to lint components first :)
Report
Design LintMaker
@foremost_tom This is a really great idea. I actually originally had a "Hey this component isn't from your library warning". I could certainly add some text to let you know "this is an instance, jump to master". It would certainly be easier to fix in some spot and let that change propagate!
Report
Design LintMaker
I built this plugin as a way for other designers and design teams to lint their designs. It's available now on Figma or on Github if you want to build something custom for your team!
Report
Revel.xyzCan you explain a bit about the rules? How do you define "missing"?
Report
Design LintMaker
@dcsan Of course. The rules are super simple. For most errors it's "Does this layer have a value for X (lets say fill)?" "Yes it does have a value, but does it have a style?" If the answer is no, that's an error.
As for border radius, there's a field of numbers you can edit in settings that will check if layers that have border radius have a value that does not match that set of numbers, then that's an error.
This is mostly designed for teams or users who stick to using styles for everything. It's also meant to be a simple starting place for teams to fork and write their more specific linting rules if that makes sense!
Report
Connection Flow ArrowsAmazing work, Daniel!
Report
Design LintMaker
@faridsabitov Thank you!
Report
123
Next