18 tips on how to do frontend best & improve design-to-code collaboration

We asked 4 freelance developers with decades of experience about their workflows, what problems they face, how they solve them, and what techniques they employ to do their best work fast and efficiently.

Read their full answers below or scroll down for the conclusion to see the list of 18 essential frontend development tools, skills, and practices. 👇

Tomas is a full-stack developer with 15 years of experience in coding. Recently, he has been working remotely as a contractor for various companies worldwide. He specializes in building single-page applications (SPAs) and enjoys transforming beautiful designs into smoothly-working products used by many people.

Describe your typical workflow for us, Tomas.

I usually work on web applications built using one of the leading JavaScript frameworks - Angular, React or Vue. They are often complex products where a deep understanding of a given framework is needed in order to deliver a result that is both easily maintainable and doesn’t suffer from any performance issues.

Typically, I start by analyzing the work handed off to me by a designer. I study the requirements, identify the most complex parts of the implementation, and communicate my findings back to the designer so they can modify the design. I find that communication with your designer is especially important at this stage when working on projects with really tight budgets.

We usually collaborate using one of the work tools that allow me to quickly inspect various design elements, measure distances between them, and see the corresponding CSS code. But I never copy this code. I take it just as a guideline. Instead, I try to deliver the same result with the least amount of CSS code possible. I create global SCSS variables for colors, repeating dimensions, etc. to make my code clean. This way, it's also easy to apply design changes later on as you only need to change it in one place in the code and it will get propagated everywhere.

What’s the number one problem you face in your work, and how do you solve it?

I often receive the desktop version of a given application, implement it, and later get the mobile version with a completely different UX. It introduces a lot of unnecessary rework, and it's super time-consuming to implement something like that and then make the app switch between desktop and mobile versions seamlessly when resizing the browser window.

So now, I always ask for both the desktop and mobile design versions before I start on the implementation. And I try to use the same components for desktop and mobile as much as possible. I only apply different styles to them based on the screen size, otherwise developing and maintaining the application becomes really hard.

What’s your tool stack, and what do you like about it most?

I use Storybook in almost every project where a designer is involved. It allows me to develop reusable UI components in isolation outside of the actual application and then share them with designers to get their feedback.

It is especially useful when developing a UI library since it also serves as a testing ground and documentation base for components. Having your components used outside of an application also forces you to make them truly reusable and avoid unnecessary dependencies on other parts of the app.

And when it comes to coding, the single tool that saves me the most time is WebStorm. The way this IDE (Integrated Development Environment) can handle JavaScript, TypeScript, Angular, and Vue.js code refactorings and move code pieces around is just astonishing.

I take WebStorm for granted now. But when I try to use Visual Studio Code from time to time, I'm always surprised how far behind it is in this area, even with all available plugins. I don't get why most developers prefer VS Code. Especially when I see them typing JS imports manually while doing a live demo on a tech talk. It doesn't sound like the 21st century.

What tips can you give for faster and easier frontend development?

I would advise front-end developers not to rush into implementation but take your time to analyze the screens you get from designers and think about what is the best way to structure your application and how you would split it into components.

Make sure your components are as small as possible - no more than three HTML elements. Making them super-small will force you to come up with the most logical component structure with a lot of reused parts which will make the application much easier to maintain. This may sound like basics, but I've seen so many apps with huge components.

And when it comes to learning resources, I think the best way to start with something new is an online course (e.g. on Udemy). But then, to go deeper, you need to read the documentation and a lot of articles.

In my opinion, the best way to find such articles is via email newsletters which will also help you stay up to date. For me, JavaScript Weekly is the single best resource since it combines articles and news from the whole ecosystem. Frontend Focus is also a good one, but there were too many things fighting for my attention, so I had to unsubscribe from this one.

Daniel is a frontend developer with over 20 years of experience and hundreds of commercial and non-profit projects under his belt. He is passionate about web optimization, speed, and accessibility. He is an active member of a front-end community Frontendisti.cz and gives occasional talks on coding and web performance.

Describe your typical workflow for us, Daniel.

I always start by uploading designs to Avocode. I create variables for design colors, export icons in SVG, and set up typography. Doing this preparation work allows me to start coding without losing focus. Again, I use Avocode at this stage to generate code, quickly copy text, and export images as I go.

What’s the number one problem you face in your work, and how do you solve it?

As a developer, I often find that some designers forget to think about the implementation of their work. They don’t think about how their design and responsive elements will show in ultrawide or medium (in-between desktop and mobile) resolutions. Having the option to communicate with a designer directly and with context is helpful, but I try to prevent such issues from the start and always ask in advance for design format and specs.

What’s your tool stack, and what do you like about it most?

I use Visual Studio Code, various extensions, Browserstack, Fork, and Avocode, of course. I’ve been using Avocode for 3 years now, and I can’t imagine how I worked without it.

I can run Avocode on any OS, and I don’t even have to install the desktop app if I am working on a different computer. Instead, I can open the web app and pick up my work from there. Avocode allows me to work with all design formats without paying for design tools. I can even open Sketch files on Windows. I can copy design text in one click, export images in various formats and resolutions, define variables, and get object properties and sizes.

I use Avocode to display the grid and guidelines on top of my designs, set the right design scale and units. Being able to select different code output and adjust the order of declarations for my needs is great. And having properties for various elements like shadows and transitions generated for me is a huge time saver.

I think one of the most powerful tools in Avocode is the Pixel Checker. I cannot imagine coding without it.

Simply put, if you code HTML/CSS websites - you must try Avocode, and after customizing the app to your needs - I guarantee you will realize what a huge timesaver it is.

What tips can you give for faster and easier frontend development?

