# Importing Interactive Shapes from Figma

**URL:** <https://forum.builder.io/t/importing-interactive-shapes-from-figma/7084>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react\
**Created:** [January 4, 2025, 1:14am UTC](https://forum.builder.io/t/importing-interactive-shapes-from-figma/7084 "2025-01-04T01:14:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wbwood](https://avatars.discourse-cdn.com/v4/letter/w/df705f/32.png) [@wbwood](https://forum.builder.io/u/wbwood)\
**Post date:** [January 4, 2025, 1:14am UTC](https://forum.builder.io/t/importing-interactive-shapes-from-figma/7084/1 "2025-01-04T01:14:03Z")

</div>

Hi! I’m trying to import a series of shapes in a grid format that I’ve created in Figma, but it’s importing as an image rather than a group of interactive objects. Is there something that I have to do in Figma to distinguish them before sending them through the plugin?

Think like a honeycomb, but each of the hexagons is clickable. Right now, it’s treating the whole thing like an image.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 6, 2025, 12:16pm UTC](https://forum.builder.io/t/importing-interactive-shapes-from-figma/7084/2 "2025-01-06T12:16:26Z")

</div>

Hello @wbwood,

Welcome to the [builder.io](http://builder.io) forum post.

To import shapes from Figma as interactive objects rather than as a single image, you need to ensure that they are properly set up in Figma before using the [Builder.io](http://Builder.io) plugin. Here are some steps you can follow to achieve this:

1. **Ensure Each Shape is a Separate Layer:** Make sure each hexagon or shape is on its own separate layer in Figma. [Builder.io](http://Builder.io) will treat each layer as an individual component.

2. **Naming Conventions and Groups:** Use clear naming conventions for each layer or group of shapes if they belong together. Avoid flattening or merging them into a single image or vector.

3. **Utilize Figma Components:** If a shape has consistent design or behaviour, consider using components to manage them in Figma. This helps in keeping your design consistent and makes interactive elements easier to manage.

4. **Check Export Settings:** Ensure that your export settings do not concatenate multiple shapes into one image. Avoid selecting “export as image” for the group of shapes.

5. **Interaction and Prototyping Settings:** Make sure to define any interactivity or linking intended directly in Figma. This can often get translated into Builder as interactive components or actions.

6. **Use the [Builder.io](http://Builder.io) Figma Plugin Properly:** When you import these elements into Builder, make sure to use their plugin correctly, which allows you to import components rather than images.

Review [this Figma import guide](https://www.builder.io/c/docs/import-from-figma) to make sure you’re following best practices for importing your designs into [Builder.io](http://Builder.io), taking advantage of the full capability of the plugin to differentiate between images and interactive objects.

> **[Best practices with Builder's Figma plugin - Builder.io](https://www.builder.io/c/docs/figma-best-practices)**
>
> Learn techniques to enhance design imports with Builder's Figma Plugin. Group layers, define images, and more for seamless integration.

I hope this helps!

Thanks,