Getting Started
Dev Mode

Using in Figma Dev Mode

You can use 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 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 in Dev Mode

To access 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 in the Inspect Tab

Once you have installed the plugin, you can access 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 plugin, you will also find in the list.
  1. Hover over the plugin to see a submenu with all the frameworks that 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 as a Dev Mode plugin 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 plugin in Dev Mode.

  1. Switch to the Plugins tab and click on “Run” on the 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 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 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’s Design Mode Plugin

The Design Mode plugin offered by 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 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.