I always try to automate routine tasks. How? Configure your code editor to fit your needs, use Emmet, snippets, boilerplate templates, create your own simple grid. I have my CSS/JS declarations sorted and linted directly in devstack. I use automatic deploy after pushing the project into the right branch. I have set up processes and auxiliary scripts.

If you are bothered by routine operations that can be automated - try to find a tool like Avocode to solve this problem for you. For example, I can just copy the font-size and line-height from Avocode. I prefer to specify the font size in PX to better imagine the size when coding, and the conversion to REM can be done automatically.

In general, I recommend using the KISS principle to all developers. Write the code so that you are familiar with it in a few years, and passing the project on to another developer is simple.

Lukáš has been coding websites for over 12 years now. He is passionate about bleeding-edge technologies, accessibility, UX, gorgeous design, automatization, open-source communities, and not so happy with coding newsletters. 😀

Describe your typical workflow for us, Lukáš.

I mainly work with JavaScript, whether it is front-end frameworks, hybrid mobile applications, Node.js, lambda functions, or server-side rendering. I have participated in various global projects that have a daily traffic of hundreds of thousands of visitors. I am particularly glad that I can bring new ideas to projects I work on and make a difference.

What’s the number one problem you face in your work, and how do you solve it?

When I cooperate with designers on a project, I always make an effort to structure our work. I find that thinking in atomic building blocks, working with grid layouts, and keeping principles of reusability makes the process much easier.

I’m glad we’ve come a long way since the days of designing UI in Photoshop and estimating values from rasterized images. Fortunately, the market for UI design tools is way more competitive these days, and I see more designers increasingly using them!

What’s your tool stack, and what do you like about it most?

Recently, I have been working mainly with Adobe XD, Sketch, and Figma. I used Photoshop, Adobe AI, and Zeplin before. Each of these tools has its advantages and disadvantages, of course, but I’m excited that Avocode is trying to bring all tools into one and do it with passion.

What tips can you give for faster and easier frontend development?

I often come across people spending their efforts on repetitive tasks without realizing that they are not the only ones solving the problem. Most likely, someone has already thought about it, and there may be a way to automate “the process”. Look for a solution that solves your problem and focus on more important and fun things in your life and job instead.

David is an advanced front-end developer with over 9 years of intense experience in making web and mobile apps and 5 years in UI design.

Describe your typical workflow for us, David.

I start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently and setting up specific things for my projects, such as colors, fonts, and basic components. After that’s done, I move on to more complex structures, pages, and the whole app skeleton.

What’s the number one problem you face in your work, and how do you solve it?

Most often, I face problems with incomplete tasks and flow specifications from a design perspective. How do I solve this? Communication for sure. The best way to communicate with your designer is directly in the handoff tool like Avocode or InVision, but using a chat app or comments in Figma can work too.

What’s your tool stack, and what do you like about it most?

My favorite tools are VS Code, terminal, and Figma. Oh, and also a web browser. I use Google Chrome most of the time. I like how easy these tools are to adopt, and how Figma, in particular, handles multiple people working on the same project.

What tips can you give for faster and easier frontend development?

First, look around for the code or style of other developers. Open up the source code of your beloved framework or package and study it. It is not so hard, and you can learn a lot.

And secondly, set up a workflow with your designer to make your cooperation easy and efficient. I personally worked out such a flow. I don’t need all the screens designed in detail to start my work. Instead, I need the designer to hand off all necessary components like buttons, inputs, headings, states, and a basic structure first. This flow saves both a designer and a developer a lot of time. And remember that good communication and constructive feedback is the best way to avoid any problems in your cooperation.

🧐 Conclusion

Here is the list of 18 recommendations and best practices to improve your development process and save time on coding.

How to efficiently collaborate with a designer on a project?

1. Set up a workflow with your designer to make your cooperation easy and efficient.
2. Study the design and tell your designer about the rabbit holes you find before starting on the implementation. This way, your designer can make changes based on your feedback and save time and money on the project.
3. Use your handoff tool to communicate with your designer with context.
4. Ask in advance for design format, specs, and task specifications.
5. Ask in advance for desktop and mobile versions of the design to make your application truly responsive and avoid the time-consuming process of reworking your code later.
6. If the final design is not done yet - start by coding your components first, and then move on to more complex structures.

How to work smart, write your best code, and save time on repetitive tasks?

1. Start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently.
2. Configure your code editor to fit your needs, use Emmet, snippets (if you like), and boilerplate templates.
3. Use a tool like Avocode to export assets in SVG or a different format and resolution, inspect various elements, and measure distances between them.
4. Make your components as small as possible - no more than three HTML elements - to force yourself to develop the most logical component structure with many reusable parts and make your application much easier to maintain.
5. Create global variables for colors, repeating dimensions, etc., to make your code clean and easy to change globally.
6. Automate routine and repetitive tasks.
7. Look for a solution that solves your problem and focus on more important things instead.
8. Use a good code editor like Visual Studio Code, WebStorm, tools like Figma, Avocode, Adobe XD, Browserstack, Pixel Checker, Google Chrome, and various browser extensions for a quick, precise, and efficient workflow.
9. Use the KISS principle - write your code in a way that you’ll be familiar with it in a few years and can easily pass the project over to another developer.

How to educate yourself and stay updated on the latest trends and practices in the space?

1. Open up the source code of your beloved framework or package and study it.
2. Take an online course to start learning something new and improve your skills.
3. Subscribe to newsletters such as JavaScript Weekly and Frontend Focus to find helpful articles, get into the details, and stay updated on the most recent developments in the space.

🔗 Bonus tip from our friends at Toptal.com: How to Hire a Front-end Developer

Do you find these recommendations useful? Join the discussion on Twitter to let us know what you think.