从 Figma 到 HTML 和 CSS答案

【问题标题】：From Figma to HTML and CSS从 Figma 到 HTML 和 CSS
【发布时间】：2021-02-13 13:39:12
【问题描述】：

我正在用 figma 设计一个登陆页面，它看起来不错，但我的图像特别是我的标志有问题。所以 figma 为我的 logo 提供了一个特定的宽度和高度，当我在我的代码上写下这些规范时，logo 看起来更小了。所以这里有两个问题：

当我从 figma 导出我的 logo 时，我应该以 1x、2x 还是 3x 进行？（在常规网站上工作） 2.figma是用pix还是point？

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： html css image export figma

【解决方案1】：

Figma 使用像素。
1x 将渲染原始宽度和高度，例如 100 x 100
2x 将乘以原始大小 x2，您将得到 200 x 200
3x 将乘以您的原始尺寸 x2，您将得到 300 x 300

所以那些乘法值不应该是这种情况。

为了确定您的问题，我建议您检查文件信息并查看您在那里看到的宽度和高度值，如果它们与您的设计中的值匹配，那么渲染一切都很好，问题可能是代码。

【讨论】：

感谢您的帮助。你指的是figma文件信息吗？
不，我的意思是尝试在您的设备上导出/保存徽标并在属性中查看分辨率是否相同

【解决方案2】：

理想情况下，您希望使用 SVG，因此您可以使用矢量图形并导出为 SVG。这将无限缩放并且尺寸非常轻。

但是，如果您没有矢量图形，而是位图，那么您需要在使用透明度时导出为 PNG，或者在没有透明度时导出为 JPEG。此外，您还需要将所有位图图像（PNG、JPEG）导出为 1x、2x 和 3x。

在您的代码中不要使用<img width="300" srcset="...">，因为您让浏览器调整图像大小并且您基本上使用了比需要更大的图像。相反，您应该在导出图像时保留它们而不设置宽度/高度，即：<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x">。

需要 2x 和 3x 是因为如果操作系统的缩放比例超过 100%，例如我的笔记本电脑是 125%，人们会看到你的 2x 图像并且它们看起来很清晰。

顺便说一句，我建议试试 Desech Studio，因为它会为你导入 Figma，然后你可以导出到 React、Angular、Vue 或简单的 HTML/CSS

【讨论】：