How We Automated Figma-to-Unity UI Integration With AI Agents | GameDev Day 2026

Now we will hear from Now we will hear from Alina and Oli about Figma, Alina and Oli about Figma, Alina and Oli about Figma, Unity, and AI agents. So it Unity, and AI agents. So it Unity, and AI agents. So it will be very interesting will be very interesting will be very interesting to learn about the design. to learn about the design. to learn about the design. Congratulations. How are you Congratulations. How are you Congratulations. How are you doing today? doing today? doing today? Hello everyone. Thank you. Hello everyone. Thank you. Well, we hear you, Well, we hear you, slides are on the screen, so let's slides are on the screen, so let's slides are on the screen, so let's get started. Tell get started. Tell get started. Tell us about Figma and Unity. us about Figma and Unity. us about Figma and Unity. Okay, let's get started. Yes, Okay, let's get started. Yes, Okay, let's get started. Yes, hello again everyone. hello again everyone. Today we want Today we want to show how we to show how we to show how we transform transform transform game game game interface creation from hand- interface creation from hand- interface creation from hand- crafted to the Figma crafted to the Figma —Unity pipeline using AI —Unity pipeline using AI agents. Before we agents. Before we agents. Before we get into the details, get into the details, get into the details, let us let us let us briefly briefly briefly introduce ourselves. We are introduce ourselves. We are introduce ourselves. We are twin sisters. We twin sisters. We twin sisters. We both worked in both worked in both worked in development. I'm Olya, a UI/UX development. I'm Olya, a UI/UX development. I'm Olya, a UI/UX designer, and I've been designer, and I've been designer, and I've been creating game creating game creating game interfaces for over interfaces for over interfaces for over 8 years. 8 years. And I'm Alina, a Unity developer. I have been working developer. I have been working developer. I have been working in the gaming industry for in the gaming industry for in the gaming industry for about 9 years. about 9 years.

And for a long time, interface implementation interface implementation remained the same remained the same remained the same monotonous monotonous monotonous work between design work between design work between design and development. So over the and development. So over the and development. So over the years we've gradually years we've gradually years we've gradually built a built a built a tool that tool that tool that helps helps helps automate more and automate more and automate more and more of this work. more of this work. Today we will show Today we will show how this tool has developed how this tool has developed how this tool has developed , how the , how the , how the pipeline works, and what AI is already doing pipeline works, and what AI is already doing pipeline works, and what AI is already doing well in well in well in implementing the implementing the implementing the interface. First of interface. First of interface. First of all, I want to explain all, I want to explain all, I want to explain what UI implementation is. what UI implementation is. So, So, UI implementation is the UI implementation is the UI implementation is the process of converting a process of converting a process of converting a layout from Figma to a layout from Figma to a layout from Figma to a working screen in Unity. working screen in Unity. You recreate the layout, You recreate the layout, place each place each place each element, element, element, adjust the dimensions adjust the dimensions , padding, and , padding, and , padding, and check if everything check if everything check if everything works. Doing works. Doing works. Doing this manually takes this manually takes this manually takes a lot of time. It's a lot of time. It's a lot of time. It's monotonous, requires monotonous, requires monotonous, requires attention to detail, and, attention to detail, and, attention to detail, and, frankly, not frankly, not frankly, not very exciting. But what about very exciting. But what about very exciting. But what about adding AI to adding AI to adding AI to this project? To this project? To this project? To this process and to this process and to this process and to your project. He your project. He your project. He can take on the can take on the can take on the routine work while routine work while routine work while we relax over we relax over we relax over coffee. Sounds coffee. Sounds coffee. Sounds good, right? But good, right? But good, right? But how much time how much time how much time can this really can this really can this really save? Let's save? Let's save? Let's find out. We find out. We find out. We will reveal the answer will reveal the answer will reveal the answer at the end of our at the end of our at the end of our presentation. So, presentation. So,

the idea came to us the idea came to us back in the Photoshop era, when back in the Photoshop era, when back in the Photoshop era, when we really wanted to we really wanted to we really wanted to reduce the amount of reduce the amount of reduce the amount of manual work. manual work. Yes, the first version of Yes, the first version of our tool our tool our tool read a binary read a binary read a binary PSD file and simply PSD file and simply PSD file and simply placed all the layers placed all the layers placed all the layers on the canvas. Even on the canvas. Even on the canvas. Even then, it was faster then, it was faster then, it was faster than putting together than putting together than putting together the interface by hand. the interface by hand. Then we moved on to Then we moved on to Figma, which provides a pretty Figma, which provides a pretty Figma, which provides a pretty clear structure, clear structure, clear structure, and you can and you can and you can export export export images through its images through its images through its API. So the converter became API. So the converter became API. So the converter became much cleaner, and much cleaner, and much cleaner, and under the right conditions, under the right conditions, under the right conditions, the process was accelerated the process was accelerated the process was accelerated several times. And several times. And several times. And then AI agents became then AI agents became then AI agents became popular, and we popular, and we popular, and we had the idea had the idea had the idea to turn the to turn the to turn the converter into an MCP converter into an MCP server. So, server. So, server. So, the converter works the converter works the converter works deterministically, so it does a deterministically, so it does a deterministically, so it does a good job of creating good job of creating good job of creating typical screens. But there are typical screens. But there are typical screens. But there are always always always parts that still have to be parts that still have to be parts that still have to be built built built by hand. Additionally, by hand. Additionally, by hand. Additionally, there are issues with there are issues with there are issues with rebuilding prefabs rebuilding prefabs , prefab variants, , prefab variants, , prefab variants, states, and designs with states, and designs with states, and designs with unusual unusual unusual structures.

