Ahsan Nafis’alimi, NIM.: 22106050060 (2026) RANCANG BANGUN PLUGIN FIGMA TOKEN2CODE UNTUK OTOMATISASI PROSES DESAIN KE KODE. Skripsi thesis, UIN SUNAN KALIJAGA YOGYAKARTA.
|
Text (RANCANG BANGUN PLUGIN FIGMA TOKEN2CODE UNTUK OTOMATISASI PROSES DESAIN KE KODE)
22106050060_BAB-I_IV-atau-V_DAFTAR-PUSTAKA.pdf - Published Version Download (5MB) | Preview |
|
![[img]](https://digilib.uin-suka.ac.id/style/images/fileicons/text.png) |
Text (RANCANG BANGUN PLUGIN FIGMA TOKEN2CODE UNTUK OTOMATISASI PROSES DESAIN KE KODE)
22106050060_BAB-II_sampai_SEBELUM-BAB-TERAKHIR.pdf - Published Version Restricted to Registered users only Download (9MB) | Request a copy |
Abstract
The process of handing over designs from designers to developers, which is still done manually, often leads to communication gaps. This situation can trigger technical debt and cause visual inconsistencies in the codebase. Although Figma has provided Variables features to implement the concept of design tokens, the process of converting variable values to frameworks like Tailwind CSS still needs to be done manually and has the potential to introduce errors. To address this issue, this final project develops a Figma plugin called Token2Code. This plugin is designed to automate the extraction of Figma Variables of type Color and Float into CSS Variables and Tailwind CSS version 3 configurations. The development method used is Waterfall, through stages of requirements analysis, design, coding, and testing. Functionality testing is conducted using Black Box Testing, while the system's usability level is measured through the System Usability Scale (SUS). All Black Box Testing scenarios ran as planned, both under ideal conditions and anomalies. Furthermore, the SUS testing involving 16 respondents resulted in an average score of 78.3. This score falls within the Acceptable category with a Good rating. This result indicates that Token2Code is capable of automating the design-to-code conversion process in a more practical manner and is well-received by users without requiring additional external toolchains.
| Item Type: | Thesis (Skripsi) |
|---|---|
| Additional Information / Supervisor: | Nurochman, S.Kom., M.Kom. |
| Uncontrolled Keywords: | Design Token, Figma Variables, Figma plugin, Tailwind CSS, System Usability Scale (SUS). |
| Subjects: | 000 Ilmu Komputer, Ilmu Informasi, dan Karya Umum > 000 Karya Umum > 005.3 Program Aplikasi Komputer |
| Divisions: | Fakultas Sains dan Teknologi > Informatika (S1) |
| Depositing User: | Muh Khabib |
| Date Deposited: | 02 Nov 2026 10:47 |
| Last Modified: | 02 Nov 2026 10:47 |
| URI: | http://digilib.uin-suka.ac.id/id/eprint/79630 |
Share this knowledge with your friends :
Actions (login required)
 |
View Item |
