In this video, I will show you how I turn an Adobe Xd prototype into a fully functional responsive site in Webflow with some cool parallax effects and animations.
BECOME OUR MEMBER:
https://www.youtube.com/channel/UCT_of6HCtVZFpnnnLUeAGYA/join
LEARN FROM US:
Build Rock Solid Foundations with our New 12 Weeks long Graphic Design Starter Bootcamp:
https://yesimadesigner.com/courses/starter-bootcamp/
READ OUR BLOG
https://yesimadesigner.com/blog/?utm_source=youtube.com&utm_medium=referral&utm_campaign=adobe_xd&utm_content=webflow
FOLLOW US
https://www.instagram.com/yes_im_a_designer/
PODCAST
https://yesimadesigner.com/podcast/?utm_source=youtube.com&utm_medium=referral&utm_campaign=adobe_xd&utm_content=webflow
Apple – https://podcasts.apple.com/gb/podcast/yes-im-a-designer-podcast/id1462185547
Spotify – https://open.spotify.com/show/2vdeYhJimT7CXTVc09zfoA
ADOBE CREATIVE CLOUD
If you don’t have an Adobe Xd-, or a Creative Cloud subscription yet, you can subscribe to it here:
https://clk.tradedoubler.com/click?p(265883)a(2929456)g(22913796)url(https://www.adobe.com/creativecloud/plans.html
(*We are partners to Adobe. If you purchase through this link you also support our channel.)
0:00 – Intro
0:58 – Informations/ inspirations
2:37 – Working in Webflow
3:09 – Adobe XD visuals for the website
6:34 – Creating the layout in Webflow
11:23 – Adding a slider with images
14:50 – Previewing the site
16:15 – Adding animations
20:15 – Features and Parallax Animation
28:15 – Out of Bound Effect
TRY WEBFLOW:
https://wfl.io/yesimadesigner
MILANOTE BOARD:
https://app.milanote.com/1IEhDa1dj65Y35
source
Figma Figma Figma Figma Figma Figma
Amazing Video!. I do have one question tho. What about when you click a link to access multiple pages? how do you make other webpages for your website?
This may be a stupid question, but: There is no way to just "convert" from Figma or XD to webflow? Seems like i would have to redo most the whole design in webflow
Fun fact, Im only learning tNice tutorials because tNice tutorials is 99.9% of my ti in my free ti
A horrible tutorial, you are creating the desing again, this have no sense
man. Thank you!
That's so cool!
the top, when I installed soft soft (restart didn't help). I have a creative softblaster z softcard. I'm assuming it has sotNice tutorialng to do
I am just wondering why you are being so generous with your knowledge?
I JUST WANT TO KNOW HOW TO IMPORT MY OWN content!!!!!!!!!!!!!
Can you tell how to change softal instrunt in Serum, please ?!
How is your learning progression? I'm tNice tutorialnking about getting the Signature version soon, people like you are really persuading to give
Did you try putting it in rice?
he softs good and attracted more
I tNice tutorialnk you speak for a good portion of us.
Sa here!
TNice tutorials is literally the hardest tNice tutorialng my brain can't comprehend. AnytNice tutorialng else I do takes a few minutes and tNice tutorials is just.. it's just so confusing
the whole tNice tutorialng but then you have a solid foundation.
674 likes…amateurs
Keeps you creating 😉
TITLE IS CLICKBAIT.. this is not adobe to webflow. he is REDOING the site in webflow. Otherwise very informative tutorial and well done. Just missleading
On my channel, you can download this program for free as licensed pre-activated.
yes please create something in after effect for webflow
Can someone please explain to me why we need adobe xd or figma instead of just creating this layout on adobe illustrator or in affinity designer? Whats the purpose of XD? To just create your webpage layout and idea, right? Then you essentially still have to manually upload your images etc to the webflow. Am I missing something here? What makes XD so special? Lol
Hi thanks for the great tutorial..i have some questions.
How do you export your adobe xd layout, is it done by batch exported each individual item?
How do you export for all sizes?
That is a great idea of making a video regarding the connection between after effects and webflow.
I’m 16:20 minutes in and I’m loving the way you plain out the key words and necessary things out, thank you so much ❤️❤️😭😭😭❤️❤️❤️❤️ straight and exactly what you want
great job
Hi am I confused after creating a website with adobe xd how do I transfer that to a domain and make the website live? Is there plug in or somewhere I upload the file to shopify/word press to? Thanks so much!
Thanks man. Exactly what I needed.
Thumbs Up !!!
Thank you, I want to see the video on convert AE animation to lotties or json file.
Adobe XD design import to Webflow.. ?? NO, instead you tease some other designers webflow website and then make a piss poor dated design in webflow.
This is a demo of Webflow and has nothing to do with XD.
en realidad este webflow es netamente para quien no tiene idea de codigo CSS y puede hacer toda la web cambiando los valores que les dan a la derecha
Done dislike. Clickbait
Great content and awesome explaination
This title is a bit misleading. Though this would be a simple as exporting XD into code for a hosting site.
The after effects tutorial. Eagerly waiting
When I step on the double play speed.. −P e r f e c t .
Clickbait title. There’s no Adobe to Webflow export/import.
thanks for the tutorial! why use column instead of grid?
what are the advantages of using Webflow over Muse?
I like this video. Very detailed with shorcut key. I hope you can do many more videos like this.
is it possible to make each one of the images that float in under the slider ,into dynamic pop up windows? I'm trying to create a graphic design portfolio like this. Thank you!!
oh yes, don't forget your client will pay 12us monthly for hosting…
Did you ever do a video showing how to use After Effects creations in Webflow, including file type and importing?