How to export code in Figma

One of the best features of Figma is that it allows you to quickly transfer the designs you create with it into code. If you're an app developer or work with designers, this is a valuable skill to learn. Using built-in tools and lots of plugins, Figma allows you to export your design to different platforms.

If you want to learn more about converting your Figma design into code, you've come to the right place. In this article, we'll explain how to export code in Figma and what tools you'll need to use.

How to Export Code in Figma on Windows PC

If you're a Windows user and want to export code in Figma, you'll be happy to know there are plenty of options you can use.

Inspecter Figma

One of the methods you can use to export code into Figma is Figma Inspect. This feature allows you to easily convert your designs into Android, iOS or web code. Since it's built-in, you don't need to install any plugins or third-party apps.

Here's how to use it:

1. Select the items you are interested in and go to the Inspect tab.
2. In the "Code" section, select the code you want to export (CSS for web, Swift for iOS, or XML for Android).

The tool will generate the code based on the option you chose, then you can export it. Although it is a great tool, it has some limitations. Namely, you cannot export SVG to HTML. For this you will need to use a plugin.

Plugins Figma

Figma offers hundreds of useful plugins. We will mention a few that you can use to export your design to HTML.

Figma and HTML

Plugging them in allows you to convert your design to HTML or CSS, depending on your needs. Follow the steps below to install the plugin and export the code:

1. Access the main menu by pressing the icon at the top left.
   
2. Tap on “Plugins”.
   
3. Tap on “Browse plugins in the community”.
   
4. Type "Figma to HTML" and select "Plugins" at the top.
   
5. Tap "Install".
   
6. Go back to your design and select the elements you want.
7. Go back to the main menu, select "Plugins", then select "Figma to HTML".
   
8. Choose HTML or CSS.
   
9. Press "Copy" or "Download", depending on your needs.
   

Anima for Figma

Another useful plugin is Anima for Figma. With this plugin, you can convert your design to HTML, CSS, React, and Vue. Follow these steps to use the plugin:

1. Open the main menu by selecting the icon at the top left.
   
2. Tap on “Plugins”.
   
3. Select “Browse plugins in the community”.
   
4. Type “Anima for Figma”.
   
5. Tap "Install".
   
6. Select the items you want to export.
7. Open the main menu, tap "Plugins" and select "Anima for Figma". Sign up if you don't have an account.
   
8. Choose the type of code and press "Export code".

How to Export Code in Figma on a Mac

Exporting your design to code on a Mac device can be done in several ways.

Inspecter Figma

This built-in tool allows you to inspect and export code and other values ​​for your designs. With Figma Inspect, you can choose from three code options: Android, iOS, or Web (CSS only).

Follow the steps below to use Figma Inspect on a Mac:

1. Select the items you want to export.
2. Open the "Inspect" tab on the right.
3. Choose between CSS, iOS or Android.
4. Copy your code.

If you're only interested in CSS, iOS, and Android, this is a great tool to use. However, if you want to export your design to HTML, you will need to use a different method.

Plugins Figma

If you want to convert your designs to HTML, Figma offers dozens of plugins that serve this purpose. The installation process is simple. We will list some of the most popular.

Figma and HTML

This plugin allows you to convert your design to CSS or HTML. Here's how to install it:

1. Select the top left icon to open the main menu.
   
2. Tap on “Plugins”.
   
3. Select “Browse plugins in the community”.
   
4. Type “Figma to HTML” in the search bar and select “Plugins” at the top.
   
5. Tap "Install".
   
6. Go back to your design and select the elements you want to export.
7. Open the main menu, select "Plugins", then select "Figma to HTML".
   
8. Select HTML or CSS.
   
9. Press "Copy" or "Download".
   

Figma au code

With this plugin, you can convert your Figma design to HTML, Tailwind, Flutter or Swift UI. Follow the steps below to install and use it:

1. Tap the top left icon to access the main menu.
   
2. Select “Plugins”.
   
3. Tap on “Browse plugins in the community”.
   
4. Type “Figma to Code” in the search bar and choose “Plugins” at the top to get relevant results.
   
5. Tap "Install".
   
6. Go to your design and select the desired elements.
7. Go to the main menu again, select "Plugins", then select "Figma to Code".
8. Select the desired code.
9. Press "Copy to clipboard".

Can I export code in Figma on the iPhone?

The new Figma iPhone app was only available in beta via Trial Flight for the first 10 iPhones, but the company says full rollout is coming soon. The app lets you browse and access your designs and track changes live on your iPhone while editing the design on your computer.

At the time, it's not possible to edit designs through the iPhone app, which means there's no way to export code through it.

Figma also offers the Figma Mirror app on the App Store. This app allows you to mirror your designs on any iOS device without being connected to the same network. This way, you can check how your design looks on a particular device (in this case, the iPhone) and track changes. While useful, the app does not allow you to export code to your iPhone. For this, you will need to bring your computer.

You can also access your designs through your browser. However, you will still only be able to view your design and track changes live.

Can I export code in Figma on an iPad?

Unfortunately, it's not possible to export code in Figma if you're using an iPad. Figma is working on the mobile app, and there is a beta version, but it was not available for tablets, only iPhones and Androids.

The Figma Mirror app is available on iPad. The app lets you track changes you make to your design on the computer and check how they look on the iPad screen. Unfortunately, the option to export the code in the app is not available.

If you don't want to install the app, you can access Figma through your browser and follow the design changes. But, exporting code in Figma is only possible on a computer.

Can I export code in Figma on an Android

Figma is currently working on the Android app and offering a beta version for 10 Android phones. You can become a tester by downloading the app from the play store and accessing this link. You can browse, view and share your designs and track changes in the app even when you're away from your computer.

Although the application is useful for many purposes, it does not allow you to export code at the moment.

The Figma Mirror app is also available for Android. Its main purpose is to track the changes you make to your designs on your computer and ensure that they look good on all Android devices. The option to export code is not available.

You can also use Figma in your browser if you don't want to install the app. However, you still won't be able to export the code. For this, you will need to use your computer.

Additional FAQs

How to export colors from Figma to Xcode?

Unfortunately, it is not possible to export colors from Figma to Xcode because Figma does not support it. But, there is a workaround you can use called Figma Export. Follow the steps below to use it:

1. If you haven't already, install Figma Exporter.

2. Open “Terminal.app”.

3. Open the folder containing the "figma-export" file.

4. Launch “figma-export”.

5. Export the colors using "./figma-export colors -i figma-export.yaml".

How to export HTML code from Figma?

As mentioned earlier, the built-in tool called Figma Inspect lets you get CSS, but not HTML. If you need the HTML code, you will need to install a plugin.

Figma offers dozens of plugins that serve this purpose. Our recommendation is Figma in HTML. Here's how to use it:

1. Open the main menu. It's the icon in the top left.

2. Tap "Plugins".

3. Select "Browse plugins in the community".

4. Type "Figma to HTML" in the search bar and make sure "Plugins" is selected at the top.

5. Select "Install".

6. Go back to your design and select the elements you want to convert to HTML.

7. Go to the main menu, select "Plugins" and open "Figma to HTML".

8. Press HTML.

9. Choose between "Copy" or "Download".

Get the code you need

Figma allows you to export different types of codes using several methods. You can use built-in tools or download different plugins, depending on your needs. At the moment, exporting codes is only possible via computers. Figma has released the beta version of the mobile app (limited to 10 iPhone or Android devices), but it does not offer this option. Fortunately, exporting code to computers is quick and easy.

How to export code in Figma? Are you using any of the methods we mentioned in this article? Tell us in the comments section below.