When converting Figma design to HTML and CSS, do you copy the Figma's dimension pixel for pixel in CSS...
Anytime I copy the dimension pixel for pixel, it's either too small or too big but not far from what it's meant to look like.
Any tips on how to go about this? Thanks
Pixel dimensions in Figma and pixel dimensions in CSS should be the same.
Probably when designing, you're viewing the design only in Figma editor. Due to zoom in/out of the design file, you're not seeing how it will look in an actual device.
For example, you put font-size: 36px for a and your design is zoomed out 50%. You will notice 36px is looking very small in the design. But when you add that into CSS and run it in the browser it looks good.
I would suggest always preview your design on a real device. Run the prototype in a browser for the desktop apps. And for previewing mobile apps use Figma mobile. I believe you'll figure out your issue.
Related
I have a website designed using Figma. Now I would like to develop a website in Wordpress using Elementor plugin based on the Figma design. Designing using Elementor is ok.
However, the design is based on 1920 width wide screen and I am developing the website on smaller desktop (say 1440 wide).
Now, everything looks big (icons, padding, width, height, etc...) on the screen I developed because I am following the px scale according to Figma design.
Is there a way that I can convert to equivalent of scale in Figma. I would like to ask for help from experience developers who knows this issue.
Thanks
While your Figma frame can be 1920px in width, it's recommended your actual content is set at 1366px. The rest can be left as white space.
That's it, there's no pixel ratio you have to worry about. Yes Figma will not be 100% as HTML/CSS, but the width/height px values are the same.
So start tightening everything to fit in 1366px in width and you're set.
Checked different sites but no clear answer. Every time I get a new design in photoshop I try to match the pixel sizes into my css code. The browser then renders the size completely different than what I see in the photoshop file. I always get all the files with a 72pp resolution.
Is there a trick to match the pixel size of the photoshop to be the same as the CSS pixel size once rendered?
As a visual example...
Same typography, google font typography in this case.
Both have the value of 18px
Photoshop:
CSS render:
I don't know, mate. I translate perfectly all my psd into css with no problem.
Work ALWAYS with 72dpi images and be sure at preferences > Units & Rules > Units to mark both "rulers" and "type" as pixels
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
On mobile, most of my client's website looks like the regular desktop page. It hasn't been made responsive, but it's being worked on. Since the body width is fixed at 1000px, it's all tiny text and stuff in your mobile browser. So that will be a double tap party to actually read the content.
So what is my question? I'm building a little notification bar for mobile. It's a little yellow bar that slides in from the bottom of a webpage, telling the user that the page they're viewing isn't optimized for mobile yet. Apart from the fact whether you'd actually want this, I'm trying to figure out how to make the fonts inside of the bar to have a consistent physical size on all devices. Problem is that all devices these days have a wide range of DPI. Another question I found on StackOverflow deals with this, but only treats the desktop case. Mobile is a whole different ballgame.
I've been meddling with mm in CSS, but the inconsistency in textrendering between browsers is beyond massive. I guess I could do it by calculating font-size in px based on pixel density. Or by writing a bunch of media queries for all DPI variations. But that all seems stupid. Am I overlooking something here? Is there an easier way to do this?
Use "em" as unit instead of mm or px. It adapts automatically to the font that the reader uses.
Example:
p {
font-size:1em;
}
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.