Design Lint

Name: Design Lint
Rating: 4.0 (1 reviews)

A design linting plugin for Figma.

4.0•1 review•

13 followers

A design linting plugin for Figma.

4.0•1 review•

13 followers

•

•

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).

Launch tags:Design Tools

Launch Team

AWS Activate CreditsCredits that fuel your startup’s next milestone

Promoted

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

7yr ago

Design Lint

Maker

@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

7yr ago

@daniel_destefanis Thanks for the input! And did you use a particular setup to scaffhold the plugin?

Report

7yr ago

Design Lint

Maker

@flexbox Yes it's built off of https://github.com/nirsky/figma-... which provides the basic sample plugin but with react, typescript, etc.

Report

7yr ago

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

7yr ago

Design Lint

Maker

@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

7yr ago

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

7yr ago

Fibery

Wow, nice plugin. Trying to migrate current designs to the system and this plugin will save me a lot of time. Thanks

Report

7yr ago

Design Lint

Maker

@mike_yermolayev Glad you're excited! I cannot wait to use it on my own teams design system.

Report

7yr ago

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

7yr ago

Design Lint

Maker

@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

7yr ago

Design Lint

Maker

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

7yr ago

Revel.xyz

Can you explain a bit about the rules? How do you define "missing"?

Report

7yr ago

Design Lint

Maker

@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

7yr ago

Connection Flow Arrows

Amazing work, Daniel!

Report

7yr ago

Design Lint

Maker

@faridsabitov Thank you!

Report

7yr ago

1 2 3

4.0

Based on 1 review

Review Design Lint?

Reviews

Most Informative