Streaming live at 10am (PST)

Translating Designs from Adobe Xd to Webflow


#1

One thing I’ve always struggled with is knowing how to size things like containers, buttons and all design elements when going from design to code. So for instance if I have a box/container in Adobe Xd that’s 250x250px should I make a div that’s exactly that size? I feel like I see it done differently everywhere and I just never know what the right way to do it is.When should I use Pixels versus Percentages to size things? Why are buttons usually just padding and not made an exact pixel size? If anyone can clarify this for me that would be awesome. Thanks!


#2

Very, very good question. It’s important to master those topics.

In short: for your design to be solid, adaptative, easy to make responsive, you need to use as less as possible fixed (px, pt) values, and as much % values you can, and scalable elments (like the padded button).

So, work on your outer layout first, define if you want too use the grid, with the convenient Container element. Once using a container, everything inside can be set in %. Or the container can use flexbox to organize its content. This way when you switch to another device, everything is already pretty much behaving as expected.

A padded button vs. a fixd dimentions button… A fix dimension button doesn’t make any sense, because if you change the text of the button, you need to change its dimensions too. With setting a padding, any text will render a nice looking button.

If you want to share a screenshot of your Xd design, we can outline how we would interpret it in Webflow: what should be defined, what should be floating etc.

Keep in mind that HTML/CSS define a FLOW OF ELEMENTS. So decisions about the units used, strategy for stacking element, is crucial.


#3

Thanks for your reply. I totally get the reason for using percentages so that a layout can be responsive. I’m still having trouble though how you translate a design you create using pixels and translating it to percentages? I came up with a quick layout as an example and labeled some of the elements with the size in pixels. If you can give me more insight in to this I would really appreciate it.

Thanks,
Ben


#4

Not everything has to be in percentages.

Let’s start by your general structure. Here in orange you have SECTIONS, they naturally expand all the width.
In blue, you have webflow containers, they’re centered and 960px

Then you’ll see that inside of containers, it’s quite easy: place your elements, decide the size they should take. T_Your cards elements, or images, will get the size you designed them with. But their parents div will likely get 100% width so that they expand on all the container.


#5

Ok, I think it’s starting make more sense now. So it’s really more the layout and containers that you give percentages to and then things like cards/images can be pixels. What about buttons because I know the size of those are usually determined by padding?

Thanks again!


#6

Yes, buttons usually are sized by padding, but not always. You can define the button’s sizing in manny different ways.

Although Webflow’s UI can be easy to pick up, I highly recommend you to watch some CSS crash course, it’ll help you a lot! There is no need to watch something long or fancy, just pick some youtube videos or a cheap course on Linkedin Learning, Pluralsight, Udemy or something like that. You will not regret!


#7

Totally. Default ones are 1 line with padding, but you can have very nice 2 lines of text buttons too. For your card, you can let the padding drive the size and be sure to check for all devices, and to set the line height properly in case a button switches to two lines.