Design meets development: The art of design meets the power of realisation

Through many years of implementing software solutions in various industries, we understand the needs of users well and use established methods to fulfil their expectations. Let's dive deeper into this workflow and understand how design and development work harmoniously together at M&M through Figma.

The role of UX/UI design in the development process

Instead of having the first version of the prototype programmed by the traditional development department, the user experience and application are tested through wireframes to high-fidelity prototypes. Figma is a web-based design tool that enables UX/UI designers to carry out this process. However, its strengths lie not only in the design process itself, but also in effective collaboration. In Figma, UX/UI designers, software developers, project managers, product owners and marketing specialists can work on a project at the same time. This seamless collaboration enables design ideas to be adapted in real time, technical feasibility to be checked, feedback to be coordinated and marketing strategies to be integrated. This allows teams to work together efficiently to realise their ideas. 

From low-fidelity to high-fidelity

As the project progresses, after wireframes have been created, designers can move on to detailed high-fidelity prototypes that reflect the final look and behaviour of the product. This is where components, reusable design elements, come into play. They promote consistency and efficiency as they can be reused in different parts of the project.

Design and style guide: a symbiotic relationship

A good practice is the separation of design and style guide. By having separate files for design and style guide, changes in the style guide can be automatically applied to the design. This ensures that the entire design remains consistent and makes it easier to keep design guidelines up to date. 

This separation creates a flexible and scalable design system:

• Flexibility: UX/UI teams can react quickly to changes by adapting new brand guidelines or user feedback centrally in the style guide. This keeps the design dynamic and reduces manual adjustments in individual projects.
• Scalability: The style guide makes it easier to manage and expand the design in growing projects or organisations. New components and guidelines can be integrated and used immediately, which promotes reusability and makes collaboration between teams more efficient. 

Preparation for development and advantages of Dev Mode

Once the design is finalised and marked as Ready for Development, the handover to the developers begins. Figma's Dev Mode facilitates this handover by extracting exact specifications such as dimensions, spacing and CSS styles directly from the Figma file. Developers can leave comments and ask questions directly in Dev Mode, which improves communication and feedback between teams. Dev Mode is particularly useful for large projects, as it effectively supports collaboration between design and development. For smaller projects, its use is optional, but increased communication via other channels remains crucial for smooth project management. 
 

Dev support: assistance from the UX/UI designer

Dev support is a key aspect of successful collaboration.

The UX/UI designer is always available to the developers to help with problems and queries. This includes not only answering technical questions about the implementation of the design, but also clarifying any uncertainties regarding user guidance and visual details.

This continuous support ensures that the end product meets the high quality standards while remaining true to the design specifications.

Communication and feedback

A smooth workflow requires continuous communication and coordination via MS Teams channels, Figma comments and emails. These are crucial for designers and developers to recognise and resolve issues early to ensure the end product meets expectations. 

Outlook

The updates to Figma's Config 2024 show a promising future for software development. Improvements in the user interface, developer tools and AI integration point to an even more collaborative, efficient and innovative way of working. With the increasing presence of artificial intelligence in UX design, we at M&M are gaining a better understanding of how it can improve our workflows. In the future, we can expect AI to be integrated almost everywhere, in a way that supports us rather than dominates us.