Hi! I’m a UX/UI Design student and I’m trying to create my portfolio website in Figma Sites. I already have my case study files created in Figma Design. I would think that this would be quick and easy to copy & paste my frames from Design to Sites...I was wrong. While I am able to copy the frame into the primary frame (desktop) in Figma Sites, I have to adjust every single layer to fit in the responsive frames for tablet & mobile.
Is this just the way it works? Or am I doing this the hard way? It feels like I’m having to recreate each frame. I have watched a handful of Youtube videos on how to use Figma Sites, but it only shows it starting from scratch. Not importing an already existing Figma file. So I have a few questions, I have not been able to find the answers to.
1. When copying & pasting a frame from Figma Design into Figma Sites, It is not the same size as the desktop/parent frame in Figma Sites. When adjusting the width, I have to adjust all of the other layers to fit (on each version (tablet, mobile, etc...)), which is very time consuming. I am wondering if there is an easier way to import or copy/paste a Figma Design file into Figma Sites?
2. Does the first page of the Figma Design file need to fit into the main frame of the primary frame in Figma Sites, in order to not page break in the wrong place? And in order to see/fix content, I make the main frame longer. Do I need to return it back to original size and clip content, choose scroll for it to work? Similar to how Figma Design works?
3. I've tried saving Figma Design frame as a jpg to see if importing the file as an image would make it easier to copy/paste into Figma Sites without having to adjust all of the layers, but it cuts off the edges of the file when resizing it to fit in Figma Sites. I have not tried a png file yet to see if they react the same way.
It may be that the correct way to work in Figma Sites is tedious and all the layers have to be adjusted. Figma Make may help speed up the process. I uploaded the Figma Design file to Make and asked it to use the uploaded Figma Design file and create a website page that is responsive in tablet and mobile views as well. I don’t think I gave it the correct instructions because it designed a very basic website page from the file I uploaded without the images or formatting of my original design. Which is not what I wanted it to do. I just want to cut & paste my files into Figma Sites and have them fit in desktop, tablet, and mobile frames.
Does anyone have any tips & tricks to moving Figma Design files to Figma Sites faster & easier?
Thank you so much.