Hi, I have the following case.
I have built react app where designers can create ag-grid tables, because creating them within Figma is a bit cumbersome. When they create a table I need a way to import that table to figma and that table should be editable in figma enviroment. Is that possible?
Something like html-to-deign and web ot figma functionality.
You can use HTML to Figma for this.
Hi @Aykut
Currently, Figma doesn’t have a native way to import interactive elements like ag-grid tables directly into its environment while maintaining full editability in a way that integrates with your React app. Figma is more focused on design and prototyping, and while you can import data as static elements (e.g., using SVGs or images), it doesn’t offer direct functionality for interactive grid tables that can be edited dynamically like they can be in a React app.
However, here are a few suggestions for software/tools that could help you achieve something similar:
- Figma Plugins: There are several Figma plugins that could assist in importing and generating data-driven components. For instance, plugins like Google Sheets Sync can help you import data from a sheet into Figma as static elements (e.g., tables or lists). This won’t provide the interactive functionality you’re looking for, but it could make table generation much easier within Figma.
- Design to Code Tools: Builder.io is a powerful design-to-code platform that allows you to build interactive UI components visually, and then export the design to actual, working code. It bridges the gap between design and development, and it could be a great fit for integrating tables like ag-grid with your React app.
In short, there isn’t a straightforward way to have fully editable, interactive ag-grid tables within Figma, but using plugins or external tools may help streamline the workflow between design and development. Let me know if you need more details on any of these options!
Best regards,