---
title: AI-Assisted Development
description: Figma is a popular cloud-based design platform. There are AI tools that can accelerate the process of turning your design into a functional web page.
publish date: 2024-08-26
author: Fernando Torres
image: https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/blog_hero_figma-to-code.jpg?rev=7aac78dd275740c5a5cb64c5b51d53b3
url: http://www.oshyn.com/blog/2024/08/ai-development-figma-to-code
---
# AI-Assisted Development

![Woman working in design and AI assisted development](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/blog_hero_figma-to-code.jpg?rev=7aac78dd275740c5a5cb64c5b51d53b3&hash=8D38D46894FD9C0634501CF53569D090)

Figma is a cloud collaborative design platform popular among designers and developers. Every team member can access it easily with an internet browser, download it to their machine, and sync all their work. Figma is intuitive, easy to use, and free, allowing teams to create everything from sketches to functional prototypes.

![Figma is a collaborative design platform](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_1.png?rev=bd26fb62c3ad481f9923e4819070001c?h=auto)

If you are wondering if you could accelerate the process of turning your design into a functional web page without starting from scratch, you are on the right path.

Plenty of plugins can be installed in Figma to transform your prototypes into functional code.

Let’s explore some of them:

![Figma Plugins](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_2.png?rev=e7a4932502174a3b9c82b3a2d4f7c73d)

The Locofy plugin is one of the most complete and well-documented plugins, and you can also use it within Adobe XD.

![Locofy Plugin](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_3.png?rev=c538c58ac1c6447cbd88696df88573e1)

Locofy helps you convert your design into production-ready front-end code for web and mobile apps.

Installation is straightforward: open your Figma, go to the plugins section, and search for Locofy.

![Locofy installation](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_4.png?rev=29ab290db9694bb28dd38e7a36134d04)

Once installed, a new popup menu will allow you to create an account, or you can log in with your Google account.

![Locofy Pop Up to Connect Account](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_5.png?rev=c004aa2ada834a97a160e60e7bd8d977)

![Locofy Sign up window](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_6.png?rev=94434da74ea145f795b66dd557f753fe)

![Signed up to Locofy window](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_7.png?rev=06450af6657740efb5a0553ce5218852)

Next, Locofy will appear with the step-by-step optimization screen, where the plugin will guide you through the steps necessary to fix all the issues encountered until you get the final code.

![Log in Plugin step-by-step optimization screen](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_8.png?rev=8a41f56b7f9e4cdea254812a34baa512)

### Step 1: Design Optimizer

Here, you can fix the design structure by applying Figma's auto-layout functionality and ensure that the responsiveness of all your screens works properly.

You can let the AI fix all the issues automatically or go one by one and fix everything yourself. The latter is highly recommended because if the design is not well structured from the beginning, the AI will try to fix it, but it may lead to undesired results. Nevertheless, you can fix it manually at any time with the plugin or in the code.

![Locofy Step 1: Optimize design](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_9.png?rev=71d419466eb945199aaf288a5e1cdc1f)

### Step 2: Tagging

Here, you will define all the interactivity of your app. You should select all your designed buttons, tag them, and assign a button behavior with its attributes like hover color, links, etc. The same goes for audio, videos, and so on.

![Locofy Step 2: Tagging](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_10.png?rev=e3a45dc19f53400189987bf415de38b0)

Locofy analyzes your design, tries to locate all your elements or layers, and gives recommendations on how to tag them.
![Search Flights Button](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_11.png?rev=bd6ce6799bc84a4bbca05e951336ebfd)

You will then see the editing mode layer, where you can customize your elements more.

![Editing Mode Layer](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_12.png?rev=706139a8817f4caea45f6040e640b2a4)

You can manually select the correct tag for your element.

![Manual selection of tag for element](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_13.png?rev=371379817a944a11b7b94a6dad482d51)

Within the "Tagged Tab," you will find all your tagged layers and elements. Here, you can remove or edit your tags.

![Tagged Tab](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_14.png?rev=c7afab41df604dd1ba06dfc3d58534c8)

### Step 3: Styling and Layout

In this step, you will ensure that your prototype is fully responsive to different screen sizes. You can define breakpoints, layout systems, positioning, direction, and gaps.

![Locofy Step 3: Edit Styling and Layout](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_15.png?rev=49d7329996644e748ca923064e82256f)

### Step 4: Add actions