structures. structures. Writing a Writing a Writing a custom custom custom handler for a single handler for a single handler for a single exception is often more exception is often more exception is often more expensive than simply expensive than simply expensive than simply fixing that fixing that fixing that case manually. And case manually. And case manually. And ultimately, letting AI ultimately, letting AI ultimately, letting AI make corrections make corrections make corrections after the converter after the converter after the converter seemed like a good seemed like a good seemed like a good idea to us, because these are small, idea to us, because these are small, idea to us, because these are small, routine tasks that routine tasks that routine tasks that AI AI AI does well. does well. Let me Let me provide a little provide a little provide a little context. We context. We context. We work on work on work on mobile projects mobile projects that that that have been in have been in have been in production for years and that we production for years and that we production for years and that we built on Unity UI. A built on Unity UI. A typical game typical game screen can have 30 or screen can have 30 or screen can have 30 or more elements and more elements and more elements and requires about 6 requires about 6 requires about 6 hours to develop. hours to develop. hours to develop. Most of this Most of this Most of this time is spent on the time is spent on the time is spent on the hierarchy, basic hierarchy, basic hierarchy, basic states, states, states, communication components, and checking communication components, and checking communication components, and checking everything against the layout. everything against the layout. Since Unity UI is already a Since Unity UI is already a key part of key part of key part of these projects, we these projects, we these projects, we wanted to find a way wanted to find a way wanted to find a way to speed up this to speed up this to speed up this workflow, not workflow, not workflow, not replace it. We replace it. We replace it. We also tried the also tried the also tried the easy way and gave easy way and gave easy way and gave agents the entire screen agents the entire screen agents the entire screen at once. The result was at once. The result was at once. The result was interesting, but interesting, but interesting, but difficult to work with. JSON from difficult to work with. JSON from difficult to work with. JSON from Figma is very heavy, and the Figma is very heavy, and the Figma is very heavy, and the prefab itself is stored prefab itself is stored prefab itself is stored as a large YAML file.

as a large YAML file. as a large YAML file. The agent spends The agent spends The agent spends a lot of time a lot of time a lot of time figuring out the figuring out the figuring out the structure and often structure and often structure and often writes scripts for writes scripts for writes scripts for himself. Because of this, himself. Because of this, himself. Because of this, it takes a lot of time it takes a lot of time it takes a lot of time and tokens, and the and tokens, and the and tokens, and the result is result is result is slightly different every time. Ultimately, slightly different every time. Ultimately, slightly different every time. Ultimately, it is slow, expensive, it is slow, expensive, it is slow, expensive, and unpredictable. and unpredictable. Many companies Many companies have tried have tried have tried to connect Figma to Unity to connect Figma to Unity to connect Figma to Unity to reduce the cost to reduce the cost to reduce the cost of creating an of creating an of creating an interface. Figma has its interface. Figma has its interface. Figma has its own official MCP. own official MCP. It provides the agent with a It provides the agent with a layout context, and layout context, and layout context, and the agent can the agent can the agent can create the prefab create the prefab create the prefab on its own. But it on its own. But it on its own. But it doesn't have integration with doesn't have integration with doesn't have integration with Unity. Unity AI assistant Unity. Unity AI assistant Unity. Unity AI assistant creates a screen directly in creates a screen directly in creates a screen directly in the editor via a the editor via a the editor via a link from Figma, and link from Figma, and link from Figma, and it works with both Unity UI it works with both Unity UI it works with both Unity UI and UI Toolkit. But it's a and UI Toolkit. But it's a and UI Toolkit. But it's a ready-made tool, and ready-made tool, and ready-made tool, and in a large project in a large project in a large project it doesn't always work it doesn't always work it doesn't always work as expected, and we as expected, and we as expected, and we lacked lacked lacked control. There are also control. There are also control. There are also many many many open open open source tools, like Unity Figma source tools, like Unity Figma source tools, like Unity Figma Bridge, and several paid Bridge, and several paid Bridge, and several paid converters. They are all converters. They are all converters. They are all quite similar to the quite similar to the quite similar to the converters we converters we converters we already had, and we wanted already had, and we wanted already had, and we wanted more than just a more than just a more than just a simple converter.

simple converter. So we decided to So we decided to focus on focus on focus on three things. The first three things. The first is to synchronize the UI Kit is to synchronize the UI Kit is to synchronize the UI Kit so that the kit in Figma and the so that the kit in Figma and the so that the kit in Figma and the kit in Unity work kit in Unity work kit in Unity work as a single system, and as a single system, and as a single system, and all screens should be all screens should be all screens should be built based on built based on built based on this kit. The second this kit. The second is fewer manual changes is fewer manual changes is fewer manual changes so that nothing so that nothing so that nothing needs to be needs to be needs to be fixed later, and the third fixed later, and the third is reassembling is reassembling is reassembling prefabs by the agent, prefabs by the agent, prefabs by the agent, rather than manually. When rather than manually. When rather than manually. When the designer changes the designer changes the designer changes the layout, we ask the the layout, we ask the the layout, we ask the agent to apply agent to apply agent to apply that change, and the that change, and the that change, and the company links and our company links and our company links and our own corrections own corrections own corrections must remain in must remain in must remain in place. place. The foundation of this The foundation of this pipeline is UI Kit. For pipeline is UI Kit. For pipeline is UI Kit. For automation automation automation to work well, the to work well, the to work well, the set must be set must be set must be structured and structured and structured and predictable. predictable. Components Components need clear need clear need clear names, states should names, states should names, states should be organized be organized be organized sequentially, and sequentially, and sequentially, and repeating elements repeating elements repeating elements should be should be should be reused rather than reused rather than reused rather than copied. The copied. The copied. The closer the set in Figma is to closer the set in Figma is to closer the set in Figma is to the set in Unity, the the set in Unity, the the set in Unity, the less guessing the agent less guessing the agent less guessing the agent has to do has to do . Even without AI, the . Even without AI, the . Even without AI, the synchronized UI Kit synchronized UI Kit synchronized UI Kit already makes already makes interface implementation much interface implementation much faster. For Figma and Unity faster. For Figma and Unity faster. For Figma and Unity to understand each other, to understand each other, to understand each other, they need a common they need a common they need a common vocabulary. One solution

