Inom utveckling av mjukvaruprodukter kan samarbete ofta ske mellan designers och andra tekniska intressenter, såsom utvecklare. En förekommande process under samarbetet är en s.k. handoff, där design överlämnas från designers till utvecklade för att implementera denna i kod. Samarbetet mellan designers och utvecklare kan nuförtiden ske mer tillsammans och vara iterativt. Trots detta kan det finnas flera utmaningar inom samarbetet, såsom att försöka genomföra en exakt omvandling från design till kod. Andra sammanbrott (breakdowns) kan riskera att ske i samarbetet. Ett verktyg som kan användas inom design men som även erbjuder exportering av element och omvandling till kod är Figma. Verktyget beskrivs vara lämpligt för kollaboration, bland annat för designers och utvecklare. Figma menar att designer-utvecklare handoffs kan bli så lätt som en “handskakning”. I det här examensarbetet undersöks vilket roll Figma kan spela i samarbetet mellan just dessa två grupper, och huruvida Figmas verkliga användning skiljer sig från den som beskrivits. Studien försöker besvara hur Figma används i designer-utvecklare samarbetet i slutet av designprocessen och under konstruktionsprocessen, där konstruktionsprocess innebär där implementationen sker, detta enligt egen uppfattning. Semistrukturerade, digitala intervjuer genomfördes med tre designers och fyra utvecklare från företag i Sverige. De flesta deltagarna arbetade på olika företag. Affinitetsdiagram användes för analys. Resultatet visade att designers och utvecklare brukar använda Figma genom designprocessen, men även i skärningspunkten mellan design- och konstruktionsprocessen; designers skapar guidelines i designsystemet och kommentarer för att dela information med utvecklarna. Utvecklarna granskar och godkänner designers skapelser innan de läggs in i designsystemet, eller skapar komponenter själva. Designsystemet kan i sin tur fungera som en mall för utvecklarna när de ska börja koda. Det framgick även att andra faktorer kan spela roll i samarbetet, såsom mänskliga faktorer. Båda parterna använder Figma för att kommunicera med varandra skriftligt och visuellt, bland annat genom kommentarsfunktionen, prototyper och designsystem. Efter diskussion om resultaten visar det sig att Figma används under handoffs, men inte exklusivt. Verktyget kan dessutom användas för mer än att skapa gränssnitt. Det visar sig även att Figma på olika sätt kan främja designers och utvecklare i att tala samma språk; till exempel finns en del namn i Figma som liknar kodspråk. Å andra sidan såg deltagarna rum för förbättring i detta område då det fortfarande finns en del namn och funktioner i Figma som skiljer sig från kodspråk. En annan förekommande utmaning med samarbetet i Figma var synkronisering mellan designers och utvecklares representationer, det vill säga det som designers skapar och det som utvecklare skapar. Med andra ord upplevdes det svårt att fånga upp förändringar som gjorts i Figma eller i kodmiljön, och se till att det finns endast en sanningskälla. Slutsatsen är att Figma används i en kollaborativ designprocess för att kommunicera hur designen bör fungera och se ut visuellt. I konstruktionsprocessen används Figma för att granska olika designartefakter och inspektera designsystemet i Figma, vilka agerar utgångspunkter vid implementation. / In the field of software development, collaboration between designers and other technical stakeholders such as developers is common. During the collaboration, one occurring process is the so-called handoff, in which designers hand over a design to developers in order to implement the design into code. Today, designers and developers can often work together in an iterative fashion. Despite this, challenges may occur during the collaboration, such as when trying to transform design to code. Other breakdowns may also occur during the collaboration. One tool, that is used for design but can also offer exporting of elements and transforming to code, is Figma. The tool is described as being convenient for collaboration, such as designers and developers among other groups. According to Figma, using the tool may transform a designer-developer handoff into a “handshake”. In this thesis, the role of Figma in the designers-developer collaboration and its usage is studied. The goal of the study is to provide an answer to how Figma is used in the collaboration between designers and developers at the end of the design process and during the construction process. The construction process describes the process where the implementation is done, according to the authors' own understanding. Semi-structured digital interviews with three designers and four developers from companies in Sweden were conducted in this study. The majority of the participants worked at different companies. Affinity diagram were used to analyze the collected data. The results indicated that designers and developers usually use Figma throughout the design process, but also in the intersection of the design- and construction process; designers create guidelines in the design system and use comments to share information with developers. The developers review and approve designers’ creations before inserting them into the design system, or they just create the components themselves. Developers can also use the design system as a foundation for coding. Another interesting find was that other aspects outside of Figma, such as human factors, could impact the collaboration as well. Both designers and developers use Figma to communicate by text and through visuals, such as via the comment feature, prototypes and design systems. After discussing the results, it became clear the Figma is used during handoffs but not exclusively so. The tool can also be used for more than just creating interfaces. In many ways Figma can support designers and developers in speaking the same language, such as by having similar names to the ones found in code. On the other hand, the participants saw room for improvement in this area since some features and names in Figma differ from code. Another frequent challenge when collaborating in Figma was the synchronization between designers’ and developers’ representations, where representations are the things that designers and developers create respectively. In other words, designers and developers described challenges in picking up the changes made in Figma or in the development environment, and maintaining a single source of truth. The conclusion is that Figma is used in a collaborative design process to communicate the behaviour and visual aspects of the design. During the construction process, Figma is used to review design artefacts and inspect the design system in Figma, which acts as foundations for implementation.
| Identifer | oai:union.ndltd.org:UPSALLA1/oai:DiVA.org:su-219660 |
| Date | January 2023 |
| Creators | Althini, Vera, Larsson, Rebecka |
| Publisher | Stockholms universitet, Institutionen för data- och systemvetenskap |
| Source Sets | DiVA Archive at Upsalla University |
| Language | Swedish |
| Detected Language | Swedish |
| Type | Student thesis, info:eu-repo/semantics/bachelorThesis, text |
| Format | application/pdf |
| Rights | info:eu-repo/semantics/openAccess |
Page generated in 0.0087 seconds