\chapter{Result and Discussion}
\label{chap:result}

\section{Introduction}
\label{sec:chap5:intro}

The results of the implemented solution are shown in the "Result and Discussion" chapter, which also provides a useful example of UI generation utilizing the Figma plugin and Django Python server. This chapter offers a critical analysis of the generated UI designs in addition to insights into the efficiency and performance of the developed system.

\section{Example Showcase: UI Generation}
\label{sec:chap5:example}

We demonstrate the features of the Django Python server and the Figma plugin with a particular UI generating scenario. This example shows the entire procedure, from sending a request to the Django server to using the Figma environment to render the final UI designs.

\subsection{The outlined project description}
\label{subsec:chap5:projectdesc}

A system that makes managing assistance tickets possible for consumers of electronic items. There should be a variety of users using the system.
Consumers who have the option to register their purchases and open support tickets with the vendor. Professionals are charge of handling open tickets, helping clients, and maybe fixing or replacing damaged goods. Managers are in charge of assigning tickets to experts and must have a dynamic view of how the system is being used.

\subsection{JSON Output from Django Server}
\label{subsec:chap5:json}

The JSON output returned by the Django server is presented in the appendix \ref{sec:appendix_jsonoutput}. This JSON structure outlines the hierarchical organization of the generated UI designs, including page names, sections, and UI elements. A comprehensive analysis of the JSON output provides insights into the structure and composition of the UI designs.

\subsection{Figma UI Designs}
\label{subsec:chap5:figmauidesigns}

Accompanying the JSON output, screenshots of the Figma UI designs are provided in the figures \ref{fig:figmaresult1}, \ref{fig:image4} and \ref{fig:image5} to visually depict the generated user interfaces. These screenshots showcase the rendered UI elements within the Figma environment, highlighting the layout, styling, and overall presentation of the designs. In addition, it also contains a table which illustrates the connections and links between elements across different pages, showing how navigation and interactions are structured within the application.


\begin{figure}[h]
  \centering
  \begin{subfigure}{\textwidth}
    \centering
    \includegraphics[width=1\linewidth]{images/new-figma-result-1.png}
    \caption{Image 1}
    \label{fig:image1}
  \end{subfigure}
  \begin{subfigure}{\textwidth}
    \centering
    \includegraphics[width=1\linewidth]{images/new-figma-result-2.png}
    \caption{Image 2}
    \label{fig:image2}
  \end{subfigure}
  \begin{subfigure}{\textwidth}
    \centering
    \includegraphics[width=1\linewidth]{images/new-figma-result-3.png}
    \caption{Image 3}
    \label{fig:image3}
  \end{subfigure}
  \caption{Screenshot of Figma Plugin}
  \label{fig:figmaresult1}
\end{figure}

\begin{figure}[h]
    \centering
    \begin{minipage}[t]{.49\linewidth}
    \begin{figure}[H]
	\centering
	\includegraphics[width=\linewidth]{images/new-figma-result-4.png}
	\caption{Screenshot of Figma Plugin - Image 4}
	\label{fig:image4}
    \end{figure}
    \end{minipage}
    \hfill
    \begin{minipage}[t]{.49\linewidth}
    \begin{figure}[H]
	\centering
	% svg inclusion, requires inkscape
	\includegraphics[width=\linewidth]{images/new-figma-result-5.png}
	\caption{Screenshot of Figma Plugin - Image 5}
	\label{fig:image5}
    \end{figure}
    \end{minipage}
\end{figure}

\section{Cost Analysis}
\label{sec:chap5:costanalysis}

Undertaking a cost analysis is an essential step in assessing the proposed solution's viability and efficacy. The cost effects of using the Figma plugin for UI generation are discussed in this analysis. Through the process of calculating the expenses linked to different use cases, interested parties can make well-informed choices about the acceptance and application of the plugin. For detailed pricing information, readers are directed to refer to the OpenAI pricing page at \url{https://openai.com/pricing}.

The cost analysis's findings are displayed in the Table \ref{tab:table:figmacost}, which shows the average cost of using the Figma plugin for ten distinct requests. This table acts as a helpful resource for resource allocation and budgeting, as well as transparency regarding the cash outlay made by users.

\begin{table}[htbp]
    \centering
    \caption{Total Cost of Figma Plugin}
    \label{tab:table:figmacost}
    \begin{adjustbox}{width=\textwidth}
    \begin{tabular}{cccc}
        \toprule
        \textbf{Number of Requests} & \textbf{Number of Context Tokens} & \textbf{Number of Generated Tokens} & \textbf{Total Cost (\$)} \\
        \midrule
        10 & 1395 & 3483 & 0.07 \\
        2 & 342 & 684 & 0.01 \\
        3 & 531 & 906 & 0.015 \\
        \bottomrule
    \end{tabular}
    \end{adjustbox}
\end{table}



\section{Intended Purpose and Design Philosophy}
\label{sec:chap5:designphil}

Clarifying the intended aim of the generated solution is crucial while discussing the outcomes of this thesis project. This thesis project takes a different approach than standard UI-to-code plugins, which are mostly used by developers to speed up the coding process. It is intended to help designers expedite their workflow by offering recommendations on the structural architecture of user interfaces. This project is created as an information engineering tool rather than merely an AI-driven design generator. The primary purpose is to inform designers about the elements that comprise UI pages based on user-provided project descriptions, thereby enhancing their understanding and decision-making processes. The approach helps designers better conceptualize and organize their concepts, rather than producing code directly. The tool provides significant insights on the arrangement of items on individual pages and the overall interface structure, making it an invaluable tool for designers looking to improve productivity and optimize their design process.