vocabulary. One solution vocabulary. One solution in Figma should mean in Figma should mean in Figma should mean one specific thing in one specific thing in one specific thing in Unity. Components Unity. Components Unity. Components become prefabs, become prefabs, become prefabs, variants become variants become variants become prefab variants, prefab variants, prefab variants, autolayouts become autolayouts become autolayouts become layout groups, and constraints become layout groups, and constraints become anchors. When this anchors. When this anchors. When this mapping is mapping is mapping is clear, the agent clear, the agent clear, the agent no longer needs no longer needs no longer needs to guess what to guess what to guess what the designer meant. To the designer meant. To the designer meant. To improve the result, improve the result, improve the result, we follow we follow we follow three simple rules. three simple rules. The first is clear and The first is clear and consistent consistent consistent naming. naming. naming. Element names should Element names should Element names should explain what they explain what they explain what they are. The second is the correct are. The second is the correct are. The second is the correct use of use of use of components and their components and their components and their variants. variants. Repeatable Repeatable interface elements should interface elements should interface elements should be reusable be reusable be reusable components, not components, not components, not copies. Third, copies. Third, proper responsive proper responsive proper responsive layout. We layout. We layout. We use use use constraints and constraints and constraints and autolayouts, so autolayouts, so autolayouts, so the layout already shows how the layout already shows how the layout already shows how elements should elements should elements should behave on different behave on different behave on different screen sizes. These screen sizes. These screen sizes. These rules help rules help rules help the agent understand the the agent understand the the agent understand the designer's intent, designer's intent, designer's intent, use use use fewer tokens, and fewer tokens, and fewer tokens, and make fewer make fewer make fewer decisions on its own. And decisions on its own. And decisions on its own. And it doesn't have to be it doesn't have to be it doesn't have to be done manually.

done manually. done manually. Figma Agent or plugins Figma Agent or plugins Figma Agent or plugins can help with can help with can help with naming, naming, naming, responsive layout, responsive layout, responsive layout, and finding the right and finding the right and finding the right components. A quality components. A quality components. A quality layout works like a layout works like a layout works like a good prompt good prompt . Clear input data . Clear input data . Clear input data produces a more produces a more produces a more predictable predictable predictable result. Now result. Now result. Now let's see what let's see what let's see what happens when these happens when these happens when these rules are ignored. rules are ignored. We don't want the We don't want the agent to improvise. agent to improvise. agent to improvise. We want the We want the We want the final interface to be as close to the final interface to be as close to the designer's intent as possible. The designer designer's intent as possible. The designer defines the solution in defines the solution in defines the solution in Figma, and the agent takes on the Figma, and the agent takes on the Figma, and the agent takes on the repetitive repetitive repetitive work. So the layout work. So the layout work. So the layout becomes a specification. becomes a specification. If the structure is If the structure is unclear, the agent may unclear, the agent may unclear, the agent may choose the wrong choose the wrong choose the wrong icon, pick the icon, pick the icon, pick the wrong prefab, wrong prefab, wrong prefab, or reassemble something or reassemble something or reassemble something because the original because the original because the original component was component was component was disconnected. And it's not disconnected. And it's not disconnected. And it's not just that a clear just that a clear just that a clear and predictable and predictable and predictable structure makes structure makes structure makes the project clearer the project clearer the project clearer and easier to support and easier to support and easier to support for the entire team.

for the entire team. A frame called “frame A frame called “frame 333222” won’t hurt 333222” won’t hurt 333222” won’t hurt your your your product metrics today. product metrics today. But many small But many small inconsistencies inconsistencies inconsistencies make the make the make the system difficult to maintain over time. system difficult to maintain over time. Before the designer Before the designer hands over the assignment to hands over the assignment to hands over the assignment to the agent, the agent, the agent, one final one final one final check is performed. We check is performed. We check is performed. We check check check naming and naming and naming and hierarchy, remove hierarchy, remove hierarchy, remove unnecessary elements, and unnecessary elements, and unnecessary elements, and make sure make sure make sure masks and autolayouts masks and autolayouts masks and autolayouts are used are used are used correctly. We also correctly. We also correctly. We also test test test optimization, optimization, optimization, components and their components and their components and their variants, assets, and variants, assets, and variants, assets, and adaptive behavior adaptive behavior adaptive behavior across different across different across different screen sizes and content. screen sizes and content. This can be done This can be done manually or manually or manually or with the Figma agent, with the Figma agent, with the Figma agent, but the main goal is but the main goal is but the main goal is simple. Provide the agent with a simple. Provide the agent with a simple. Provide the agent with a clear and reliable clear and reliable clear and reliable specification before specification before specification before starting work. So, the starting work. So, the starting work. So, the next question is: where next question is: where next question is: where is the single is the single is the single source of truth? In source of truth? In source of truth? In our case, our case, our case, Figma mockups are always the Figma mockups are always the Figma mockups are always the source of truth, and Unity source of truth, and Unity prefabs simply prefabs simply prefabs simply reproduce them. Unity reproduce them. Unity reproduce them. Unity also maintains also maintains also maintains mappings between mappings between mappings between components and components and components and prefabs, as well as prefabs, as well as prefabs, as well as between images and between images and between images and sprites. So sprites. So any change in Figma should any change in Figma should any change in Figma should be reflected in be reflected in be reflected in Unity. For example, if

