Design Lint

A design linting plugin for Figma.

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).
Embed
Featured
discussion
Would you recommend this product?
David LeulietteFreelance React Native Developer
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"
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@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!
Share
David LeulietteFreelance React Native Developer
@daniel_destefanis Thanks for the input! And did you use a particular setup to scaffhold the plugin?
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@flexbox Yes it's built off of https://github.com/nirsky/figma-... which provides the basic sample plugin but with react, typescript, etc.
Share
Sabitov FaridExperience Designer
Amazing work, Daniel!
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@faridsabitov Thank you!
Share
Divyansh Patel
UX Designer. Hunted 100+ startups 🎯
@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)
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@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?
Share
Divyansh Patel
UX Designer. Hunted 100+ startups 🎯
@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?
Share
Oleg StirbuLead Product Designer
Super useful! well done
Share
Wow, nice plugin. Trying to migrate current designs to the system and this plugin will save me a lot of time. Thanks
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@mike_yermolayev Glad you're excited! I cannot wait to use it on my own teams design system.
Share
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 :)
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@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!
Share
Daniel Destefanis
Maker
Product Designer @ Discord
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!
Share
Alisa Smelkova
Cо-founder and Design Director @Vectorly
definitely gonna to check it out!
Share
Can you explain a bit about the rules? How do you define "missing"?
Share
Daniel Destefanis
Maker
Product Designer @ Discord
@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!
Share
helpful tool !
Share