如何将 Figma 设计嵌入网站或应用338

Figma 是一款协作式网页设计工具，可让设计师轻松创建和共享原型、图标和网站。如果您希望将 Figma 设计嵌入到您的网站或应用程序中，可以使用两种方法：使用 iframe 或嵌入代码。

使用 iframe 嵌入

iframe 是一种 HTML 元素，它允许您在网页中嵌入外部网站或文档。要使用 iframe 嵌入 Figma 设计，请按照以下步骤操作：1. 获取嵌入代码：打开 Figma 设计，单击“文件”>“嵌入”，然后选择“使用 iframe”。
2. 复制代码：将 iframe 嵌入代码复制到剪贴板。
3. 将代码粘贴到 HTML：在您希望嵌入 Figma 设计的网页上，粘贴 iframe 嵌入代码。

示例代码：```html
<iframe src="/embed?embed_host=&url=/file/1234567890/My-Design" width="640" height="480" style="border:none;"></iframe>
```

使用嵌入代码嵌入

嵌入代码是一种更直接的方式来嵌入 Figma 设计。它允许您将设计直接嵌入到 HTML 中，而无需使用 iframe。1. 获取嵌入代码：打开 Figma 设计，单击“文件”>“嵌入”，然后选择“使用嵌入代码”。
2. 复制代码：将嵌入代码复制到剪贴板。
3. 将代码粘贴到 HTML：在您希望嵌入 Figma 设计的网页上，将嵌入代码粘贴到 <body> 标签内。

示例代码：```html
<body>
<figma-embed src="/embed?embed_host=&url=/file/1234567890/My-Design"></figma-embed>
</body>
```

注意事项* 尺寸：您可以使用宽度和高度属性调整嵌入式 Figma 设计的大小。
* 交互性：嵌入式 Figma 设计不可点击或交互式。
* 更新：当您更新 Figma 设计时，嵌入式设计将不会自动更新。您需要手动更新嵌入代码。
* 隐私：如果您使用 Figma 嵌入代码，您的设计将可公开访问。确保您只嵌入了您想要与他人分享的设计。

2024-11-10

上一篇：Figma 的文件存储与协作

下一篇：巧用 Figma 技巧，轻松拉长物体