Unity. For example, if Unity. For example, if we update a widget we update a widget component in Figma, we component in Figma, we component in Figma, we need to update the need to update the need to update the associated prefab in associated prefab in associated prefab in Unity. While keeping Unity. While keeping Unity. While keeping all the logic and all the logic and all the logic and existing links in the existing links in the existing links in the project project project intact. Now intact. Now intact. Now about how a about how a about how a Figma component finds its Figma component finds its Figma component finds its prefab in Unity. First, prefab in Unity. First, prefab in Unity. First, we use a we use a we use a clear name and a clear name and a clear name and a stable stable stable component ID. The mapping component ID. The mapping component ID. The mapping associates this associates this associates this component ID with a component ID with a component ID with a specific prefab. specific prefab. specific prefab. For example, "button primary" For example, "button primary" For example, "button primary" in Figma corresponds to "primary in Figma corresponds to "primary in Figma corresponds to "primary button" in Unity. If there button" in Unity. If there button" in Unity. If there is still no match, we is still no match, we is still no match, we run a skill run a skill run a skill that searches for the desired that searches for the desired that searches for the desired prefab in the project. prefab in the project. prefab in the project. If nothing is If nothing is If nothing is found, the prefab must found, the prefab must found, the prefab must be created from scratch be created from scratch . The user can . The user can . The user can set up these pairs set up these pairs set up these pairs manually or allow the manually or allow the manually or allow the same skill same skill same skill to do so. Now to do so. Now to do so. Now let's talk about let's talk about let's talk about architecture. The foundation architecture. The foundation architecture. The foundation is our existing is our existing is our existing tool that works tool that works tool that works with Unity UI, and it is with Unity UI, and it is with Unity UI, and it is divided into two divided into two divided into two levels. The levels. The low-level layer is the core. This is just a is the core. This is just a is the core. This is just a simple Unity package. It simple Unity package. It simple Unity package. It reads a Figma frame into a reads a Figma frame into a reads a Figma frame into a single tree model and single tree model and single tree model and passes it through a passes it through a passes it through a sequence of steps sequence of steps —a pipeline. The steps are —a pipeline. The steps are —a pipeline. The steps are extensible and extensible and extensible and customizable, so you customizable, so you customizable, so you can modify them for your can modify them for your can modify them for your own project. The own project. The high-level layer is the interface. We is the interface. We is the interface. We chose MCP instead of the chose MCP instead of the chose MCP instead of the editor window so that

editor window so that editor window so that the agent could control the agent could control the agent could control the kernel directly from the chat. the kernel directly from the chat. If necessary, you If necessary, you can add a can add a can add a regular regular regular editor window next to it, and editor window next to it, and editor window next to it, and the kernel will not the kernel will not the kernel will not change. The MCP server change. The MCP server change. The MCP server has certain has certain has certain tools divided tools divided tools divided into five groups. The first into five groups. The first into five groups. The first group is reading the group is reading the group is reading the layout. We can layout. We can layout. We can load a load a load a node hierarchy from node hierarchy from node hierarchy from Figma, get Figma, get Figma, get information about a information about a information about a specific node, and specific node, and specific node, and export export export images. The second images. The second images. The second group is the creation of group is the creation of group is the creation of prefabs. We can prefabs. We can prefabs. We can get a list of get a list of get a list of pipelines and pipelines and pipelines and build a prefab from a build a prefab from a build a prefab from a hierarchy of nodes hierarchy of nodes hierarchy of nodes through a specific through a specific through a specific pipeline. The third group pipeline. The third group is editing. is editing. Batch modify a Batch modify a prefab and retrieve prefab and retrieve prefab and retrieve it as it as it as compressed JSON. The first compressed JSON. The first compressed JSON. The first group is assets and group is assets and group is assets and mapping. Saving mapping. Saving mapping. Saving sprites in Unity, sprites in Unity, sprites in Unity, linking the asset to a linking the asset to a linking the asset to a Figma component ID, and Figma component ID, and Figma component ID, and viewing what's already viewing what's already viewing what's already in the project. And the last in the project. And the last in the project. And the last group is checking the group is checking the group is checking the connection status.

