Copying the design of any page directly to bubble

Hey, just wanted to share a tip to basically copy any design from a webpage and kind of use it as a template:

  • download chrome extension : HTML TO FIGMA

  • on the page you wanna copy: open the extension and copy the site. It will dowload a .json document.

  • Install/Open Figma

  • in Figma menu, open PLUGIN / html to figma and choose UPLOAD (to upload the downloaded .json)

  • position the new imported frame and rename it

  • Then in bubble: dans bubble: on a blank page, go to settings, general, API Figma and enter the API KEY and ID of the project (cf https://manual.bubble.io/help-guides/building-a-user-interface/importing-from-figma

  • To the best of my knowledge, it really works well to basically transform any site you like in terms of design, in a template (with no workflow whatsoever, even if connections were made on figma btw).

Hope it helps

5 Likes

I have to try this! Thanks for sharing :raised_hands:t3:

Can anyone confirm if this process/workflow still works?