Getting Started
Dev Mode

Using Locofy.ai in Figma Dev Mode

You can use Locofy.ai in the Dev Mode to allow you to go more seamlessly from design to high-quality frontend code by leveraging the best of Figma.

Dev Mode is a feature of Figma that aims to smoothen the developer handoff process by allowing developers to easily view the code behind the Figma elements, get a list of exports, see design differences, link GitHub files, and much more.

With our Dev Mode integration, developers can now easily get their hands on the Locofy.ai-generated code by simply switching to the Dev Mode in Figma where they can view live, responsive previews as well as the ability to copy and download the code powering that preview.

Installing Locofy.ai in Dev Mode

To access Locofy.ai in the Dev Mode, switch to Dev Mode and click on the “Plugins” section.

Now search for Locofy in the search box and click on Run to run the plugin in Dev Mode.

Using Locofy.ai in the Inspect Tab

Once you have installed the plugin, you can access Locofy.ai generated code directly in the revamped Inspect tab of Figma.

  1. Click on the ‘Inspect’ tab.
  1. Now click on the framework selection menu, currently showing CSS. In the dropdown, you will see Figma’s code options such as CSS, SwiftUI, and Compose. Since you have installed and run the Locofy.ai plugin, you will also find Locofy.ai in the list.
  1. Hover over the plugin to see a submenu with all the frameworks that Locofy.ai supports. Click on the framework you want to view the code in.
  1. You can further customise the generated code by clicking on the settings icon next to the selected framework in the top right corner of the Code panel. You can switch between TypeScript & JavaScript as well as various styling options.

Using Locofy.ai as a Dev Mode plugin

Locofy.ai is also available in the Dev Mode Plugins section and both Locofy Lightning and Locofy Classic workflows are supported. It offers a live, responsive preview of your entire frame, as well as the code powering it.

You can toggle between different breakpoints in the preview. Since Locofy converts your Figma components into code components, the Plugins section is perfect for generating code for an entire screen, not just individual elements. You can also download your whole project with just one click!

Using Lightning flow

  1. Click on 'Lets go' to start the Lightning flow.

  2. You should see the plugin up and running in Dev Mode powered by , running a series of steps to optimise your designs, making them interactive & responsive and generating high quality modular code.

Using the Classic flow

Follow the steps below to use the Locofy.ai plugin in Dev Mode.

  1. Switch to the Plugins tab and click on “Run” on the Locofy.ai plugin.
  1. You should see the plugin up and running in Dev Mode, offering you options to switch between frameworks at the top, followed by 2 steps to make your designs interactive and create code components for generating cleaner code. You will also find a live preview followed by a code viewer. Finally, you have two options at the bottom – Optimise your code using the full-fledged Locofy.ai plugin (present in the Design Mode), or download the code as a zip.

  1. Click on the Start tagging option and select the design elements you want to make interactive by tagging them with the relevant HTML tags such as buttons, checkboxes and inputs. You can also use the Auto-Tagging (opens in a new tab) feature to tag elements 10x faster.

  2. Once you have made the design interactive, proceed to create components by clicking on the step 2 Create code components to access the Auto-Components feature which uses LocoAI to scan your design files and suggests various reusable components with value and style props.

Live Preview

Click on the expand button at the top right to get a better view of your code.

Download Code or Sync to Builder

Once you are happy with what you see, you can hit on the ‘Download Code’ button at the bottom to start downloading your code generated by Locofy.ai. Locofy.ai shows you the number of assets, the components, and the lines of code you have exported.

If you're using Locofy Lightning, you have the option to sync the code to Locofy Builder as well.

Benefits of Locofy.ai’s Design Mode Plugin

The Design Mode plugin offered by Locofy.ai provides an exceptional set of features that enhance your design workflow in Figma. Let's explore the remarkable benefits it brings.

  1. An intuitive step-by-step flow facilitating your design-to-code journey
  2. Optimize your designs effortlessly with the Design Optimiser feature
  3. Building interactive apps with the Locofy.ai Auto-Tagging feature.
  4. Dynamic styling based on media queries & user actions such as hover.
  5. Streamlined collaboration with your teammates and easier deployment to popular cloud providers.
  6. AI-powered features such as Auto-Components to split your code into reusable & extensible components.
  7. Continuous sync and merge to GitHub for keeping your design and code in sync.
Collaborate with TeamLightning