connection status. In addition to these In addition to these tools, there are tools, there are tools, there are six skills. six skills. Project setup , checking , checking , checking connections: token, connections: token, connections: token, editor, and editor, and editor, and pipelines. pipelines. pipelines. Figma and Unity connection for finding Figma and Unity connection for finding Figma and Unity connection for finding prefabs and sprites. prefabs and sprites. What already exists in What already exists in the project and linking the project and linking the project and linking them to components in them to components in them to components in Figma. Figma. Figma. Prefab creation—building Prefab creation—building Prefab creation—building widgets and screens from widgets and screens from widgets and screens from scratch. Update scratch. Update scratch. Update prefab— prefab— apply all apply all apply all changes from the layout to an changes from the layout to an changes from the layout to an existing prefab. existing prefab. The inspector shows The inspector shows the difference between the mockup and the the difference between the mockup and the the difference between the mockup and the prefab without prefab without prefab without changing anything. And finally, changing anything. And finally, changing anything. And finally, uploading uploading uploading images from Figma to the images from Figma to the images from Figma to the project. Here's what it project. Here's what it project. Here's what it looks like in practice. The looks like in practice. The looks like in practice. The prefab skill prefab skill prefab skill shows a shows a shows a preview preview preview and hierarchy of the and hierarchy of the and hierarchy of the future screen, future screen, future screen, selects the correct selects the correct selects the correct pipeline, and passes pipeline, and passes pipeline, and passes the task to the MCP for the task to the MCP for the task to the MCP for construction. Then, construction. Then, construction. Then, after after after the build is complete, the agent the build is complete, the agent the build is complete, the agent receives the prefab receives the prefab receives the prefab as a compressed as a compressed as a compressed JSON containing only what is JSON containing only what is JSON containing only what is needed. After needed. After needed. After that, it analyzes the that, it analyzes the that, it analyzes the received prefab, received prefab, received prefab, finds flaws finds flaws finds flaws and fixes only them, and fixes only them, and fixes only them, as we would do it as we would do it as we would do it manually. We already

manually. We already manually. We already mentioned that to mentioned that to mentioned that to work with a prefab, the work with a prefab, the work with a prefab, the agent must know what agent must know what agent must know what it it it consists of. Prefabs consists of. Prefabs consists of. Prefabs are stored in YAML, are stored in YAML, are stored in YAML, which is difficult for both which is difficult for both which is difficult for both agents and humans to read. agents and humans to read. Therefore, we tried Therefore, we tried to convert YAML into a to convert YAML into a to convert YAML into a format that is convenient for the format that is convenient for the format that is convenient for the agent to work with. agent to work with. Let's take the original Let's take the original prefab file as our prefab file as our prefab file as our base level of 100%. We base level of 100%. We base level of 100%. We converted it to converted it to converted it to JSON, and it turned out to be JSON, and it turned out to be JSON, and it turned out to be even larger than the even larger than the even larger than the prefab itself—about 135%. prefab itself—about 135%. So we started So we started squeezing it. First, we squeezing it. First, we squeezing it. First, we minified it, which minified it, which minified it, which significantly reduced the significantly reduced the significantly reduced the file size. file size. file size. We then shortened the keys We then shortened the keys We then shortened the keys while keeping while keeping while keeping them understandable them understandable them understandable to the agent. After to the agent. After to the agent. After that, we started that, we started that, we started storing some storing some storing some objects as regular objects as regular objects as regular arrays, as this is the arrays, as this is the arrays, as this is the most compact most compact most compact form. And finally, we form. And finally, we form. And finally, we got rid of got rid of got rid of default values ​​and default values ​​and default values ​​and null values.

null values. null values. Overall, this reduced Overall, this reduced Overall, this reduced the size to about 8% the size to about 8% of the original size. We of the original size. We of the original size. We tested seven tested seven tested seven formats on the same formats on the same formats on the same prefab: plain JSON prefab: plain JSON , TOML, and even a custom , TOML, and even a custom , TOML, and even a custom format. The native one format. The native one format. The native one turned out to be the smallest, turned out to be the smallest, turned out to be the smallest, but only a few but only a few but only a few percent better than percent better than percent better than optimized JSON. optimized JSON. In addition, it In addition, it required a separate required a separate required a separate parser, and the engine parser, and the engine parser, and the engine worked worse with it worked worse with it worked worse with it than with JSON. So we than with JSON. So we than with JSON. So we left JSON and just left JSON and just left JSON and just optimized it. optimized it. optimized it. Minified, Minified, Minified, shortened keys, shortened keys, shortened keys, made made made arrays flat, and removed arrays flat, and removed arrays flat, and removed default values default values default values and null. and null. The result is 92% smaller The result is 92% smaller than the original prefab, the than the original prefab, the than the original prefab, the standard parser standard parser standard parser reads it, and the engine reads it, and the engine reads it, and the engine works with it without any works with it without any works with it without any problems. Now problems. Now problems. Now let's take a look at the let's take a look at the let's take a look at the interface updates interface updates interface updates in this in this in this workflow. The product workflow. The product workflow. The product is constantly changing is constantly changing is constantly changing to support to support to support new business goals, new business goals, new business goals, features, or features, or features, or user needs. And user needs. And any change in the product any change in the product any change in the product can lead to can lead to can lead to changes in the interface. A changes in the interface. A new offer, a new new offer, a new event, a different event, a different event, a different navigation path, or a new navigation path, or a new navigation path, or a new screen state. Previously, screen state. Previously, screen state. Previously, even a small even a small even a small layout update layout update layout update meant manually meant manually meant manually comparing the design to the comparing the design to the comparing the design to the existing screen in existing screen in existing screen in Unity and transferring