This step lets you add on-click actions to your elements, such as changing the page or opening a popup. You can even add a comment that allows the developer to easily integrate a custom functionality, such as API calls, once you have exported the code.

![Locofy Step 4: Add actions](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_16.png?rev=d3d64dc05f44497b962299f147760300)

### Step 5: Sync to Locofy Builder

Locofy builder is where the plugin sends the code, so you can view it and make changes, set up reusable components and props, and export or sync to GitHub.

![Locofy Step 5: Sync to Locofy Builder](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_17.png?rev=45615baa7f3c49168366763e5fbc87c9)

![Locofy Builder Tool](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_18.png?rev=e5345174564d4b699ade0fbc7f544106)

If conflicts arise between the code and your design, you can merge them with the Locofy tool, thus having your code and design sync with your entire team.

Now you have an introduction to how Locofy works; it will help you convert your design to code. However, remember that there is no magic tool where you can press a button and your functional application is done and ready to produce, even though most plugins, whether paid or free, claim that.

For example, while playing around with a Figma design in the desktop version, there were no button states, responsiveness, or actions. We took the design and followed the five steps shown before without making the fixes too deep, converting it to React and Tailwind, and the result was poor-quality code.

The HTML code was full of DIV tags and there was no semantic HTML; Figma just recognizes images and converts them well.

![Figma code creation](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_19.png?rev=dba495025ea94e1098691b903cf0b82b)

Tailwind was pretty well applied, even in the configuration file.

![Configuration file](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_20.png?rev=a81a061c097a4918bc0bc904bc514a62)

It tried to convert all the frames found into React components. However, since no one told the plugin how to handle, group, or tag the components before, the result was messy code that needed a lot of work to fix all the issues, either directly on the code or on the design to convert it again and sync with the builder.

![Frames to React components](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_21.png?rev=93d1f5a59e3140429efb92d7a6e11bd3)

You can create and fix your components using the right panel tools to select what you consider a component and its children, set props, and, if you are in a rush, go with "Auto-components.” But again, if your design is not well structured, you could have unexpected code results.

![Settings of auto-components](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_22.png?rev=eb3c5f443a98456fa265bc41289312cb)

Responsiveness is not accurate, either. Since the design has no responsiveness properties on the same frame, the plugin won't understand what to do if you don't fix all the issues found in the steps before.

![Responsiveness check](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_23.png?rev=1f160d5261eb4c9e9d77442777fdf673)

Usually, designers create a frame for a desktop approach and another for a mobile device using the same design. 

![Desktop and mobile designs in Figma](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_24.png?rev=5824f3448205492a90dfc1c776bb2438)

If you want your design to be converted correctly, you must create your prototype with all the responsiveness properties inside the same frame per page. Locofy has a preview screen where you can see what needs to be fixed to have a completely responsive site.

![Locofy preview screen](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_25.png?rev=7ba26c4632704e9cbfb2889d3c83784a)

We couldn’t find where to use SASS or any other CSS preprocessor or accessibility tool that helps you achieve WCAG requirements. We also did not see any place to configure third-party libraries; for example, when you use a slider, you can do it manually in the builder or when the code is exported.

![React Settings](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2024-08-26-Figma-to-Code/figma-to-code_26.png?rev=9c6792197ed74915944df2a45db16ddc)

The last thing we couldn’t find was a tool for performance optimization. To make your HTML/CSS/JS code performant, you must analyze and make changes to it.

## Wrapping Up

There is an extensive list of AI tools to choose from, but all of them behave similarly. Some have more features than others. You can pick whichever makes you feel more comfortable and can afford it. If you want complete functionality, you must pay the price.

These types of helpers will save you a little bit of coding time. However, you have to do a lot of work fixing your design, ensuring all the assets are in the right place, with the correct tags, inside of well-delimited sections, with the correct hover effects, etc. Otherwise, you will end up with poor-quality code and have to spend much more time fixing all the issues with your FE team.

If you have covered all of the points above and are sure that your design is ready to be transformed into code, you still need to do some tasks with an FE team, like accessibility and page speed performance.

What if your application needs to retrieve JSON format information from the server to render, for example, search results? You still need to do that connection manually!

What if your application needs to be connected to a CMS through middleware? You still need to move your exported code to a new environment.

To close, even if you have help with these AI tools, you still need the expertise of a designer/developer to spend time making everything the right way in any programming language to create a functional web app. No magic wand can save you a lot of coding time and give you a production-ready application with high-quality code with the press of a few buttons.