How to embed a clickable prototype into a web page

Подписаться 109

Просмотров 14 тыс.

50% 1

GET THE FREE CODE HERE -
artfuly.ck.page/28ab4180c9
See example prototype embeds here using Figma and Webflow -
Mobile - www.artfuly.com/project/times...
Desktop - www.artfuly.com/project/terra...
I used Figma and Wix in the video, but the process is pretty similar if you're using Adobe XD files or any other website builder
Here's the code download link -
artfuly.ck.page/28ab4180c9
Please subscribe and like the video!
____________
Evolve your UX & Product Design skills
Learn the visual design principles you need to make your work stand out FAST with my course - artfuly.click/course - 7 day free trial, 1 chapter delivered per month
Have 1 design principle emailed to you each week:
artfuly.click/sign-up
On the 3rd Wednesday of every month I host a free event: How to become a digital designer in 2024 - join here - artfuly.click/be
Don't forget to SUBSCRIBE & LIKE so I can keep making these videos!
Find more design insights & resources at artfuly.com

Опубликовано:

4 сен 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@artfulydesign Год назад

Receive design principles for UX & Product Designers by email - 1 per week Each email is a tutorial explaining principles to boost your designs with a video too: artfuly.click/sign-up

@stacy_isa 17 дней назад

Thanks for showing where to get the embedded code. I watched 3 videos before yours, and none mentioned this important info.

@artfulydesign 16 дней назад

Appreciated Stacy!!

@amyyilmaz 2 месяца назад

This is the only thing that works the all other videos makes gif or silly things you did great!

@artfulydesign 2 месяца назад

Thanks, I hope you liked and subscribed!

@brittanywarner6915 Год назад

Very helpful thank you!

@HideBuz 3 месяца назад

Thanks, I was lookig everywhere for this.❤

@artfulydesign Год назад

Regarding the question from @lullabykay "Hi there! I was wondering how you changed the background color of your prototype window to white :O I've been trying to find a way to do it but was not able to :( " - Go to top right prototype > prototype settings > background colour. It seems to be set by default to black, change that to white. Maybe that is the problem for you.

@pan6285 6 месяцев назад

thank you!

@Fijimamabettawerk Год назад

Thanks so much!!

@artfulydesign 11 месяцев назад

Please support my channel by liking and subscribing! I spend ages making videos to help people and can only receive payment if you support me - thx in advance!

@WeirdFlame 2 месяца назад

Thank you!! this also works for Webflow too.

@artfulydesign 2 месяца назад

Yes it works anywhere you can do a code embed. I have it in webflow on this page for example - www.artfuly.com/project/terra-website and this time using a desktop screen size with a white background

@user-vr5os6gn9z Год назад

Thank you!

@artfulydesign 11 месяцев назад

Please support my channel by liking and subscribing! I spend ages making videos to help people and can only receive payment if you support me - thx in advance!

@alessandromor7712 8 месяцев назад

Hi! This video was super helpful! Thank you! Do you know what measurements are the best for the mobile version of the portfolio?

@artfulydesign 8 месяцев назад

Hi Thanks. How do you mean mobile version of the folio? do you mean embedding the prototype into a webpage so that it views nicely on a mobile device? This might be something you set in your portfolio builder and the div will size the embed to match. without knowing what you're building your folio in it's hard to know. I would go about this by testing varous sizes large and small until you find the sweet spot in the middle. It's worth noting that most folios tend to be viewed on desktop and I don't personally optimise mine for mobile and I'm using Wix

@alessandromor7712 8 месяцев назад

Thank you for your quick answer! ur so real! Yea, I'm also using Wix and for some reason every time I resize the embedded prototype on the mobile version of my portfolio it doesn't let me resize it/i'ss super big and can't actually see it. I tried many different measures but I was hoping you knew what size works, if there is any@@artfulydesign

@LJVC91 9 дней назад

It's not pasting from the clipboard, it automatically pastes the last text I was working on into the page I want the embedded code to be in.

@artfulydesign 8 дней назад

This is probably a copy past issue with your computer

@rutujawarange7688 11 месяцев назад

Hi, this video was so helpful! How did you remove the Bar we get below stating - edited months ago.

@artfulydesign 11 месяцев назад

Hi, Are you on the free figma or paid figma? There's 4 things you can try 1.adjust the depth of the window vertically to hide the text 2. Adjust settings at Prototype > prototype settings 3. After pressing the 'play icon' top right, go into 'option's and untick 'show figma UI' and then share the code and embed it into your webpage 4. Get paid figma version. Please let me know what worked!

