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.
Hello @wbwood,
Welcome to the 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 plugin. Here are some steps you can follow to achieve this:
Ensure Each Shape is a Separate Layer: Make sure each hexagon or shape is on its own separate layer in Figma. Builder.io will treat each layer as an individual component.
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.
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.
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.
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.
Use the 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 to make sure you’re following best practices for importing your designs into Builder.io, taking advantage of the full capability of the plugin to differentiate between images and interactive objects.
I hope this helps!
Thanks,