Feasible design : transforming design fundamentals to usable code
Piirainen, Meri (2023)
Kandidaatintyö
2023
School of Engineering Science, Tietotekniikka
Kaikki oikeudet pidätetään.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe20231024141110
https://urn.fi/URN:NBN:fi-fe20231024141110
Tiivistelmä
This thesis examines the usage of design tokens in their atomic form as small parts of the design system and their transformation into Flutter code while allowing feasible collaboration solutions and multitheming. The design tokens are any solutions, like colors, text, or measurements, necessary to make the design of an user interface in a software. Transforming the tokens is part of the handoff process when design is transferred to developers to build the software.
The research method was a narrative literature review combined with testing of found software supporting the usage of design tokens. Analysis showed that for the creation and management of the design tokens, Tokens Studio and Supernova.io are tools that allow collaborative working methods like automatic synchronization and exporting design to code. To conclude, the tokens created in Figma with Tokens Studio are transformed into Flutter code with an exporter provided by Supernova. Tämän opinnäytetyön tarkoituksena on tutkia ja arvioida kuinka design tokeneita voidaan hyödyntää pieninä osina design systeemiä sekä keskittyä niiden muuntamiseen käytettäväksi Flutter-koodiksi hyödyntäen suunnittelijoiden ja kehittäjien välistä yhteistyötä. Design tokenit ovat design systeemin kaikkia ratkaisuja, joita hyödynnetään ohjelmistojen kehittämisessä, eli esimerkiksi värit, fontit tai mitat ovat tokenisoitavissa eli niistä voidaan tehdä design tokeneita. Tokeneiden muunnos koodiksi on ohjelmistokehityksessä osa suunnitelman luovuttamista kehitysvaiheeseen.
Tutkimusmenetelmä koostui narratiivisesta kirjallisuuskatsauksesta sekä eri design tokeneita tukevien sovellusten testaamisesta. Analysoinnin tuloksena Tokens Studio ja Supernova.io ovat tutkimuksen aikana hyödyllisin tapa siirtää tokenit koodiksi vaalien suunnittelijoiden sekä kehittäjien yhteistyötä ohjelmistokehitysprojekteissa. Tämän hyödyn tuo erityisesti automaattinen tokeneiden synkronointi sekä muuntaminen koodiksi. Työkaluilla suunnitelmat ovat kootusti yhdessä paikassa taaten tiimien välille päivittyvän version kaikista designratkaisuista. Tutkielman tuloksena luodaan Figmassa Tokens Studio -työkalulla design tokenit ja ne muunnetaan Supernovan Flutter kääntäjän avulla koodiksi. Näin toimimalla manuaalisen työn määrä saadaan minimoitua automatisoimalla päivityksien siirtyminen koodiin.
The research method was a narrative literature review combined with testing of found software supporting the usage of design tokens. Analysis showed that for the creation and management of the design tokens, Tokens Studio and Supernova.io are tools that allow collaborative working methods like automatic synchronization and exporting design to code. To conclude, the tokens created in Figma with Tokens Studio are transformed into Flutter code with an exporter provided by Supernova.
Tutkimusmenetelmä koostui narratiivisesta kirjallisuuskatsauksesta sekä eri design tokeneita tukevien sovellusten testaamisesta. Analysoinnin tuloksena Tokens Studio ja Supernova.io ovat tutkimuksen aikana hyödyllisin tapa siirtää tokenit koodiksi vaalien suunnittelijoiden sekä kehittäjien yhteistyötä ohjelmistokehitysprojekteissa. Tämän hyödyn tuo erityisesti automaattinen tokeneiden synkronointi sekä muuntaminen koodiksi. Työkaluilla suunnitelmat ovat kootusti yhdessä paikassa taaten tiimien välille päivittyvän version kaikista designratkaisuista. Tutkielman tuloksena luodaan Figmassa Tokens Studio -työkalulla design tokenit ja ne muunnetaan Supernovan Flutter kääntäjän avulla koodiksi. Näin toimimalla manuaalisen työn määrä saadaan minimoitua automatisoimalla päivityksien siirtyminen koodiin.