@paavamkutty 2 месяца назад

@@artfulydesign Hey, I am facing the same problem. I am using the free version and adjusting the window size does work but you get scroll bar on the right and bottom which is visible along with the prototype. Unticking 'show figma UI' does not work because then you do not get the option of 'share prototype' on the top so you can not copy the code.

@artfulydesign 2 месяца назад

Hi@@paavamkutty you can manually edit the code after copying it as long as you know what to edit and I do talk about that in the video. Regarding the scroll bars, if scroll bars are showing then it means that the space you're giving the prototype inside your website platform is too small to hold it. I don't know what platform you're using (wix, webflow or whatever) but look into making more space for your embed (it's not likely a figma issue but instead the space you're giving it in your website platform). pls update me here, and also see a larger embed with no scroll bars here (paid version of figma) - www.artfuly.com/project/terra-website

@kartkartkart Год назад

Hi thanks for your tutorial, appreciate the help! Do you know if it is possible to remove the Figma & project links at the top and at the bottom in the embed?

@artfulydesign Год назад

Hi, yes definitely on the figma paid version, as you can see it's been done on the embed at the bottom of my example page - iamadigitaldesigner.wixsite.com/pageportfolio/timesheet-app

@torreyasimon4829 29 дней назад

@@artfulydesign I pay for Figma and it did not remove this automatically. Is there a setting I don't know about that needs to be toggled or am I just not on the right plan?

@artfulydesign 28 дней назад

@@torreyasimon4829 Are you talking about the Text 'figma' and the line above the prototype, and the ' < > restart 'at the bottom? These only show up when user clicks on the background around the phone or laptop embed. If you're talking about something else pls let me know. By the way, the place to set the options is after you hit the play button in figma to view the prototype, then you have 'options' in the top right hand corner. If that doesn't solve it, send me an email with a screenshot to artfulydesign@gmail.com. Also, you can see the code I used by downloading the code embed in the comments at the top of my video description.

@torreyasimon4829 28 дней назад

@@artfulydesign it ended up being that I just needed to update the code. Thanks so much!

@artfulydesign 28 дней назад

@@torreyasimon4829 OK, so you forgot to re-copy the code into your other platform after making changes in the options.... yeah you need to keep copying the new code over... pls let me know!

@shayleeshepherd3286 Месяц назад

Is there a way to make the prototype resize with the window screen when it's embed into a site? Or is the option only to have a fixed height & width?

@artfulydesign Месяц назад

Not really, it will be based on the settings in figma as far as I know - You initially choose a frame in figma such as 'iphone 13 pro' which sets the canvas size under the design. Then in the prototype tab you also choose which size the prototype will display on - obviously that needs to match up. Then after clicking the 'play' top right you'll see the prototype view and under 'options' in top right you can view at 100% or 'fit to screen' or 'fill screen'. The best way to find out is to do a test and to resize that window. But for sure when you embed the code with this method, you do set a window size in the code. See the code download in the description.

@artfulydesign 2 месяца назад

For any of you with questions about the code or getting rid of scroll bars, get the code download here - artfuly.ck.page/28ab4180c9

@eslialessa4059 11 месяцев назад

Hi I use wordpress and it worked, thanks! Just a quick question in your prototype you don't have the actual Iphone mobile frame. In wix the prototype is in the Iphone, how did you do that?

@artfulydesign 11 месяцев назад

Hi, Thanks for your feedback! It's quite easy to add the phone frame. In figma, top right, click 'Prototype' then 'prototype settings' and then 'Device' and choose a phone device. Note that the width of your figma frame needs to match the width of the device you choose e.g. An iphone 14 is 390 pixels wide so your frames need to be the same width throughout your design. Please like and subscribe to my channel! Best wishes, Rachael

@eslialessa4059 11 месяцев назад

@@artfulydesign Ah thanks for your explantation, I appreciate it. Only I use Adobe Xd 😅 Do you know by accident know how to do it on Adobe XD?

@artfulydesign 11 месяцев назад

@@eslialessa4059 Hi, no I don't and it would take me a while to check. I do recommend using figma though for many reasons, not just because it's free (up to 3 projects) and is generally better than XD, and is used in more companies, so figma is better to be more skilled in. Students get full figma for free here - www.figma.com/education/

@Elias-hj7yv 10 месяцев назад

Thank you sooo much but how i can hide the figma loading ?

@allroundsuccess.3064 10 месяцев назад

I desperately need an answer to this. I’m searching everywhere.

@artfulydesign 10 месяцев назад

