Organising design files for developers

How to organise design files to ensure a good handover for developers

This is a help document for designers to make the transition from your website’s design to development as smooth as possible and to ensure that a developer can bring your designs to life with as little to no difference to the original design file.

There are three ways developer can develop a site using HTML and CSS:

*Using flexbox

*Using Grid

*Using both So when we design websites we need to think about how feasible our design is to implement into the web, while still keeping all the elements of the design.

Below is a checklist that can help with this:

Using Figma

  1. Creating Global Styles

A good developer will start the project by creating a global style guide. So we need to make sure that every element within the designs are global.

A project with a global style guide should feature:

  1. H1 to H6 with size & line height

  2. One to three paragraphs that we’re going to use across designs

  3. Links

  4. Buttons

  5. All colours used in the website

  6. Site logo

2. Using predefined grids:

  • If we look at how developer is going to develop our design later in we can see that it is going to be the easiest to set a predefined container for the content & have content be for an example 50%-50px of that content or 25%-50px of the content if the developer is using flexbox or even easier if they are going to use grids. In this case it is ideal to make sure that the heading is taking two grid elements, paragraph one grid element, image two grids, being centered….

  • In addition, bringing over the global styles here can help with this too. All heading 1’s are going to be the same in all pages, and I’m going to have only 1 heading one because of the SEO. We can use bigger paragraphs for heros also.

3. Organising all files as they will be developed:

It may seem that it is faster to just make 30 groups, and number the files. After that neither you or the developer will know what group 321 stands for. That’s why it is best to group all elements into one section & each single element inside into individually named groups.

4. Using preview mode to check if the sizes of fonts & elements are going to be fine if the site is developed that way.

Another trick is hitting Shift and 0 to constantly make sure the fonts & elements are good size

Mobile

Scaling your design to mobile should be easy, thinking that developers will reduce grid sizes or just use flexbox wrap children in order to make it responsive. However, there are few things to consider:

  1. Designing on devices you can test

In order to see if font sizes & all layouts scaled properly it is best to set up the canvas on a device you can test. A good tool to use is Figma Mirror to test designs on a phone before going to development. There’s nothing better than seeing your design on your mobile device and making sure buttons are clickable, text is readable etc. Our recommendations are Iphone 11 Pro or iphone 8 as those are the most common screen sizes.

2. Adding browser navigations

Making sure that your content can fit most devices is crucial. Many designers forget that users will see their designs with browser bars on top & bottom. We recommend adding them when you design your site so that you can see how this will appear on mobile.

3. Setting up the grid for mobile

Like on desktop, it is important to use a grid system to design on mobile devices.

4. Scaling the desktop to mobile

In order to remain readability and save space you will need to lower block sizes, create separate styles for mobile headings & labels. We may have space for a 60px heading 1 on desktop, but on mobile that will waste a lot of space, so we will scale H1 to H6 accordingly. In this case H4 is 30px on desktop but 23 px on mobile, so it is fitting almost the same like on desktop & easy to read.