The recent growth of the software industry has drawn attention to strategies aimed at improving collaboration within the development team. Shown to frequently encounter dilemmas associated with cross-disciplinary work are User Experience designers and software developers, whose effective collaboration are essential for the success of the development process. Design systems have evolved as a response to the demand for efficient collaboration as a collection of reusable patterns and documentation used to establish a common language within software development teams. The popularity of using design systems within software development projects has grown rapidly in recent years, but little research has yet been conducted on its usability in development work. The goal of this thesis is to study design systems from a developer perspective, and evaluate its ability to facilitate the collaboration within software development teams. By building upon previous work on developer experience, this study proposes a method for assessing design system usability from a developer perspective. In this study, participating software developers were tasked with implementing user interface design in code with the help of a design system, followed by interview questions based on the Cognitive Dimensions Framework. Thematic analysis was used to analyze the data. Results provide insights into design system usability and developer experience. Findings include aspects of design system usability in general, such as the importance of developers' autonomy and flexibility of the system, as well as implications from the tested method in particular, such as the relevance of context of implementation. The results implicated an inherent dilemma of approaching design system development through conventions and best practices rather than with a systems theory and systems thinking perspective. / Senaste tidens tillväxt inom mjukvaruutvecklingsindustrin har resulterat i ett ökat intresse för att effektivisera samarbetet inom utvecklingsteamet. Två yrkesgrupper som påvisats stöta på dilemman associerade med multidisciplinärt arbete är de som designar och utvecklar mjukvara, vars samarbete är avgörande för utvecklingsprocessens framgång. Designsystem har vuxit fram som ett svar på en ökad efterfrågan på effektivt samarbete som en samling återanvändbara mönster och dokumentation som syftar till att etablera en gemensam vokabulär och inom mjukvaruutvecklingsteam. Trots att användandet av designsystem inom mjukvaruutveckling har ökat under de senaste åren har inte mycket forskning gjorts på dess användbarhet i utvecklingsarbetet. Denna uppsats syftar till att studera designsystem från ett utvecklarperspektiv, och utvärdera dess förmåga att facilitera samarbetet inom mjukvaruutvecklingsteam. Genom att ta avstamp i tidigare forskning kring utvecklarupplevelse föreslår denna studie en metod för att bedöma användbarheten och utvecklarupplevelsen av ett designsystem. Deltagande mjukvaruutvecklare fick i denna studie i uppgift att implementera gränssnittsdesign i kod med hjälp av ett designsystem, följt av intervjufrågor baserade på ramverket för Cognitive Dimensions. Tematisk analys användes för att analysera data. Resultaten ger inblick i användbarhet och designsystem i allmänhet, så som vikten av utvecklarens autonomi och systemets flexibilitet, samt implikationer från det testade design systemet i synnerhet, så som implementationskontextens relevans. Resultaten antyder att det finns svårigheter med att närma sig mjukvaruutveckling med designsystem genom konventioner och god praxis snarare än med ett systemteoretiskt perspektiv.

Although accessibility benefits all users of the web, irrespective of their abilities and disabilities, many web applications fail to fulfill basic accessibility requirements. Designers and developers need to improve their work with accessibility in order for digital inclusion to be possible. This thesis investigated how a design system can support them in producing accessible applications. It used a design approach to formulate an accessibility methodology for creating and maintaining a design system. Interviews and ideation workshops were held to understand the problem and generate solutions. A methodology was put together and evaluated through expert reviews, focus grouping, and user testing. The thesis resulted in 10 guidelines for how to promote accessibility through a design system. Central to the guidelines was that companies adapt the work with accessibility to their specific situation, by setting their own goals and creating tools for the different stages of the employees' work processes. The thesis concluded a design system can help designers and developers not feel overwhelmed by accessibility requirements, and focus on what is relevant to the task they are currently performing. A design system that is merely a storage for components can only assist designers and developers with a fraction of the accessibility requirements. Greater potential is held by a design system that is made into a platform for accessibility, by providing guidance on how to use components and being referenced in testing procedures. / Trots att tillgänglighet gynnar alla användare, oavsett förmåga eller funktionsnedsättning, uppfyller många webbapplikationer inte grundläggande tillgänglighetskrav. För att digital inkludering ska vara möjlig, behöver designers och utvecklare förbättra sitt arbete med tillgänglighet. Detta examensarbete undersökte hur ett designsystem kan stötta dem med att producera tillgängliga applikationer. Med ett angreppssätt vanligt för design, tog det fram en tillgänglighetsmetodik för att skapa och underhålla designsystem. Intervjuer och idéworkshops hölls för att förstå problemet och generera lösningar. En metodik sammanställdes och utvärderades genom expertutvärderingar, fokusgrupp och användartester. Examensarbetet resulterade i 10 riktlinjer kring att främja tillgänglighet genom ett designsystem. Centralt för riktlinjerna var att företag ska anpassa tillgängligh-etsarbetet till deras specifika situation, genom att sätta egna mål och skapa verktyg för de olika stadierna av medarbetarnas arbetsprocess. Examensarbetet kom till slutsatsen att ett designsystem kan hjälpa designers och utvecklare undvika att överväldigas av tillgänglighetskrav, och fokusera på vad som är relevant för den aktuella uppgiften de utför. Ett designsystem som enbart är ett förvar för komponenter kan bara stötta designers och utvecklare med en bråkdel av tillgänglighetskraven. Ett designsystem som blir en plattform för tillgänglighet, genom att ge handledning för hur komponenter ska användas och genom att refereras till i testrutiner, har högre potential.

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.