Unity and transferring Unity and transferring each change one by one. each change one by one. As the product grows, this As the product grows, this becomes an ongoing becomes an ongoing support cost. Now support cost. Now let's talk about how to let's talk about how to let's talk about how to refresh the screen with refresh the screen with refresh the screen with minimal minimal minimal side effects. side effects. side effects. You can build You can build You can build it again, but the screen it again, but the screen it again, but the screen in production is not in production is not in production is not blank. It blank. It blank. It already has scripts on already has scripts on already has scripts on objects, links objects, links objects, links between them, and some between them, and some between them, and some manual fixes. manual fixes. If we rebuild the If we rebuild the prefab from scratch, we will prefab from scratch, we will prefab from scratch, we will have to have to have to rebuild it all. Therefore, the rebuild it all. Therefore, the prefab update skill works prefab update skill works differently. It compares the differently. It compares the differently. It compares the current prefab to the current prefab to the current prefab to the mockup and applies mockup and applies mockup and applies only changes to the only changes to the only changes to the structure and structure and structure and properties. And this is what properties. And this is what properties. And this is what it looks like. it looks like. The designer moves The designer moves elements around in the layout, and elements around in the layout, and elements around in the layout, and then we ask then we ask then we ask the agent to rebuild the agent to rebuild the agent to rebuild the widget. It calls the the widget. It calls the prefab update skill, which prefab update skill, which finds what finds what finds what has changed and has changed and has changed and applies it. As applies it. As applies it. As a result, the widget a result, the widget a result, the widget is updated, scripts and is updated, scripts and is updated, scripts and links are preserved, links are preserved, links are preserved, and all manual and all manual and all manual fixes also fixes also fixes also remain in place. Uh remain in place. Uh -huh. Then we decided -huh. Then we decided to measure the result, to measure the result, to measure the result, rather than just trusting our rather than just trusting our rather than just trusting our own feelings. We

own feelings. We own feelings. We took real screens took real screens took real screens and pop-ups from and pop-ups from and pop-ups from production and production and production and checked the visual checked the visual checked the visual quality. She is fine. quality. She is fine. How close the result is How close the result is to the layout, to the layout, to the layout, structure, and structure, and structure, and reuse of reuse of components—Alina components—Alina measured the numbers, measured the numbers, measured the numbers, actual actual actual implementation cost, and time. And implementation cost, and time. And implementation cost, and time. And now the main now the main now the main table. You can table. You can table. You can see it on the slide. see it on the slide. We compared four We compared four ways to create a ways to create a ways to create a single screen: manually single screen: manually , using a , using a , using a converter, with a converter, with a converter, with a regular agent, and with regular agent, and with regular agent, and with our full our full our full setup where the setup where the setup where the converter, engine, converter, engine, converter, engine, agent, MCP, and skills agent, MCP, and skills agent, MCP, and skills work together. We work together. We work together. We compare this to compare this to compare this to human time, human time, human time, agent time, total agent time, total agent time, total build time, and build time, and build time, and agent cost. So agent cost. So , you can see the , you can see the , you can see the result on the slide.

result on the slide. And now the same thing regarding And now the same thing regarding the approach, but from a the approach, but from a the approach, but from a quality perspective. With quality perspective. With quality perspective. With manual implementation, there manual implementation, there manual implementation, there is always a risk of is always a risk of is always a risk of human error. human error. The result The result largely depends on largely depends on largely depends on how how how carefully a person carefully a person carefully a person performs the work. performs the work. The converter is The converter is more stable, but without an more stable, but without an more stable, but without an agent it may have agent it may have agent it may have difficulty finding difficulty finding difficulty finding assets or prefabs assets or prefabs assets or prefabs if references if references if references are missing, and sometimes are missing, and sometimes are missing, and sometimes recreates recreates recreates existing components. A existing components. A regular agent, regular agent, which many teams which many teams which many teams probably already probably already probably already use, may use, may use, may produce slightly different produce slightly different produce slightly different results each results each results each time. It may also time. It may also time. It may also have issues with have issues with have issues with large screens, large screens, large screens, require manual require manual require manual fixes, and fixes, and fixes, and break break break script references. So our script references. So our script references. So our tool was tool was tool was designed to designed to designed to address these address these address these issues, but of course issues, but of course issues, but of course it's not perfect yet.

it's not perfect yet. Like any agent-based Like any agent-based system, it has system, it has system, it has limitations and in some limitations and in some limitations and in some cases still cases still cases still requires a human. requires a human. Okay, let's summarize. We Okay, let's summarize. We created this created this created this tool to tool to tool to speed up speed up speed up UI implementation and UI implementation and UI implementation and relieve designers relieve designers relieve designers and developers of and developers of and developers of routine work. It routine work. It routine work. It works best when works best when works best when the project has at least a the project has at least a the project has at least a basic design basic design system, such as system, such as system, such as reusable reusable reusable components, clear components, clear components, clear naming, and a naming, and a naming, and a predictable predictable predictable structure. During structure. During structure. During our testing, our testing, our testing, UI implementation became on UI implementation became on UI implementation became on average four average four average four times faster for times faster for times faster for the screens we the screens we the screens we measured. And on measured. And on measured. And on this slide you this slide you this slide you can see the QR code can see the QR code can see the QR code for the repository and for the repository and for the repository and our contacts. You our contacts. You our contacts. You can send can send can send your feedback about our your feedback about our your feedback about our tool.

tool. The repository is, of course, The repository is, of course, open and open and open and free to free to free to use. So you use. So you use. So you can try can try can try it out in your own it out in your own it out in your own projects and projects and projects and adapt it to your adapt it to your adapt it to your pipelines. That's all. pipelines. That's all. pipelines. That's all. Thank you. Thank you. Thank you. Thank you. Wonderful report. Thank you. Thank you. Yes, thank you very much, Yes, thank you very much, Yes, thank you very much, Lena and Olya. And a Lena and Olya. And a Lena and Olya. And a quick comment: quick comment: quick comment: I really liked the I really liked the I really liked the design of your slides design of your slides design of your slides and visualizations. So it and visualizations. So it and visualizations. So it was clear that was clear that was clear that a lot of work had been put into it a lot of work had been put into it a lot of work had been put into it . It looked very . It looked very . It looked very good. Thank you. good. Thank you. Thank you. Class. So, we have a Class. So, we have a few questions from the few questions from the few questions from the chat. The first one is from Lazy chat. The first one is from Lazy chat. The first one is from Lazy Indian Techie. Question: Do I Indian Techie. Question: Do I Indian Techie. Question: Do I need Dev Mode in Figma need Dev Mode in Figma need Dev Mode in Figma to set up to set up to set up this automation? this automation?

