Artificial Intelligence in Software Engineering: How Our Team Integrates Advanced Technologies into the Company’s Processes

How Did Artificial Intelligence Assist the MODUS X Team in Creating a Website

In line with current trends, we at MODUS X also incorporate and utilize artificial intelligence technologies throughout the entire software development lifecycle (SDLC), from design to testing.

In one of our projects, we applied artificial intelligence to develop a website using a pre-designed system provided by a third-party contractor. The primary objective of experimenting with this technology was to optimize the process of writing, improving, and testing the source code.

At the project’s outset, our development team received the designers’ completed website design in Figma. The crucial task at this stage was to transform the design into React components . To achieve this, we utilized the Locofy plugin, with which we had prior experience.

However, converting the design with Locofy presented challenges. We faced an issue with many erroneous components in the React library, which posed additional challenges for our developers. Correcting and refining these components would have significantly complicated the overall workflow.

Transforming Artificial Intelligence into an Assistant Rather Than an Obstacle

After several hours of working with code generated by artificial intelligence, our team opted to abandon the approach. The challenge of aligning the design with the generated code proved more cumbersome than coding manually. However, this experience taught us valuable lessons that we plan to implement in future projects:

1. A Structured Design is Fundamental: The significance of a well-organized design system is crucial. The quality of the final code is directly linked to the quality of the initial design. Artificial intelligence processes the design based on the hierarchical structure and naming of elements. Our project, using a design from a third-party agency, encountered several issues in code conversion, particularly:
   • Component and Class Naming: Better outcomes could have been achieved with more systematically structured layer names, using prefixes to denote the location of elements and suffixes for element types.
   • Excessive Grouping and Framing: The provided layouts had unnecessary groups and frames that needed to be simplified or removed unless they served a functional purpose. The design elements should be arranged in a clear, structured hierarchy for optimal algorithm performance.
   • Image Layer Placement: Background images were treated as separate elements rather than utilizing CSS properties for streamlined code. Such elements should be integrated directly into the frame layers to circumvent this.
2. The Choice of Tools Is Critical: Despite encountering issues, the Locofy plugin for Figma was ultimately the most suitable option for us. Even though Locofy includes tools for error correction and process enhancement, using the default settings could have yielded more satisfactory results for our team.
3. Anticipate Unexpected Outcomes: The final conversion did not align with standard development practices, requiring additional adjustments and revisions. Instead of optimizing the workflow, this necessitated further complications.

Overall, the future favors teams that can adeptly harness artificial intelligence at various stages of software development.

Artificial intelligence is a continuous learning, improvement, and optimization process that evolves almost daily. Therefore, our team continues experimenting with and applying artificial intelligence across various projects, not confined by our accumulated experience.‍