▼
Streaming live at 10am (PST)

Adobe XD to Webflow

Design help General
#1

Hello! New XD-Webflow user here. Quick questions on using Adobe XD with Webflow. I’ve tried to research this before asking, so apologies if anyone already answered these questions. I haven’t really found a granular XD to Webflow workflow post anywhere.

I’m designing a client site in XD first, ensuring that almost any spec will be easily translated to Webflow so I don’t have to redesign again in Webflow.

Question one: I’ve read on the forum about the importance of setting up an XD file with containers, section, etc. that will translate to Webflow. I totally love that XD specs (type, colors, etc) are exportable and shareable, but does an exported XD art board simply come into Webflow as an image that can be used as guide to build on top of? Is that correct?

Question two: Since it looks like Webflow’s desktop width is 992px, does it make the most sense to build with these specs in XD? I know, kind of obvious question but wondering if I’m missing something.

Thanks in advance for any pointers!

#2

Hi @Scout! :slight_smile: Welcome to the community.

Did you see this blog post?

Hope this helps

2 Likes
#3

Thanks for the reply! Yes, I probably read that article no less than 15 times :slight_smile: Very helpful until the very last part about bringing it all into Webflow! Was looking for more specifics. Did he just export the specs from XD and then rebuild using individual, exported assets (obviously not including colors or type)? Beyond doing that, my only solution so far was an exported art board from XD that I used as a sort of temporary template or guide in Webflow.

It’s okay if there’s no solution beyond that. I just work much faster designing in XD first, at least for more complicated sites. Thought someone might have a more efficient workflow that I hadn’t figured out yet :thinking:

Thank you!

1 Like
#4

What do you need help with? I wrote the article to help you design on XD and export assets to Webflow. As far as knowing how to use Webflow. They have great tutorials on YouTube.

I am still here to help so let me know how I can.

#5

Thanks for reaching out @colourfulchris ! I really loved your article!

While I’m new to Webflow, I did watch and read just about everything I possibly could before asking a question on the forum. I think Webflow surpasses any platform in terms of well-produced, thoughtful tutorials and a genuine, helpful forum.

Perhaps this analogy will better communicate my question. Let’s say I did a sketch on paper and wanted to turn it into a vector illustration. I’d bring it into illustrator as a scanned layer “template” and proceed to draw it in vector form. Could this idea work from XD to Webflow? I’d still export all my XD assets and color, etc. specs from XD (like your article says), but I’d prevent having to go back to XD to double check margin, padding, etc. by having a “template” to guide me. Right now, the only way to create this “template” is an exported XD artboard that I import as an image in Webflow.

Maybe I’m over thinking this whole thing, but that was the essence of the question.

Thanks again!

#6

Welcome to Webflow!
Thanks for asking the question. I have not, yet, seen the tutorial pixel geek mentioned.
I look forward to following this thread.

#7

It wouldn’t work like that. You still need to create section, container, div, flex grid. Then apply those elements that you designed in XD into it.

#8

thank you for linking this.
can you tell us what the specifics of the guide overlay in webflow are? because in adobe xd i work with an overlay and want to transition now to webflow but i need to know what the sizes and margins of the webflow overlay are so that i can stick to may made layout…