Yes, you need Dev Yes, you need Dev Mode, as the Mode, as the Mode, as the free version of free version of free version of Figma has certain limits Figma has certain limits Figma has certain limits on the number of API on the number of API requests. And so. requests. And so. Okay, thank you. And we Okay, thank you. And we have a few more have a few more have a few more questions, maybe questions, maybe questions, maybe Michael, you want to Michael, you want to Michael, you want to ask the following? ask the following? Yes, Rule X Yes, Rule X was asked about was asked about was asked about dictionaries for dictionaries for dictionaries for translating translating translating Figma concepts into Unity concepts, and Figma concepts into Unity concepts, and Figma concepts into Unity concepts, and do they need to be do they need to be do they need to be suggested or will the agent suggested or will the agent suggested or will the agent be able to be able to be able to use them use them use them independently? independently? Ahem. Alino. To Ahem. Alino. To create a UI kit in Unity, create a UI kit in Unity, create a UI kit in Unity, we have assets, simple we have assets, simple we have assets, simple assets that have assets that have assets that have a connection to Figma through a a connection to Figma through a a connection to Figma through a component ID, and all component ID, and all component ID, and all elements from the UI kit in Figma elements from the UI kit in Figma elements from the UI kit in Figma must be must be represented in this represented in this mapping, in this mapping, in this mapping, in this asset. So we also asset. So we also asset. So we also have a skill for this have a skill for this have a skill for this mapping, because it's a very mapping, because it's a very mapping, because it's a very complex task complex task to map all these to map all these to map all these elements.

elements. Perfectly. Perfectly. So, it seems we have So, it seems we have So, it seems we have no more no more no more questions, right? questions, right? questions, right? Yes, thank you. Yes, Yes, thank you. Yes, Yes, thank you. Yes, next. Regarding the next. Regarding the designer checklist, have designer checklist, have you seen any success in having the you seen any success in having the you seen any success in having the agent perform these agent perform these agent perform these checks and checks and checks and fix the fix the fix the interface themselves? interface themselves? Yes, of course. You Yes, of course. You can write can write can write your own skills to your own skills to your own skills to fix layouts, fix layouts, fix layouts, automate automate automate implementations, implementations, implementations, find find find inconsistencies, inconsistencies, inconsistencies, remove unnecessary remove unnecessary remove unnecessary elements, and that's perfectly elements, and that's perfectly elements, and that's perfectly fine, in my opinion. fine, in my opinion. OK. Great, thank you. OK. Great, thank you. My question: Do you want My question: Do you want My question: Do you want another question from another question from another question from our chat? our chat? our chat? Yes, someone asked Yes, someone asked Yes, someone asked how well this how well this how well this works for works for works for legacy projects, legacy projects, legacy projects, not just new ones.

not just new ones. not just new ones. Do you have any Do you have any Do you have any advice for someone advice for someone advice for someone looking to start looking to start looking to start integrating your integrating your integrating your tool? To be tool? To be honest, we honest, we work with work with work with legacy legacy legacy projects, which is projects, which is projects, which is why we created this why we created this why we created this tool. If you tool. If you tool. If you are working on a new are working on a new are working on a new project, you can project, you can project, you can use the UI use the UI use the UI toolkit, and you don't toolkit, and you don't toolkit, and you don't need any MCPs in the UI toolkit. need any MCPs in the UI toolkit. The agent can The agent can create an interface create an interface create an interface in the UI toolkit without any in the UI toolkit without any in the UI toolkit without any MCPs. So Yes, it works well in MCPs. So Yes, it works well in MCPs. So Yes, it works well in legacy projects legacy projects legacy projects . . Honestly, we did Honestly, we did n't even believe n't even believe n't even believe it would work. But we it would work. But we it would work. But we were very surprised were very surprised were very surprised that the results that the results that the results surprised us and they are very surprised us and they are very surprised us and they are very exciting. Really.

exciting. Really. Okay, let's Okay, let's look at another look at another look at another question here. Someone question here. Someone question here. Someone asked if they asked if they asked if they had you had you had you demo the game demo the game demo the game during the talk, so during the talk, so during the talk, so they were curious they were curious they were curious to know more about to know more about to know more about this game project, is there this game project, is there this game project, is there anything else you anything else you anything else you can share? can share? Yes, this is our own Yes, this is our own project, Kids Light. This is a project, Kids Light. This is a project, Kids Light. This is a visual game, it's a game for visual game, it's a game for visual game, it's a game for people who have lost people who have lost people who have lost part of their part of their vision. vision. Field of view, yes. Field of view, yes. Of course. I really Of course. I really like this like this like this intersection where people intersection where people intersection where people use games use games use games to help others to help others to help others with real-world with real-world with real-world problems. So, what problems. So, what problems. So, what exactly brought you into this exactly brought you into this exactly brought you into this field and motivated you field and motivated you field and motivated you to help people in to help people in to help people in this way?

this way? Yes. Uh-huh. Oleg can Yes. Uh-huh. Oleg can answer this answer this answer this question. Uh-huh. Uh question. Uh-huh. Uh question. Uh-huh. Uh -huh. -huh. Oleg has experience Oleg has experience losing part of his vision. losing part of his vision. Yes, and Alina created Yes, and Alina created this game for me. So this game for me. So this game for me. So we decided to we decided to we decided to release it for release it for release it for other people who other people who other people who have the same problem as have the same problem as me. me. I understand. Tell me, has it I understand. Tell me, has it been difficult to live with been difficult to live with been difficult to live with vision problems, and does vision problems, and does vision problems, and does this this this tool help you be more tool help you be more tool help you be more productive and productive and productive and achieve more in achieve more in achieve more in what you do? what you do?

