I’m not able to access the Figma file from any of the links in the Canvas documentation. Figma reports that the file can not be found.
I’ve also tried importing a couple of pages into a new Canvas templated project and both time, I waited for over 10 minutes for the page to be imported but the process never finished. However, when I refreshed the page, the pages that I was adding have indeed been added with what looks like to be all of the elements, etc.
Not sure if these are isolated issues or actual bugs. Thank you and all feedback will be much appreciated.
Hey @vadimvozmitsel! Thanks so much for flagging this! I’m so sorry about the issue - this should now be fixed! Here a link to the file and the updated documentation:
When recreating Figma designs in Bubble, it is usually best to build them manually right now (using the Canvas extension), instead of using Bubble’s Figma import option. This is only because Bubble’s Figma import option currently doesn’t recognize different element types and styles in Figma, so when importing elements into Bubble from Figma, Bubble will import most of the Figma elements as shapes and text elements without styles. Bubble has mentioned that they are looking to improve the integration option, but for now, it is usually more performant/accurate to build manually with Bubble.
I hope this is helpful but please don’t hesitate to let me know if you have any questions!
Hey @rbakri1! The full version of the Canvas Figma file is not publicly released yet but should be live very soon (between 1 and 2 weeks or sooner). Currently, the Styles file is the only public Figma file, but we will replace this with the full design system when it’s live.
Quick follow-up question on the figma file itself → will the UI kit you create look like final UI or be the empty templates (a la the building blocks that Canvas gives us within Bubble?).
Hey @rbakri1! The Figma file is similar to Canvas in that it is a modular design system, but the Figma file contains four types of things: Styles, Atomic Components, Blocks, and Page Templates. Here is an overview of each of them and a few screenshots in case it’s useful:
Styles: Color styles, text styles, image styles, and effect styles, which are used throughout the file’s components. This section allows you to control your app’s branding, so that you can make sweeping color and image changes in a few clicks, and the changes will update in all of the components in the file.
Atomic components: Elements that make up blocks and page templates (e.g., text elements, inputs, buttons, icons, etc.). Instances of Atomic components are added within larger components like Blocks and Page Templates, so that if you make updates to an Atomic Component, those updates are reflected within all Blocks and Page Templates as well.
Page Templates: These are 1:1 matches within the Canvas library (the file contains desktop and mobile versions of these). Each page template contains green placeholder groups to indicate where blocks can be dragged/dropped.
Oh and video was great btw - super helpful to see the workflow of detaching and hiding blocks as we build a page… Good practise for doing the same thing within Bubble/Canvas.
hello all!
Thanks so much for flagging this! I’m so sorry about the issue - this should now be fixed! Here a link to the file and the updated documentation:
The full version of the Canvas Figma file is not publicly released yet but should be live very soon (between 1 and 2 weeks or sooner). Currently, the Styles file is the only public Figma file, but we will replace this with the full design system when it’s live.
. Is the full file already accessible? Best!