Hi Elias, This is an embedd in a page, so it will show 'figma loading' unless the viewer has fast internet. A way around this might be to cover the figma embed with an image until it is loaded, but that would require advanced coding skills which I can't advise on. A better way might be to insert a video of the interactions instead using a tool such as 'Jitter' to record the interaction and you'd end up with seamless moving graphics as you can see when you scroll down this page - www.behance.net/gallery/148492303/Rapchat?tracking_source=curated_galleries_ui-ux or this example - www.behance.net/gallery/174469303/Olive-Health-App (see 'Final Prototype' section at bottom of page) Please let me know if that helps!

@bedazzled1980 Год назад

Hi Thank you for the video. I am not able to get rid of the scrollbar when I paste the code into wix. I tried different options on the prototype options and still cant get the scroll bar to disappear. Any pointers? Thanks!

@artfulydesign Год назад

It might be the window settings you have. Can you send a video or screenshots of your settings in figma and in wix to artfulydesign@gmail.com and I'll see if I can find out what's going wrong

@grahamgoldscheitter1898 Год назад

@@artfulydesign Hello, thanks for the video! I am having this same issue, wondering if you guys reached a resolution. Please let me know!

@artfulydesign Год назад

@@grahamgoldscheitter1898 Hi, it's most likely that it's a feature only available on the paid Figma plan. If you're a student you can get that free at www.figma.com/education/ - otherwise I suggest paying for Figma because it's great for UI, apps, websites but you can also create create presentations, PDFs, resumes etc as it's a good substitute for adobe illustrator and indesign for simple items. Otherwise, match the colour of your section background to the figma prototype background to 'hack' it.

@grahamgoldscheitter1898 Год назад

@@artfulydesign Thanks for the response, I have the paid version of Figma. The BG isn't the issue for me it's a horizontal and vertical scroll bar around the prototype. I managed to size it so that they disappeared. Thanks for replying! I was also curious if you found any solution to getting the prototypes to display properly when viewing the site through mobile? Trying to troubleshoot that right now.

@artfulydesign Год назад

@@grahamgoldscheitter1898 Hi Graham, good to know that the BG colour isn't an issue for you and that you have the paid version. Yes the scroll bars disappear when you size it as I have in the video. the problem with trying to size it for mobile is that you only have 1 set of code and embed settings, so it may not be possible. I find that most pro's view your folio on desktop and I don't try to make it viewable on desktop. My solution would be to set the prototype to invisible on desktop and show a message to say 'View on desktop to see clickable wireframe prototype' or similar. Have you checked your google analytics to see how many mobile views you get?

@amyyilmaz 2 месяца назад

I just wonder can we put the clickable prototype in google slide?

@artfulydesign 2 месяца назад

Not as far as I know. Only where you can embed code like a webpage.

@prajaktadigamber7201 Год назад

Doesn't work for me, even with a paid plan IDKY it just shows the figma loader and that's it.

@artfulydesign Год назад

Do you have a really slow internet connection and/or is your file really large with a lot of unnecessary pages or screens or components? If so, then duplicate your file and cut out everything which you don't need in the clickable embed and embed that one instead

@artfulydesign Год назад

Please let me know how that goes!

@alexabourne444 Год назад

This did not work for me. Once I edited the size in Wix, it showed the whole figma screen including the black background, just shrunk.

@artfulydesign Год назад

Hi Alex, you should send me a link to your website and email a video of what you're doing to artfulydesign@gmail.com and I'll see what I can do to fix it. Are you on free Figma or paid plan - that might be 1 reason for this

@leannemarchevsky3831 Год назад

@@artfulydesign Hey, it happened to me also what can I do? I use the free figma, its only available to paid figma?

@artfulydesign Год назад

@@leannemarchevsky3831 Hi, I do have the paid figma, so that is probably why. I'm sorry that I can't see what is on the free plan. Do make sure that you look through all the options in the 'Prototype' area though. if it's definitely not in settings then consider having a black section on your design for the prototype embed to make it blend in better. There are also limits with prototypes in figma, so you might have to go to a paid plan eventually if you want to go over the limit anyway

@sammyoh6522 6 месяцев назад

I'm not sure if you still need help and in case someone else needs help, try changing the width and height of the screen according to the size of the phone screen (i.e., width="400" height="850")

@tharyhout9707 5 месяцев назад

why does everyone keep showing just the embed link parts? and not the mocking it into the phone?

@artfulydesign 5 месяцев назад

What do you mean? This video is about showing your experience design in your portfolio or any webpage. Do you mean that you want to show the design on a mobile phone? That's a totally different subject. You use figma mirror if you want to view a prototype on a phone.