Generování zdrojového kódu front-end aplikace z wireframe modelu

Lukáš Bajer

Bachelor's thesis

Abstract:

Bakalářská práce se zaměřuje na vytvoření pluginu pro aplikaci Figma, který umožňuje generovat kód v jazyce JavaScript z návrhů, které využívají komponenty knihovny MUI, které jsou stylizované společností Generali Česká pojišťovna. Teoretická část nejprve představí pojmy UI a UX design a problematiku návrhu grafického modelu. Dále bude představeno a porovnáno několik existujících nástrojů pro tvorbu grafických návrhů. Zbytek teoretické části se bude věnovat aplikaci Figma, která bude podrobně představena a rozebere problematiku pluginů. V praktické části budou nejprve představeny technologie použité při vývoji pluginu a poté bude popsán postup návrhu, vývoje a testování pluginu.

Abstract:

The bachelor's thesis focuses on the creation of a plugin for the Figma application, which allows generating JavaScript code from designs that use components of the MUI library, which are stylized by the company Generali Česká pojišťovna. The theoretical part will first introduce the concepts of UI and UX design and the issue of graphic model design. Next, several existing tools for creating graphic designs will be presented and compared. The rest of the theoretical part will be devoted to the Figma application, which will be presented in detail and the issue of plugins will be discussed. The section will firstly introduce the technologies used in the development of the plugin, and then describe the process of design, development and practical testing of the plugin.

Keywords

UX design, UI design, Figma, Figma plugin, Sketch, Adobe XD, InVision, Generátor React kódu

Language used: Czech

Date on which the thesis was submitted / produced: 11. 5. 2023

Accessible from:: 31. 12. 2999

Thesis defence

• Supervisor: Ing. Jan Panuš, Ph.D.

University of Pardubice

Faculty of Electrical Engineering and Informatics

Bachelor programme / field:
Information Technology / Information Technology