Yes, this tool Yes, this tool helped adapt helped adapt helped adapt to the loss of visual field. Uh-huh to the loss of visual field. Uh-huh . We practice . We practice . We practice reading, finding reading, finding reading, finding something. In the real something. In the real something. In the real world, when you world, when you world, when you cross the street, you cross the street, you cross the street, you may not see may not see may not see people or cars because of your people or cars because of your people or cars because of your "blind spot." Therefore, you "blind spot." Therefore, you "blind spot." Therefore, you need to practice need to practice need to practice this skill to this skill to this skill to avoid such avoid such avoid such situations in real situations in real situations in real life. life. Of course. Of course. Of course. Of course. Thank you for sharing. Thank you for sharing. Thank you for sharing. Yes, very, very interesting. Yes, very, very interesting. Yes, very, very interesting. Another question: does what Another question: does what Another question: does what you you you showed work well with showed work well with showed work well with complex game complex game complex game systems? Because in systems? Because in systems? Because in the example you the example you showed today, it showed today, it looked more like looked more like looked more like an application than a an application than a an application than a complex game complex game complex game mechanic. mechanic.

Yes, we work in Yes, we work in mobile games, and mobile games, and mobile games, and they have many they have many they have many elements, screens, elements, screens, elements, screens, mechanics, and mechanics, and mechanics, and interfaces. interfaces. Perfectly. Yes, there Perfectly. Yes, there were a lot of were a lot of were a lot of questions before your session. Everyone questions before your session. Everyone questions before your session. Everyone has delved very deeply into has delved very deeply into has delved very deeply into this topic with you. this topic with you. this topic with you. So we are grateful that So we are grateful that So we are grateful that we had the extra we had the extra we had the extra time to discuss time to discuss time to discuss these questions. Lazy Indian these questions. Lazy Indian these questions. Lazy Indian asked what asked what asked what your experience was with your experience was with your experience was with different different different device sizes and how did you device sizes and how did you device sizes and how did you make the interface make the interface make the interface responsive? Since responsive? Since responsive? Since UI Kit is more like UI Kit is more like UI Kit is more like XML, have you XML, have you XML, have you tested on different tested on different tested on different devices? Did devices? Did automation help, or did you automation help, or did you have to do have to do have to do any manual any manual any manual tuning tuning tuning afterwards? afterwards? Honestly, we haven't Honestly, we haven't tested it. This tested it. This tested it. This adaptability. So I do adaptability. So I do adaptability. So I do n't know how n't know how n't know how to answer this to answer this to answer this question.

question. I understand. So, it looks like this is something I understand. So, it looks like this is something they they they can take to can take to can take to GitHub and work with GitHub and work with GitHub and work with you on how to better you on how to better you on how to better handle adaptive handle adaptive handle adaptive scenarios in the scenarios in the scenarios in the future. future. Yes. Yes. Sounds great. Thank you Sounds great. Thank you Sounds great. Thank you for your question. I think for your question. I think for your question. I think we have time for one more. we have time for one more. we have time for one more. We had a question We had a question We had a question about how to work about how to work about how to work with component state with component state with component state in Unity. So if a prefab in Unity. So if a prefab in Unity. So if a prefab changes design changes design changes design in Figma and you update in Figma and you update in Figma and you update it in Unity, am I it in Unity, am I it in Unity, am I understanding correctly that understanding correctly that understanding correctly that they are trying they are trying they are trying to figure out which to figure out which to figure out which direction direction direction the changes are going? Do you the changes are going? Do you the changes are going? Do you only make changes in Figma to only make changes in Figma to only make changes in Figma to port to Unity, or port to Unity, or port to Unity, or can you make changes in can you make changes in can you make changes in Unity? Can they Unity? Can they Unity? Can they go back to go back to go back to Figma? Ahem. Figma? Ahem. As already mentioned, As already mentioned, Figma is our source of Figma is our source of Figma is our source of truth, and if we truth, and if we truth, and if we change something in Unity, change something in Unity, change something in Unity, it shouldn't it shouldn't it shouldn't change in Figma, change in Figma, change in Figma, because...it doesn't work.

because...it doesn't work. because...it doesn't work. Er...Hmm. When you Er...Hmm. When you Er...Hmm. When you change something in Figma, change something in Figma, change something in Figma, it shouldn't...I don't it shouldn't...I don't it shouldn't...I don't know. know. know. Change immediately in Unity, Change immediately in Unity, Change immediately in Unity, because you have to because you have to because you have to ask the agent ask the agent ask the agent to make these changes. to make these changes. Perfectly. Well, we really Perfectly. Well, we really appreciate you appreciate you appreciate you talking talking talking to us today about design and the to us today about design and the to us today about design and the work you work you work you do here with the agent. It's do here with the agent. It's do here with the agent. It's really exciting to see really exciting to see really exciting to see the benefits you've the benefits you've the benefits you've gotten from this gotten from this gotten from this work, and we really work, and we really work, and we really appreciate you appreciate you appreciate you sharing it with us sharing it with us sharing it with us today. today. Yes, thank you. Yes, thank you. Thank you very much, Olena and Thank you very much, Olena and Thank you very much, Olena and Illya. Illya. Illya. Thank you. Goodbye. Thank you. Goodbye. Thank you. Goodbye. Thank you.