I am new to Figma and I got a .jpg design file which I need to convert into HTML, but in order to do that, I need to know the space between each element. I went ahead and placed a space between the grid and it gave me w*h but when I use the same width in pixel on HTML element, it is ALOT.

Is it pixel or if not how can I convert it into pixel?

What other software I can use gap/spaces dimension between 2 elements?

figma shap dimensions

  • It would be helpful to see the HTML code being used. That would tell us what we need to know to tell why the space/gap is different. I haven't used Figma before but it seems to be the number for pixels since this is a web tool. – AndrewH Dec 1 '20 at 14:53
  • @AndrewH there is no html. It is just image of a web design. – localhost Dec 1 '20 at 17:56
  • If you're on Mac, I'd highly recommend PixelSnap. It is a "global" stand-alone app that can measure anything you see on the screen from any application (watch the video). It does also have specific Figma support in that when you zoom, it knows to take that into consideration (not that the lack of such feature was ever a big issue for me). — I'd also recommend a "global" color picker, like ColorSlurp (free), Sip, ColorSnapper – Joonas Dec 2 '20 at 8:13
  • Not sure what you are asking here. Are you asking if the measurement shown is in pixels? Have you checked your software preferences to see what units are being used? Are you viewing everything at 100%? Do you have system zoom/scaling settings which might be messing things up? There are too many possible problems here, and not enough information to pin it down. Also tech support is generally off-topic here. If you think there's a bug, better to contact the software developers for support. – Billy Kerr Dec 3 '20 at 11:47
  • @BillyKerr, I think he has perhaps a website layout in Figma and he wants to get bunch of measurements to use in the coding process... Or that's my interpretation of it. I guess he placed the jpeg layout in Figma in hopes to draw boxes to measure elements. – Joonas Dec 3 '20 at 12:42

All the width and height measurements in Figma are pixel-based only and you can't change it.

Coming to your question, you can ask the designer to share that .jpg image over Zeplin, or if the design is created in Figma, they can share the link to Figma file with you (with just the view access), and once you have the access, you can select each component and on the right-hand side you will get the Inspect panel which will give you the required information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.