Figma file link is down & pages get stuck on pasting

:wave:t3: hello all!

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! :slight_smile: 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:

Figma file: https://www.figma.com/file/jSSgrzlhYIonp2jbj7TUZV/Canvas-Styles-and-Example-Components?node-id=0%3A1

Instructions: For Designers - Canvas Manual

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! :slight_smile:

1 Like

Hi Faye!

Quick question (and apologies for simplicity - I’m new to Canvas and playing around).

Having opened up the Figma file I’m currently a touch confused.

I see the ‘example components’ but it’s obviously very light.

How do I access the full Canvas ‘UI Kit’ within a Figma file? Or is that not currently possible?

I would prefer to do design phase end to end before starting build you see.

Thanks!

Hey @rbakri1! :slight_smile: 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.

1 Like

Brilliant, thanks so much for the update Faye.

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?).

Does that question make sense?

Hey @rbakri1! :slight_smile: 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.

  • Blocks: These are 1:1 matches with the Blocks within the Canvas library (the file contains desktop and mobile versions of these)

  • 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.

Here is a video that shows how to create a Search Page in case it’s helpful to get an idea as well: https://www.loom.com/share/3702ee7e269e411aa95568fb3513bc59

1 Like

Hey @faye, checking back on your stated ETA two weeks ago :blush:. Is the full file already accessible? Best!

Hey @datproto! :slight_smile: It’s not currently public yet, but I’ll follow up with you via PM!

1 Like

Hey Faye,

Sorry for the late reply - I didn’t get/missed the email notification of your reply.

Thanks for being so thorough. Looks like it’ll be exactly what I need to get the design complete pre-build.

Is there any way of getting beta access and helping you debug?

Cheers!

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.

Hey @rbakri1! Awesome! So glad to hear it was helpful! :slight_smile:

Absolutely, we are ‘soft-launching’ the file right now, and it is available through this link: https://www.figma.com/community/file/1081549601052279283
(cc: @datproto)

Would love to hear any feedback you have, and please feel free to let me know if you have any questions at all!

1 Like