figma to website is looking worst !! how can we develop it proper design.
so i made design in figma. on the frame of slide 16:9. W 1920 x H 1080 so when frontend guy developed the design it looked not the same. what can he do to develop it properly like the same.
we both have different laptop i have macbook pro m2 pro and he has realme laptop resolution of his laptop is 1920x1080 but in chrome inspect tool it showed he has 692 height and 1536 something of width. technologies i think it is tailwind that's all i know.
what i exactly want is the website to look like my design like 100% if not 100 then at least 99 😭
thank you for the help i appreciate it.
43 Replies
"Properly" is subjective. Do note that they're designing a website, not a picture or a magazine advert. Things will look different, and that's ok. It's close enough.
The web is fluid, and some liberties need to be taken because not everyone will be looking at it with a viewport of 1920x1080. That means things need to be shift-able. Things need to be movable and still look good.
i understand but how can we make it look same as design on every screen size till 1300px at least above that we'll just stop it from growing or spreading
You can’t. That’s insanity. His can it look the same on a 1300px screen width and a 760px width screen. Things need to change, grow, ands spread.
isn't that called responsive ?
if not then how are this other developers making insanely perfect websites not just them what bout the apple ? and other companies ?
also, 1920x1080 is almost never 1920x1080
more often than not, you have 17px eaten on the right side, for the scrollbar
and it can be MORE
not to mention the browser's chrome for tabs and address bar and os' stuff like bars and widgets and stuff
oh, and if i have a 15.6" 1080p display, i have the os scaling set to 125%, which also changes how the page is seen
not to mention that each browser renders things differently
and in each os as well
obviously, the frontend guy can try to set the same margins and padding and spend a week on those details
but even then, it wont look the same
pixel-perfect only exists if you render everything in a jpeg, and even then ...
ok i got the picture
then how can you explain this ?
also guide me in right direction please
what can i do to make it perfect like very close. to what i have designed.
look at the figma, copy the values, verify, suffer a bit, and then you are done
and even then, it will be wrong
figma has some differences in font and line heights
The dev did a great job I can't even lie
Spacings all look consistent
Be lucky you have a good dev
But yea like everyone mentioned above the main content with the bar just comes down to screen sizes
it's not perfect, but it is pretty good
the colors are different, there are elements missing and stuff like that, but it is pretty good
elements ? which elements ?
I think the colors might just be because of how it looks on the web, I've always noticed a slight difference on colors between figma and my browser but maybe that's just me
nah, it should be much closer
the buttons at the top, on the left
manual and auto buttons are removed cause we'll implement that in next update so and the ROLL's Right has green box that's only shows up when it's hovered and that where dice landed pill has to be there when the bet is placed i will have to talk to him bout it's time
ahh yes the biggest container was locked in figma and he didn't had edit access so he wasn't able to get the color for it so he used the description box color. i unlocked it now and he will edit it tomorrow.
okay, that is a lame excuse
me too i also notice that but only sometimes
there are many many ways to get the color
well i really forgot
ahh yes
even a screenshot into paint can get the colors
it's his first internship
maybe his not that bright
then he needs to think outside the box
i need to ask you one question @ἔρως
alright
if we go with the values then definately we won't get it same as figma
but we get close to it
then
make it visually very VERY VEYR close
should be very close, yes
so on which screen size he should be editing that ?
initially
that is the wrong question
mobile first ?
the right question is "how do i want this to look on this device?"
what
but there are so many devices
in slightly changed pixels as well
so how ?
yeah, that is why you just pick 2-3 screen sizes and design for those
you mean 4k 2k and FHD ?
something like this ?
if i'm wrong please elobrate.
more like phone, tablet and desktop
usually, people skip the tablet because it is too much work
for desktop, usually 1080p
but you have to define, at some point, the breakpoints you will use
or you can just fuck about and everything has it's own because different things need different behaviours at different sizes
umm
That's what I do lol
well for us tablet is same as desktop but little size
that is why people skip the tablet design
sometimes
mobile one is pain in the ass
to be honest
but many people have a phone
but i'ma make it beautiful as fuck
cause that's what i do
then go for it
i will definitely share the link with you guys of final product.
alright
This seems very on-point :p
https://youtu.be/FNxoKhpEegA
Kevin Powell
YouTube
Content-First Breakpoints
Picking a breakpoint for media queries can be a little tricky. Generic breakpoints sometimes don’t seem to do the job, and using specific device sizes is problematic because there are too many of them.
That’s why I like to go with more of a content-first approach, to a certain extent anyway. We don’t want to get too precise either, or we ...