The Role of Figma and Material 3 in Mobile Application Development: benefits, reusability and design-to-code integration

Abstract

Tässä opinnäytetyössä tarkasteltiin Figman ja Material Design 3:n roolia mobiilisovelluskehityksessä. Työssä keskitytään erityisesti komponenttien uudelleenkäytettävyyteen, suunnittelujärjestelmän rakenteeseen sekä design-to-code-prosessiin. Työ toteutettiin kirjallisuuskatsauksen ja käytännön osuuden avulla. Käytännön osuudessa kehitettiin Figmassa mobiilisovellusprototyyppi nimeltä Korjausloki hyödyntäen Material 3 -komponentteja ja design tokeneja. Valittuja näkymiä toteutettiin React Nativella, jotta voitiin arvioida, miten suunnittelu siirtyy koodiin. Tulokset osoittivat, että uudelleenkäytettävien komponenttien ja tokenien käyttö parantaa kehityksen tehokkuutta ja käyttöliittymän yhtenäisyyttä. Samalla havaittiin, että siirtyminen suunnittelusta koodiin ei ole täysin automatisoitu, vaan toteutus tapahtuu manuaalisesti. Työn perusteella voidaan todeta, että komponenttipohjainen suunnittelu ja design tokenien käyttö tukevat mobiilisovellusten kehittämistä ja ylläpitoa. Jatkossa aihetta voidaan tutkia kvantitatiivisesti esimerkiksi kehitysajan ja virheiden määrän näkökulmasta.

This study examines the role of Figma and Material Design 3 in mobile application development. The focus is on component reusability, the structure of a design system, and the design-to-code process. The study was carried out using a literature review and a practical part. In the practical part, a mobile application prototype called Korjausloki was designed in Figma using Material 3 components and design tokens. Selected screens were then implemented in React Native to evaluate how the design is transferred into code. The results showed that the use of reusable components and tokens improves development efficiency and supports a more consistent user interface. At the same time, it was found that the transition from design to code is not fully automated and still requires manual implementation. Based on the study, it can be concluded that component-based design and the use of design tokens support the development and maintenance of mobile applications. In the future, the topic could be studied using quantitative methods, for example by measuring development time and the number of errors.