• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

← More Design Tips

Organize your project files for developers

posted on October 19, 2018

TweetFacebookLinkedInPin

If you know the code framework you’re designing for, try to match your layer names to the code structure.

I often design themes for the Genesis Framework. This is what my layer organization looks like in Sketch vs. the final code in the browser:

It’ll help developers to turn your designs into code much faster and they’ll want to work with you again! It also shows your understanding of the framework and how the code works.

You can even take it one step further and prepare your style guide to match all of the elements too:

tags: code process sketch

Previous tip: How to start using Sass
Next tip: Stimulate productivity with music

Don't Miss Future Design Tips

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!