Aug 26, 2024
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.
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:
The Locofy plugin is one of the most complete and well-documented plugins, and you can also use it within Adobe XD.
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.
Once installed, a new popup menu will allow you to create an account, or you can log in with your Google account.
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.
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.
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 analyzes your design, tries to locate all your elements or layers, and gives recommendations on how to tag them.
You will then see the editing mode layer, where you can customize your elements more.
You can manually select the correct tag for your element.
Within the "Tagged Tab," you will find all your tagged layers and elements. Here, you can remove or edit your tags.
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.
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.
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.
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.
Tailwind was pretty well applied, even in the configuration file.
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.
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.
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.
Usually, designers create a frame for a desktop approach and another for a mobile device using the same design.
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.
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.
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.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.