{"id":4411,"date":"2024-04-15T02:02:43","date_gmt":"2024-04-14T18:02:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4411"},"modified":"2024-04-15T02:02:43","modified_gmt":"2024-04-14T18:02:43","slug":"webflow-plugin-for-figma-integration","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh\/webflow-plugin-for-figma-integration\/","title":{"rendered":"\u7528\u65bc Figma \u6574\u5408\u7684 Webflow \u63d2\u4ef6"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">\n<h6><a href=\"https:\/\/www.figma.com\/file\/jOgEmnsAjEK586wlz8RD08\/Figma-to-Webflow-plugin-%E2%80%94%C2%A0Pocket-page-design?node-id=0%3A1&amp;t=DMuOjiYXEWLPayOs-1\">\u63a2\u7d22\u6211\u5011\u7684 Figma \u6587\u4ef6<\/a> \u8a73\u7d30\u4e86\u89e3\u82f1\u96c4\u548c\u5c0e\u89bd\u5217\u7d50\u69cb\u3002<\/h6>\n<blockquote><p><strong>\u81f3\u95dc\u91cd\u8981\u7684\uff1a <\/strong>\u6211\u5011\u7684\u5ba2\u6236\u652f\u63f4\u5718\u968a\u7121\u6cd5\u63d0\u4f9b\u6709\u95dc\u8a72\u63d2\u4ef6\u7684\u76f4\u63a5\u5354\u52a9\u3002\u5982\u6709\u4efb\u4f55\u7591\u554f\u6216\u5efa\u8b70\uff0c\u8acb\u76f4\u63a5\u806f\u7e6b <a href=\"https:\/\/webflow.circle.so\/join?invitation_token=99795801d4a6c427c3be0dd47508453032522f6c-f23ea5a4-2917-491b-8e75-37a2484e8630\" target=\"_blank\" rel=\"noopener\">Webflow \u5be6\u9a57\u5ba4\u793e\u5340<\/a> \u6574\u500b Webflow \u793e\u5340\uff08\u5305\u62ec\u5de5\u4f5c\u4eba\u54e1\uff09\u53ef\u4ee5\u63d0\u4f9b\u984d\u5916\u7684\u63f4\u52a9\u548c\u8cc7\u6e90\u3002<\/p><\/blockquote>\n<p>\u60a8\u662f\u5426\u9858\u610f\u5728 Figma \u4e2d\u5efa\u7acb\u521d\u59cb\u7ad9\u9ede\u85cd\u5716\uff0c\u7136\u5f8c\u5c07\u5176\u7528\u4f5c Webflow \u7ad9\u9ede\u5efa\u8a2d\u7684\u8def\u7dda\u5716\uff1f\u73fe\u5728\uff0c\u60a8\u53ef\u4ee5\u5c07 Figma \u8a2d\u8a08\u7121\u7e2b\u8cbc\u4e0a\u5230 Webflow \u4e2d\uff0c\u800c\u7121\u9700\u8cbb\u529b\u5730\u91cd\u65b0\u5275\u5efa\u6bcf\u500b\u5143\u7d20\u3002\u6b64\u5916\uff0c\u60a8\u53ef\u4ee5\u5229\u7528 Figma to Webflow \u61c9\u7528\u7a0b\u5f0f\u5c07 Figma \u5143\u4ef6\u548c\u8b8a\u6578\u8207 Webflow \u7db2\u7ad9\u540c\u6b65\uff0c\u53ea\u9700\u6309\u4e00\u4e0b\u5373\u53ef\u7acb\u5373\u66f4\u65b0\u5b83\u5011\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> Figma to Webflow \u63d2\u4ef6\u7531\u5167\u90e8\u5275\u610f\u5718\u968a Webflow Labs \u958b\u767c\u4e26\u63a8\u51fa\u3002 Webflow \u5be6\u9a57\u5ba4\u63a8\u51fa\u7684\u7522\u54c1\u900f\u904e\u6211\u5011\u7684\u6a19\u6e96\u7ba1\u9053\u7372\u5f97\u7684\u652f\u63f4\u6709\u9650\uff0c\u4e26\u4e14\u88ab\u8a2d\u8a08\u70ba\u5be6\u9a57\u6027\u7684\uff0c\u9019\u610f\u5473\u8457\u5b83\u5011\u7684\u529f\u80fd\u53ef\u80fd\u6703\u4e0d\u65b7\u767c\u5c55\u3002\u8a72\u63d2\u4ef6\u4e5f\u53ef\u80fd\u96a8\u6642\u88ab\u522a\u9664\u2014\u60a8\u53ef\u4ee5\u81ea\u884c\u6c7a\u5b9a\u4f7f\u7528\u5b83\u3002\u6211\u5011\u71b1\u5207\u5730\u7b49\u5f85\u60a8\u7684 <a href=\"https:\/\/webflow.circle.so\/join?invitation_token=4c38c2fc32a0bbc5b16c5067702d31ff337ab631-6a441307-9914-455b-bcf1-f44d65a5de71\" target=\"_blank\" rel=\"noopener\">\u60f3\u6cd5\u3001\u8a55\u8ad6\u548c\u56de\u994b\u90fd\u5728\u9019\u88e1<\/a>.<\/h6>\n<p>\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u60a8\u5c07\u7372\u5f97\u4ee5\u4e0b\u65b9\u9762\u7684\u898b\u89e3\uff1a<\/p>\n<ol role=\"list\">\n<li>\u4e86\u89e3 Figma \u81f3 Webflow \u63d2\u4ef6<\/li>\n<li>Figma\u5c0dWebflow\u63d2\u4ef6\u7684\u5b89\u88dd\u8207\u6388\u6b0a\u6d41\u7a0b<\/li>\n<li>\u5982\u4f55\u4f7f\u7528 Figma \u81f3 Webflow \u63d2\u4ef6<\/li>\n<li>\u4e86\u89e3\u63d2\u4ef6\u7684\u529f\u80fd<\/li>\n<li>\u5378\u8f09 Figma \u81f3 Webflow \u63d2\u4ef6<\/li>\n<li>\u63d2\u4ef6\u6545\u969c\u6392\u9664\u6307\u5357<\/li>\n<li>\u5206\u4eab\u5c0d\u63d2\u4ef6\u7684\u56de\u994b<\/li>\n<\/ol>\n<h2>Figma \u8f49 Webflow \u63d2\u4ef6\u6709\u4ec0\u9ebc\u4f5c\u7528\uff1f<\/h2>\n<p>\u8a72\u5916\u639b\u7a0b\u5f0f\u5c07 Figma \u5716\u5c64\u8f49\u63db\u70ba\u5c0d\u61c9\u7684 HTML \u548c CSS \u7a0b\u5f0f\u78bc\uff0c\u9019\u662f\u60a8\u5728\u8996\u89ba\u5316\u8a2d\u8a08\u7db2\u7ad9\u6642\u7531 Webflow \u7522\u751f\u7684\u7a0b\u5f0f\u78bc\u3002<\/p>\n<p>\u8a72\u63d2\u4ef6\u76ee\u524d\u652f\u63f4\u7684\u7ffb\u8b6f\u5305\u62ec\uff1a<\/p>\n<ul role=\"list\">\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/5731482952599-Using-auto-layout\" target=\"_blank\" rel=\"noopener\">\u81ea\u52d5\u4f48\u5c40<\/a><\/li>\n<li>\u7248\u5f0f\u6a23\u5f0f<\/li>\n<li>\u908a\u6846\u6a23\u5f0f<\/li>\n<li>\u9670\u5f71\u6a23\u5f0f<\/li>\n<li>\u80cc\u666f\u5f71\u50cf\u548c\u7dda\u6027\u6f38\u8b8a<\/li>\n<li>\u5c07\u5411\u91cf\u548c\u5f62\u72c0\u8f49\u63db\u70ba SVG<\/li>\n<li>\u5716\u7247<\/li>\n<li>\u4e0d\u900f\u660e\u5ea6<\/li>\n<li>\u7d55\u5c0d\u5b9a\u4f4d<\/li>\n<\/ul>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u7531\u65bc Figma \u4e0d\u662f\u5c08\u7528\u7684\u7db2\u9801\u88fd\u4f5c\u5de5\u5177\uff0c\u56e0\u6b64\u4e0d\u652f\u63f4\u67d0\u4e9b\u7ffb\u8b6f\u3002<\/h6>\n<h6><strong>\u7b46\u8a18\uff1a <\/strong>Figma \u81f3 Webflow \u5916\u639b\u7a0b\u5f0f\u76ee\u524d\u8207 Safari \u700f\u89bd\u5668\u4e0a\u7684 Figma \u4e0d\u76f8\u5bb9\u3002\u6211\u5011\u5efa\u8b70\u4f7f\u7528 Chrome \u6216 Figma \u684c\u9762\u61c9\u7528\u7a0b\u5f0f\u3002<\/h6>\n<h2>\u5982\u4f55\u5b89\u88ddFigma\u5230Webflow\u63d2\u4ef6\u4e26\u6388\u6b0a<\/h2>\n<p>\u8981\u4f7f\u7528Figma to Webflow\u63d2\u4ef6\uff0c\u60a8\u5fc5\u9808\u5148 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360039811114\" target=\"_blank\" rel=\"noopener\">\u8a3b\u518a Figma \u5e33\u6236<\/a>\u3002\u5b8c\u6210\u5f8c\uff0c\u8acb\u6309\u7167\u4ee5\u4e0b\u6b65\u9a5f\u5b89\u88dd\u63d2\u4ef6\uff1a<\/p>\n<ol role=\"list\">\n<li>\u53c3\u89c0 <a href=\"https:\/\/www.figma.com\/community\/plugin\/1164923964214525039\" target=\"_blank\" rel=\"noopener\">Figma \u81f3 Webflow \u63d2\u4ef6\u9801\u9762<\/a><\/li>\n<li>\u9ede\u9078 <strong>\u6253\u958b\u2026<\/strong> \u8a2a\u554f\u65b0\u7684 Figma \u8a2d\u8a08\u6a94\u6848\u4e26\u958b\u555f\u63d2\u4ef6\u6a21\u5f0f\u7a97\u53e3<\/li>\n<li>\u9078\u64c7 <strong>\u8dd1\u6b65<\/strong> \u5728\u5916\u639b\u6a21\u5f0f\u8996\u7a97\u5167<\/li>\n<li>\u9ede\u9078 <strong>\u9023\u63a5\u5e33\u6236<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f320efd97c9aff9d5b32ae_0120plugin20page.webp\" loading=\"lazy\" title=\"65f320efd97c9aff9d5b32ae_0120plugin20page\"><\/div>\n<\/figure>\n<p>\u5982\u679c\u60a8\u5c1a\u672a\u767b\u5165 Webflow\uff0c\u5c07\u6703\u958b\u555f\u4e00\u500b\u65b0\u7684\u700f\u89bd\u5668\u6a19\u7c64\uff0c\u63d0\u793a\u60a8\u4f7f\u7528 Webflow \u6191\u8b49\u767b\u5165\u3002\u7136\u5f8c\uff0c\u60a8\u5c07\u88ab\u5f15\u5c0e\u81f3\u61c9\u7528\u7a0b\u5f0f\u6388\u6b0a\u9801\u9762\uff0c\u4ee5\u4f7f\u7528\u60a8\u7684 Webflow \u5e33\u6236\u6388\u6b0a\u8a72\u5916\u639b\u7a0b\u5f0f\u4e26\u5b58\u53d6\u5176\u529f\u80fd\u3002<\/p>\n<p>\u9078\u64c7\u60a8\u5e0c\u671b\u70ba\u5176\u6388\u6b0a\u63d2\u4ef6\u7684\u6240\u6709\u7db2\u7ad9\u548c\u5de5\u4f5c\u5340\uff08\u5373\u60a8\u6253\u7b97\u8cbc\u4e0a Figma \u8a2d\u8a08\u7684\u6240\u6709\u7db2\u7ad9\uff09\u3002\u6700\u5f8c\uff0c\u9ede\u64ca <strong>\u6388\u6b0a\u61c9\u7528\u7a0b\u5f0f<\/strong> \u5728App\u6388\u6b0a\u9801\u9762\u3002<\/p>\n<blockquote><p><strong>\u81f3\u95dc\u91cd\u8981\u7684\uff1a <\/strong>\u78ba\u4fdd\u9078\u64c7\u6b63\u78ba\u7684\u7ad9\u9ede\uff0c\u4ee5\u78ba\u4fdd\u8a2d\u8a08\u5f9e Figma \u6e96\u78ba\u50b3\u8f38\u5230 Webflow\u3002\u5982\u679c\u60a8\u5fd8\u8a18\u70ba\u7279\u5b9a\u7db2\u7ad9\u6388\u6b0a\u63d2\u4ef6\uff0c\u8acb\u6309\u7167\u8aaa\u660e\u70ba\u65b0\u7db2\u7ad9\u6388\u6b0a\u3002<\/p><\/blockquote>\n<p>\u8acb\u8a18\u4f4f\uff0c\u5982\u679c\u60a8\u70ba\u7279\u5b9a\u7db2\u7ad9\u6388\u6b0a\u8a72\u63d2\u4ef6\uff0c\u60a8\u5c07\u53ea\u80fd\u5f9e\u8a72\u7279\u5b9a\u7db2\u7ad9\u7684\u8a2d\u5b9a\u4e2d\u522a\u9664\u8a72\u63d2\u4ef6\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u70ba\u5de5\u4f5c\u5340\u6388\u6b0a\u63d2\u4ef6\u6703\u5c07\u5176\u5f9e\u60a8\u7684 <strong>\u5de5\u4f5c\u5340\u8a2d\u5b9a<\/strong>\u3002\u53ef\u4ee5\u627e\u5230\u6709\u95dc\u522a\u9664\u63d2\u4ef6\u7684\u66f4\u591a\u8a73\u7d30\u8cc7\u8a0a\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u900f\u904e\u6388\u6b0a\u6b64\u61c9\u7528\u7a0b\u5e8f\uff0c\u60a8\u540c\u610f <a href=\"https:\/\/webflow.com\/legal\/labs-terms\">Webflow \u5be6\u9a57\u5ba4\u670d\u52d9\u689d\u6b3e <\/a>\u548c <a href=\"https:\/\/webflow.com\/legal\/privacy\">\u96b1\u79c1\u6b0a\u653f\u7b56<\/a>.<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f3235b91f35569cf06fc4b_0520authorize.webp\" loading=\"lazy\" title=\"65f3235b91f35569cf06fc4b_0520\u6388\u6b0a\"><\/div>\n<\/figure>\n<h3>\u5f9e\u63d2\u4ef6\u6388\u6b0a\u4e2d\u65b0\u589e\u6216\u522a\u9664\u7ad9\u9ede<\/h3>\n<p>\u82e5\u8981\u5c07\u5916\u639b\u7a0b\u5f0f\u6388\u6b0a\u65b0\u589e\u81f3\u65b0\u7db2\u7ad9\u6216\u5f9e\u73fe\u6709\u7db2\u7ad9\u64a4\u92b7\u5916\u639b\u7a0b\u5f0f\u6388\u6b0a\uff0c\u8acb\u4f9d\u7167\u4e0b\u5217\u6b65\u9a5f\u64cd\u4f5c\uff1a<\/p>\n<ol role=\"list\">\n<li>\u5b58\u53d6\u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u201c\u6f22\u5821\u9078\u55ae\u201d<\/li>\n<li>\u9078\u64c7 <strong>\u767b\u51fa<\/strong><\/li>\n<li>\u7e7c\u7e8c\u57f7\u884c\u5916\u639b\u6a21\u5f0f\u7684\u8aaa\u660e<\/li>\n<li>\u9ede\u9078 <strong>\u9023\u63a5\u5e33\u6236<\/strong><\/li>\n<li>\u9078\u64c7\u60a8\u8981\u65b0\u589e\u6216\u522a\u9664\u5916\u639b\u7a0b\u5f0f\u6388\u6b0a\u7684\u7ad9\u9ede<\/li>\n<\/ol>\n<h6><strong>\u7b46\u8a18\uff1a <\/strong>\u8a3b\u92b7\u8a72\u5916\u639b\u7a0b\u5f0f\u5c07\u53d6\u6d88\u5176\u5148\u524d\u5728\u5176\u4e0a\u6388\u6b0a\u7684\u6240\u6709\u7ad9\u9ede\u548c\u5de5\u4f5c\u5340\u7684\u6388\u6b0a\u3002\u91cd\u65b0\u6388\u6b0a\u60a8\u7684\u7db2\u7ad9\u6216\u5de5\u4f5c\u5340\u7684\u63d2\u4ef6\u4ee5\u6062\u5fa9\u4f7f\u7528\u5b83\u3002<\/h6>\n<h2>\u4f7f\u7528 Figma \u8f49 Webflow \u63d2\u4ef6<\/h2>\n<p>\u8981\u958b\u59cb\u4f7f\u7528\u8a72\u63d2\u4ef6\uff0c\u8acb\u8fd4\u56de Figma \u4e26\u55ae\u64ca <strong>\u958b\u59cb\u5427<\/strong> \u5728\u6a21\u614b\u8996\u7a97\u4e2d\u3002\u5f9e\u90a3\u88e1\uff0c\u60a8\u53ef\u4ee5\uff1a<\/p>\n<ul role=\"list\">\n<li>\u5728 Figma \u5f9e\u982d\u958b\u59cb\u8a2d\u8a08<\/li>\n<li>\u4f7f\u7528 Figma \u5230 Webflow \u63d2\u4ef6\u4f48\u5c40<\/li>\n<li>\u5229\u7528 Figma \u5230 Webflow \u63d2\u4ef6\u7d50\u69cb<\/li>\n<li>\u4f7f\u7528\u8907\u88fd\u8cbc\u4e0a\u50b3\u8f38\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/li>\n<\/ul>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f323c85c33c57fc940f9e4_1020lets20start.webp\" loading=\"lazy\" title=\"65f323c85c33c57fc940f9e4_1020lets20start\"><\/div>\n<\/figure>\n<h3>\u5728 Figma \u5f9e\u982d\u958b\u59cb\u8a2d\u8a08<\/h3>\n<p>\u5728 Figma \u4e2d\uff0c\u60a8\u53ef\u4ee5\u5f9e\u982d\u958b\u59cb\u88fd\u4f5c\u8a2d\u8a08\uff08\u5373\uff0c\u4e0d\u4f7f\u7528\u5916\u639b\u7a0b\u5f0f\u7684\u9810\u5148\u5efa\u7f6e\u4f48\u5c40\u6216\u7d50\u69cb\uff09\u2014\u78ba\u4fdd\u60a8\u5229\u7528\u81ea\u52d5\u4f48\u5c40\u3002\u5c0d\u65bc\u97ff\u61c9\u5f0f\u8a2d\u8a08\uff0c\u8a2d\u7f6e <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties#direction\" target=\"_blank\" rel=\"noopener\">\u88f9<\/a> \u548c <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties#Minimum_and_maximum_dimensions\" target=\"_blank\" rel=\"noopener\">\u6700\u5c0f\/\u6700\u5927\u5bec\u5ea6<\/a> \u5728\u7236\u6846\u67b6\u4e0a\u3002\u6709\u95dc\u5275\u5efa\u97ff\u61c9\u5f0f Figma \u8a2d\u8a08\u7684\u66f4\u591a\u898b\u89e3\uff0c\u8acb\u53c3\u898b <a href=\"https:\/\/www.figma.com\/community\/file\/784448220678228461\/Figma-auto-layout-playground\" target=\"_blank\" rel=\"noopener\">\u9019\u88e1<\/a>.<\/p>\n<p>\u78ba\u4fdd\u6240\u6709\u6846\u67b6\uff08\u5305\u62ec\u5de2\u72c0\u6846\u67b6\uff09\u90fd\u4f7f\u7528\u81ea\u52d5\u4f48\u5c40\u3002\u53e6\u5916\uff0c\u5982\u679c\u6709\u5fc5\u8981\u7684\u8a71\uff0c<a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360038665754-Detach-an-instance-from-the-component#:~:text=Select%20the%20Instance%20you%20wish,Detach%20Instance%20from%20the%20menu.\" target=\"_blank\" rel=\"noopener\">\u55ae\u7368\u7684\u7d44\u4ef6\u5be6\u4f8b<\/a> \u78ba\u4fdd\u60a8\u53ef\u4ee5\u4fee\u6539Webflow\u4e2d\u7684\u8a2d\u8a08\u3002\u60a8\u53ef\u4ee5\u6309\u5feb\u901f\u5206\u96e2\u5be6\u4f8b <strong>\u9078\u9805<\/strong> + <strong>\u547d\u4ee4<\/strong> + <strong>\u4e59 <\/strong>\uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236 <\/strong> + <strong>\u4e59<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u3002<\/p>\n<h6><strong>\u7d66\u5c08\u5bb6\u7684\u63d0\u793a\uff1a <\/strong>\u60a8\u53ef\u4ee5\u5229\u7528 <strong>\u9078\u9805<\/strong> + <strong>\u547d\u4ee4<\/strong> + <strong>C<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236<\/strong> + <strong>\u66ff\u4ee3<\/strong> + <strong>C<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u8907\u88fd\u5716\u5c64\u7684\u5c6c\u6027\uff0c\u7136\u5f8c\u5957\u7528 <strong>\u9078\u9805<\/strong> + <strong>\u547d\u4ee4<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236<\/strong> + <strong>\u66ff\u4ee3<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u5c07\u5176\u50b3\u8f38\u5230\u53e6\u4e00\u500b\u9078\u5b9a\u7684\u5716\u5c64\u3002\u6b64\u6377\u5f91\u5c0d\u65bc\u8907\u88fd\u586b\u6eff\u3001\u63cf\u908a\u548c\u6587\u5b57\u5c6c\u6027\u975e\u5e38\u6709\u7528\u3002<\/h6>\n<p>\u4f7f\u7528\u81ea\u52d5\u4f48\u5c40\u9032\u884c\u8a2d\u8a08\u5f8c\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u63d2\u4ef6\u5c07\u5176\u50b3\u8f38\u5230 Webflow\uff1a<\/p>\n<ol role=\"list\">\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040449873-Select-layers-and-objects\" target=\"_blank\" rel=\"noopener\">\u9078\u64c7<\/a> Figma \u756b\u5e03\u4e0a\u7684\u8a2d\u8a08\uff08\u5305\u542b\u6240\u6709\u5716\u5c64\uff09<\/li>\n<li>\u5f9e\u4ee5\u4e0b\u4f4d\u7f6e\u9078\u64c7\u60a8\u60f3\u8981\u63d2\u5165\u8a2d\u8a08\u7684 Webflow \u7ad9\u9ede <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae<\/li>\n<li>\u9ede\u9078 <strong>\u8907\u88fd\u5230Webflow<\/strong> \u5728 Figma \u5230 Webflow \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u5982\u679c\u63d2\u4ef6\u63d0\u793a\uff0c\u8acb\u78ba\u8a8d\u8907\u88fd\u5230 Webflow<\/li>\n<li>\u5728\u55ae\u7368\u7684\u8996\u7a97\u4e2d\u555f\u52d5 Webflow Designer<\/li>\n<li>\u5c07\u8a2d\u8a08\u8cbc\u5230 Webflow Designer \u756b\u5e03\u4e0a<\/li>\n<\/ol>\n<h6><strong>\u63d0\u9192\uff1a<\/strong> \u60a8\u53ea\u9700\u5f9e Webflow \u7ad9\u9ede\u4e2d\u9078\u64c7\u4e00\u6b21 <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u843d\u4e0b\u3002\u4e4b\u5f8c\uff0c\u60a8\u53ef\u4ee5\u5c07 Figma \u6a94\u6848\u4e2d\u7684\u5404\u7a2e\u8a2d\u8a08\u8907\u88fd\u4e26\u8cbc\u4e0a\u5230 Webflow\u3002<\/h6>\n<h3>\u5229\u7528 Figma \u5230 Webflow \u63d2\u4ef6\u4f48\u5c40<\/h3>\n<p>\u8a72\u5916\u639b\u63d0\u4f9b\u9810\u5148\u8a2d\u8a08\u7684\u97ff\u61c9\u5f0f\u4f48\u5c40\uff0c\u4ee5\u52a0\u5feb\u5c0e\u822a\u3001\u82f1\u96c4\u90e8\u5206\u3001\u8868\u55ae\u3001\u9801\u8173\u548c\u5404\u7a2e\u5176\u4ed6\u5e38\u898b\u8a2d\u8a08\u5143\u7d20\u7684\u8a2d\u8a08\u904e\u7a0b\u3002<\/p>\n<blockquote><p><strong>\u91cd\u8981\u7684\uff1a<\/strong> \u8a72\u63d2\u4ef6\u7684\u904b\u4f5c\u65b9\u5f0f\u662f\u5c07\u81ea\u52d5\u4f48\u5c40\u6846\u67b6\u8f49\u63db\u70ba Webflow \u8a2d\u8a08\u5668\u53ef\u4ee5\u89e3\u91cb\u7684\u683c\u5f0f\u3002\u7531\u65bcWebflow\u9762\u5411Web\u958b\u767c\uff0c\u6211\u5011\u53ef\u4ee5\u7368\u5bb6\u652f\u6301 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360041539473-Frames-in-Figma\" target=\"_blank\" rel=\"noopener\">\u6846\u67b6<\/a> \u4f7f\u7528\u81ea\u52d5\u4f48\u5c40\u3002<\/p><\/blockquote>\n<p>\u8981\u5c07 Figma \u7684\u4f48\u5c40\u8907\u88fd\u5230 Webflow\uff1a<\/p>\n<ol role=\"list\">\n<li>\u5c0e\u822a\u81f3 <strong>\u8907\u88fd\u8cbc\u4e0a<\/strong> \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u9078\u9805\u5361\u4e26\u9078\u64c7 <strong>\u4f48\u5c40<\/strong> \u5f9e\u4e0b\u62c9\u5f0f\u9078\u55ae\u4e2d<\/li>\n<li>\u9078\u64c7\u4e00\u500b <strong>\u4f48\u5c40<\/strong><\/li>\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040449873-Select-layers-and-objects\" target=\"_blank\" rel=\"noopener\">\u9078\u64c7<\/a> Figma \u756b\u5e03\u4e0a\u7684\u4f48\u5c40<\/li>\n<li>\u5f9e\u4e0b\u5217\u4f4d\u7f6e\u9078\u64c7\u60a8\u60f3\u8981\u63d2\u5165\u4f48\u5c40\u7684 Webflow \u7ad9\u9ede <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae<\/li>\n<li>\u9ede\u9078 <strong>\u8907\u88fd\u5230Webflow<\/strong> \u5728\u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u5982\u679c\u63d2\u4ef6\u63d0\u793a\uff0c\u8acb\u78ba\u8a8d\u8907\u88fd\u5230 Webflow<\/li>\n<li>\u5728\u55ae\u7368\u7684\u8996\u7a97\u4e2d\u555f\u52d5 Webflow Designer<\/li>\n<li>\u5c07\u7248\u9762\u914d\u7f6e\u8cbc\u5230 Webflow Designer \u756b\u5e03\u4e0a<\/li>\n<\/ol>\n<p>\u60a8\u53ea\u9700\u5f9e Webflow \u7ad9\u9ede\u4e2d\u9078\u64c7\u4e00\u6b21 <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u843d\u4e0b\u3002\u63a5\u4e0b\u4f86\uff0c\u60a8\u53ef\u4ee5\u5c07 Figma \u6a94\u6848\u4e2d\u7684\u591a\u500b\u4f48\u5c40\u8907\u88fd\u4e26\u8cbc\u4e0a\u5230 Webflow\u3002<\/p>\n<h6><strong>\u63d0\u9192\uff1a<\/strong> \u78ba\u4fdd\u60a8\u9078\u64c7\u6574\u500b\u4f48\u5c40\uff0c\u800c\u4e0d\u50c5\u50c5\u662f\u5176\u4e2d\u7684\u67d0\u4e9b\u5143\u7d20\u3002\u672a\u80fd\u9078\u64c7\u5b8c\u6574\u4f48\u5c40\u53ef\u80fd\u6703\u5c0e\u81f4\u8907\u88fd\u554f\u984c\u4e26\u963b\u6b62\u60a8\u5c07\u5176\u8cbc\u4e0a\u5230 Webflow Designer \u4e2d\u3002<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f3241054fcc56123f79c33_1520layouts20copy20to20webflow.webp\" loading=\"lazy\" title=\"65f3241054fcc56123f79c33_1520layouts20copy20to20webflow\"><\/div>\n<\/figure>\n<h3>\u4f7f\u7528 Figma \u5230 Webflow \u63d2\u4ef6\u7d50\u69cb<\/h3>\n<p>\u8a72\u63d2\u4ef6\u9084\u5305\u62ec\u9810\u5148\u8a2d\u8a08\u7684\u7d50\u69cb\uff0c\u70ba\u60a8\u7684\u8a2d\u8a08\u63d0\u4f9b\u6846\u67b6\u3002\u96d6\u7136\u9019\u4e9b\u7d50\u69cb\u5728Figma\u4e2d\u662f\u7a7a\u7684\uff0c\u4f46\u5b83\u5011\u5728Webflow\u4e2d\u4fdd\u6301\u97ff\u61c9\u80fd\u529b\u2014\u2014\u5141\u8a31\u60a8\u5c07\u5b83\u5011\u7528\u4f5c\u5167\u5bb9\u5bb9\u5668\u3002\u5c07\u5b83\u5011\u53ca\u5176\u5167\u5bb9\u8cbc\u5230 Webflow \u6642\uff0c\u9019\u4e9b\u7d50\u69cb\u5c07\u4fdd\u6301\u8de8\u65b7\u9ede\u7684\u53cd\u61c9\u80fd\u529b\u3002<\/p>\n<p>\u8981\u5c07 Figma \u7684\u7d50\u69cb\u8907\u88fd\u5230 Webflow\uff1a<\/p>\n<ol role=\"list\">\n<li>\u8a2a\u554f <strong>\u8907\u88fd\u8cbc\u4e0a<\/strong> \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u9078\u9805\u5361\u4e26\u9078\u64c7 <strong>\u7d50\u69cb<\/strong> \u5f9e\u4e0b\u62c9\u5f0f\u9078\u55ae\u4e2d<\/li>\n<li>\u9078\u64c7\u4e00\u500b <strong>\u7d50\u69cb<\/strong><\/li>\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040449873-Select-layers-and-objects\" target=\"_blank\" rel=\"noopener\">\u9078\u64c7<\/a> Figma \u756b\u5e03\u4e0a\u7684\u7d50\u69cb<\/li>\n<li>\u5f9e\u4ee5\u4e0b\u4f4d\u7f6e\u9078\u64c7\u60a8\u60f3\u8981\u63d2\u5165\u7d50\u69cb\u7684 Webflow \u7ad9\u9ede <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae<\/li>\n<li>\u9ede\u9078 <strong>\u8907\u88fd\u5230Webflow<\/strong> \u5728\u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u5982\u679c\u63d2\u4ef6\u63d0\u793a\uff0c\u8acb\u78ba\u8a8d\u8907\u88fd\u5230 Webflow<\/li>\n<li>\u5728\u55ae\u7368\u7684\u8996\u7a97\u4e2d\u555f\u52d5 Webflow Designer<\/li>\n<li>\u5c07\u7d50\u69cb\u8cbc\u5230 Webflow Designer \u756b\u5e03\u4e0a<\/li>\n<\/ol>\n<p>\u60a8\u53ea\u9700\u5f9e Webflow \u7ad9\u9ede\u4e2d\u9078\u64c7\u4e00\u6b21 <strong>\u9078\u64c7Webflow\u7ad9\u9ede<\/strong> \u843d\u4e0b\u3002\u63a5\u4e0b\u4f86\uff0c\u60a8\u53ef\u4ee5\u5c07 Figma \u6a94\u6848\u4e2d\u7684\u591a\u500b\u7d50\u69cb\u8907\u88fd\u4e26\u8cbc\u4e0a\u5230 Webflow\u3002<\/p>\n<h6><strong>\u63d0\u9192\uff1a<\/strong> \u78ba\u4fdd\u60a8\u9078\u64c7\u6574\u500b\u7d50\u69cb\uff0c\u800c\u4e0d\u50c5\u50c5\u662f\u5176\u4e2d\u7684\u67d0\u4e9b\u5143\u7d20\u3002\u672a\u80fd\u9078\u64c7\u5b8c\u6574\u7d50\u69cb\u53ef\u80fd\u6703\u5c0e\u81f4\u8907\u88fd\u554f\u984c\u4e26\u963b\u6b62\u60a8\u5c07\u5176\u8cbc\u4e0a\u5230 Webflow Designer \u4e2d\u3002<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f324b5c2fcd078f1d9fcd7_2020structure20copy20to20webflow.webp\" loading=\"lazy\" title=\"65f324b5c2fcd078f1d9fcd7_2020struct20copy20to20webflow\"><\/div>\n<\/figure>\n<h3>\u8907\u88fd\u4e26\u8cbc\u4e0a\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/h3>\n<p>\u5982\u679c\u60a8\u7684 Figma \u6a94\u6848\u4e2d\u6709\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\uff0c\u60a8\u53ef\u4ee5\u5c07\u5b83\u5011\u8907\u88fd\u5230 Webflow\uff0c\u4ee5\u4fbf\u5728\u7db2\u7ad9\u8a2d\u8a08\u904e\u7a0b\u4e2d\u8f15\u9b06\u5b58\u53d6\u3002\u5efa\u8b70\u5728Webflow\u4e2d\u5efa\u7acb\u4e00\u500b\u6a23\u5f0f\u6307\u5357\u9801\u9762\u4f86\u7d44\u7e54\u60a8\u7684\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\u3002\u60a8\u53ef\u4ee5\u8907\u88fd\u55ae\u4e00\u6587\u5b57\u6a23\u5f0f\u3001\u984f\u8272\u6a23\u5f0f\u6216\u540c\u6642\u8907\u88fd\u6240\u6709\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\u3002<\/p>\n<p>\u53ef\u7528\u65bc\u8907\u88fd\u7684\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\u5305\u62ec\uff1a<\/p>\n<ul role=\"list\">\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360038746534#From_Local_styles\" target=\"_blank\" rel=\"noopener\">\u5728\u5730\u5316 Figma \u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/a><\/li>\n<li><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360041051154-Guide-to-libraries-in-Figma\" target=\"_blank\" rel=\"noopener\">Figma \u5eab\u4e2d\u7684\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/a> \uff08\u5982\u679c\u5957\u7528\u65bc\u76ee\u524d Figma \u9801\u9762\uff09<\/li>\n<\/ul>\n<p>\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\u5c07\u900f\u904e\u9810\u5148\u5b9a\u7fa9\u7684\u300c\u6a23\u5f0f\u6307\u5357\u300d\u7bc4\u672c\u5728 Webflow \u4e2d\u8907\u88fd\u3002<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f342ee6e38307efa9154df_7120step20120copy20text20and20color20styles.webp\" loading=\"lazy\" title=\"65f342ee6e38307efa9154df_7120step20120copy20text20and20color20styles\"><\/div>\n<\/figure>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f325fdfdf1fad08acd9a25_7220style20guide20step202.webp\" loading=\"lazy\" alt=\"\u6a23\u5f0f\u6307\u5357\u7bc4\u672c\u5728 Webflow \u4e2d\u91cd\u8907\uff0c\u5177\u6709\u5169\u7a2e\u6587\u5b57\u6a23\u5f0f\u548c\u5169\u7a2e\u984f\u8272\u6a23\u5f0f\u3002\" title=\"65f325fdfdf1fad08acd9a25_7220style20guide20step202\"><\/div>\n<\/figure>\n<h4>\u6587\u5b57\u6a23\u5f0f<\/h4>\n<p>\u8981\u5f9e Figma \u8907\u88fd\u6587\u5b57\u6a23\u5f0f\uff1a<\/p>\n<ol role=\"list\">\n<li>\u8a2a\u554f\u201c<strong>\u6f22\u5821\u83dc\u55ae<\/strong>\u201d \u5728\u5916\u639b\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u9078\u64c7 <strong>\u8907\u88fd\u6587\u5b57\u6a23\u5f0f<\/strong><\/li>\n<li>\u7e7c\u7e8c\u9020\u8a2a Webflow \u7db2\u7ad9\u4e0a\u6307\u5b9a\u7684\u6a23\u5f0f\u624b\u518a\u9801\u9762\uff08\u5982\u679c\u5df2\u5efa\u7acb\uff09\uff0c\u6216 Webflow \u7db2\u7ad9\u4e2d\u7684\u5176\u4ed6\u9801\u9762<\/li>\n<li>\u6253 <strong>\u63a7\u5236<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u547d\u4ee4<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u63d2\u5165\u672c\u6a5f\u6587\u5b57\u6a23\u5f0f<\/li>\n<\/ol>\n<p>\u6587\u5b57\u6a23\u5f0f\u5c07\u4f7f\u7528\u9810\u5148\u5b9a\u7fa9\u7684\u300c\u6a23\u5f0f\u6307\u5357\u300d\u7bc4\u672c\u63d2\u5165\u5230 Webflow \u4e2d\u3002\u6587\u5b57\u6a23\u5f0f\u63d2\u5165\u5230 <strong>\u6587\u5b57\u6a23\u5f0f<\/strong> \u90e8\u5206\u3002\u6bcf\u500b\u6587\u5b57\u6a23\u5f0f\u5c07\u5f9e Figma \u4e2d\u7684\u6587\u5b57\u6a23\u5f0f\u53d6\u5f97\u5177\u6709\u6307\u5b9a\u540d\u7a31\u7684\u985e\u5225\uff08\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u5728 Figma \u4e2d\u5c07\u6587\u5b57\u6a23\u5f0f\u547d\u540d\u70ba\u201cTahoma Bold\u201d\uff0c\u5247\u5176 Webflow \u985e\u5225\u540d\u7a31\u5c07\u70ba\u201cTahoma Bold\u201d\uff09\u3002<\/p>\n<h4>\u984f\u8272\u6b3e\u5f0f<\/h4>\n<p>\u82e5\u8981\u5f9e Figma \u8907\u88fd\u984f\u8272\u6a23\u5f0f\uff1a<\/p>\n<ol role=\"list\">\n<li>\u9ede\u64ca \u201d<strong>\u6f22\u5821\u83dc\u55ae<\/strong>\u201d \u5728\u5916\u639b\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u9078\u64c7 <strong>\u8907\u88fd\u984f\u8272\u6a23\u5f0f<\/strong><\/li>\n<li>\u524d\u5f80 Webflow \u7db2\u7ad9\u4e2d\u6307\u5b9a\u7684\u6a23\u5f0f\u6307\u5357\u9801\u9762\uff08\u5982\u679c\u60a8\u5efa\u7acb\u4e86\u4e00\u500b\uff09\uff0c\u6216 Webflow \u7db2\u7ad9\u4e2d\u7684\u53e6\u4e00\u500b\u9801\u9762<\/li>\n<li>\u6253 <strong>\u63a7\u5236<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u547d\u4ee4<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u8cbc\u4e0a\u672c\u6a5f\u984f\u8272\u6a23\u5f0f<\/li>\n<\/ol>\n<p>\u984f\u8272\u6a23\u5f0f\u5c07\u900f\u904e\u9810\u8a2d\u7684\u300c\u6a23\u5f0f\u6307\u5357\u300d\u7bc4\u672c\u8cbc\u5230 Webflow \u4e2d\u3002\u984f\u8272\u6a23\u5f0f\u8cbc\u5728 <strong>\u984f\u8272\u6b3e\u5f0f<\/strong> \u90e8\u5206\u3002\u6bcf\u500b\u984f\u8272\u6a23\u5f0f\u90fd\u5c07\u88ab\u5206\u914d\u4e00\u500b\u985e\uff0c\u5c07\u5176\u6a19\u8a18\u70ba\u984f\u8272\u6a23\u672c\uff0c\u4e26\u5f9eFigma \u4e2d\u7684\u984f\u8272\u6a23\u5f0f\u6307\u5b9a\u540d\u7a31\uff08\u4f8b\u5982\uff0c\u5982\u679c\u984f\u8272\u6a23\u5f0f\u5728Figma \u4e2d\u88ab\u547d\u540d\u70ba\u201c\u7c89\u7d05\u8272\u201d\uff0c\u5247\u5176Webflow \u985e\u540d\u7a31\u5c07\u70ba\u201c\u984f\u8272\u6a23\u672c\/\u7c89\u7d05\u8272\u201d \u201d\uff09\u3002\u53ef\u4ee5\u5728 Webflow \u756b\u5e03\u4e0a\u7684\u672c\u6a5f\u6a23\u5f0f\u65c1\u67e5\u770b\u984f\u8272\u7684\u5341\u516d\u9032\u4f4d\u4ee3\u78bc\uff0c\u6216\u5c0e\u89bd\u81f3\u300c\u6a23\u5f0f\u300d\u9762\u677f &gt; \u80cc\u666f\uff0c\u7136\u5f8c\u9078\u64c7\u8207\u8a72\u984f\u8272\u76f8\u9130\u7684\u8272\u6a23\u3002<\/p>\n<p>\u9019\u4e9b\u984f\u8272\u6a23\u5f0f\u4e0d\u6703\u81ea\u52d5\u7522\u751f\u70ba Webflow \u984f\u8272\u8b8a\u91cf\uff0c\u56e0\u6b64\uff0c\u6211\u5011\u5efa\u8b70\u624b\u52d5\u5efa\u7acb\u9019\u4e9b\u8b8a\u6578\u4ee5\u5728\u6574\u500b\u7db2\u7ad9\u4e2d\u5957\u7528\u984f\u8272\u3002<\/p>\n<h4>\u5982\u4f55\u540c\u6642\u8907\u88fd\u6240\u6709\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/h4>\n<p>\u8907\u88fd <em>\u5168\u90e8<\/em> Figma \u7684\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f\uff0c\u00a0<\/p>\n<ol role=\"list\">\n<li>\u9ede\u64ca \u201d<strong>\u6f22\u5821\u83dc\u55ae<\/strong>\u201d \u5728\u5916\u639b\u6a21\u5f0f\u8996\u7a97\u4e2d<\/li>\n<li>\u9078\u64c7 <strong>\u8907\u88fd\u6240\u6709\u6587\u5b57\u548c\u984f\u8272\u6a23\u5f0f<\/strong><\/li>\n<li>\u524d\u5f80 Webflow \u7db2\u7ad9\u4e2d\u6307\u5b9a\u7684\u6a23\u5f0f\u6307\u5357\u9801\u9762\uff08\u5982\u679c\u60a8\u5efa\u7acb\u4e86\u4e00\u500b\uff09\uff0c\u6216 Webflow \u7db2\u7ad9\u4e2d\u7684\u53e6\u4e00\u500b\u9801\u9762<\/li>\n<li>\u6253 <strong>\u63a7\u5236<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u547d\u4ee4<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u63d2\u5165\u672c\u6a5f\u6a23\u5f0f<\/li>\n<\/ol>\n<p>\u9019\u4e9b\u6a23\u5f0f\u5c07\u900f\u904e\u9810\u8a2d\u7684\u300c\u6a23\u5f0f\u6307\u5357\u300d\u7bc4\u672c\u63d2\u5165\u5230 Webflow \u4e2d\u3002<\/p>\n<h2>\u63d2\u4ef6\u7684\u64cd\u4f5c<\/h2>\n<p>\u4f7f\u7528 Figma to Webflow \u63d2\u4ef6\u6642\uff0c\u9700\u8981\u8003\u616e\u4ee5\u4e0b\u5e7e\u500b\u65b9\u9762\u7684\u5e7e\u500b\u95dc\u9375\u56e0\u7d20\uff1a<\/p>\n<ul role=\"list\">\n<li>\u81ea\u52d5\u4f48\u5c40<\/li>\n<li>\u7279\u6b8a\u5b57\u9ad4<\/li>\n<li>\u985e\u5225<\/li>\n<li>\u806f\u5408\u8ab2\u7a0b<\/li>\n<li>\u5716\u5f62<\/li>\n<li>HTML \u5143\u7d20<\/li>\n<li>\u80cc\u666f<\/li>\n<li>\u9069\u61c9\u6027<\/li>\n<li>\u589e\u5f37\u7684\u63d2\u4ef6\u529f\u80fd<\/li>\n<\/ul>\n<p>\u6b64\u5916\uff0c\u5229\u7528 Figma \u5230 Webflow \u61c9\u7528\u7a0b\u5f0f\u53ef\u4ee5\u9806\u5229\u6574\u5408\u5f9e Figma \u5230 Webflow \u7684\u5143\u4ef6\u548c\u8b8a\u6578\u3002<\/p>\n<h3>\u81ea\u52d5\u4f48\u5c40<\/h3>\n<p>\u60a8\u53ea\u80fd\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8907\u88fd\u548c\u8cbc\u4e0a\u5716\u5c64 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/5731482952599-Using-auto-layout\" target=\"_blank\" rel=\"noopener\">\u81ea\u52d5\u4f48\u5c40<\/a>\u3002\u9019\u4fdd\u8b49\u4e86\u5f9e Figma \u8907\u88fd\u5230 Webflow \u6642\u7684\u6700\u4f73\u8f49\u63db\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u5982\u679c\u60a8\u7684 Figma \u8a2d\u8a08\u4e2d\u6709\u4e00\u500b\u6c92\u6709\u81ea\u52d5\u4f48\u5c40\u7684\u5716\u5c64\uff0c\u63d2\u4ef6\u6a21\u5f0f\u4e2d\u6703\u51fa\u73fe\u4e00\u689d\u901a\u77e5\uff0c\u63d0\u793a\u60a8\u5728\u5c07\u5716\u5c64\u8cbc\u4e0a\u5230 Webflow \u4e4b\u524d\u5c07\u5176\u8f49\u63db\u70ba\u81ea\u52d5\u4f48\u5c40\u3002\u900f\u904e\u9ede\u9078\u6a21\u5f0f\u4e2d\u7684\u9ec3\u8272\u8b66\u544a\u4e09\u89d2\u5f62\uff0c\u60a8\u53ef\u4ee5\u9078\u64c7\u9700\u8981\u8f49\u63db\u70ba\u81ea\u52d5\u4f48\u5c40\u7684\u6240\u6709\u5716\u5c64\u3002<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f34e463d0027ab707c751f_8120auto20layout20alert.webp\" loading=\"lazy\" title=\"65f34e463d0027ab707c751f_8120auto20layout20alert\"><\/div>\n<\/figure>\n<h3>\u7279\u6b8a\u5b57\u9ad4<\/h3>\n<p>\u5982\u679c\u60a8\u7684 Figma \u8a2d\u8a08\u4e2d\u4f7f\u7528\u4e86\u81ea\u8a02\u5b57\u9ad4\uff0c\u8acb\u78ba\u4fdd\u5728\u50b3\u8f38 Figma \u8a2d\u8a08\u4e4b\u524d\u5c07\u5176\u4e0a\u50b3\u5230\u60a8\u7684 Webflow \u7ad9\u9ede\uff0c\u4ee5\u78ba\u4fdd\u6b63\u78ba\u7684\u5b57\u9ad4\u50b3\u8f38\u3002\u5982\u679c\u672a\u80fd\u5c07\u81ea\u8a02\u5b57\u9ad4\u65b0\u589e\u81f3 Webflow\uff0c\u53ef\u80fd\u6703\u5c0e\u81f4\u5b83\u5011\u5728\u50b3\u8f38\u904e\u7a0b\u4e2d\u907a\u5931\u3002\u4e86\u89e3\u5c07\u81ea\u8a02\u5b57\u9ad4\u4e0a\u50b3\u5230 Webflow \u7db2\u7ad9\u7684\u904e\u7a0b\u3002<\/p>\n<h3>\u63cf\u8ff0\u548c\u7b26\u865f<\/h3>\n<p>Figma \u662f\u4e00\u6b3e\u5411\u91cf\u8edf\u9ad4\uff0c\u53ef\u8b93\u60a8\u7522\u751f\u63cf\u8ff0\u3001\u7b26\u865f\u548c\u5411\u91cf\u6a19\u8a8c\u3002\u5927\u591a\u6578\u63cf\u8ff0\u90fd\u662f\u7531 Figma \u548c\u5176\u4ed6\u5411\u91cf\u5de5\u5177\u7279\u6709\u7684\u5404\u7a2e\u5411\u91cf\u5716\u5c64\u5efa\u69cb\u7684\uff0c\u9019\u4f7f\u5f97\u63d2\u4ef6\u8655\u7406\u8d77\u4f86\u5177\u6709\u6311\u6230\u6027\uff0c\u901a\u5e38\u6703\u5c0e\u81f4\u903e\u6642\u932f\u8aa4\u3002<\/p>\n<p>\u5982\u679c\u6709 <a href=\"https:\/\/www.figma.com\/plugin-docs\/api\/VectorNode\" target=\"_blank\" rel=\"noopener\">\u5411\u91cf\u5c64<\/a> \u5728\u60a8\u7684\u8a2d\u8a08\u4e2d\uff0c\u8a72\u63d2\u4ef6\u6703\u81ea\u52d5\u7522\u751f\u4e00\u500b\u540d\u70ba\u300c\u5411\u91cf\u5305\u88dd\u5668\u300d\u7684\u65b0\u5411\u91cf\u7236\u5c64\u3002\u6b64\u5305\u88dd\u5668\u5c01\u88dd\u4e86\u7528\u65bc SVG \u5c0e\u51fa\u7684\u5411\u91cf\u5716\u5c64\u3002\u8907\u88fd\u904e\u7a0b\u5b8c\u6210\u5f8c\uff0c\u8a72\u63d2\u4ef6\u6703\u5728 Figma \u4e2d\u522a\u9664\u8a72\u5716\u5c64\uff0c\u4f46\u5b83\u4ecd\u6703\u4fdd\u7559\u5728 Webflow \u4e2d\u3002<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f34e977a08d1722326e1b6_8320vector20layer20alert.webp\" loading=\"lazy\" title=\"65f34e977a08d1722326e1b6_8320vector20layer20\u8b66\u5831\"><\/div>\n<\/figure>\n<p>\u5982\u679c\u60a8\u6b63\u5728\u4f7f\u7528Figma <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360038662654-Guide-to-components-in-Figma\" target=\"_blank\" rel=\"noopener\">\u6210\u5206<\/a> \u5728\u4f60\u7684\u5411\u91cf\u5716\u5c64\u4e2d\uff0c\u4f60\u53ef\u80fd\u9700\u8981 <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360038665754-Detach-an-instance-from-the-component#:~:text=Select%20the%20Instance%20you%20wish,Detach%20Instance%20from%20the%20menu.\" target=\"_blank\" rel=\"noopener\">\u5206\u96e2\u5be6\u4f8b<\/a> \u5728\u8907\u88fd\u5716\u5c64\u4e4b\u524d\u3002\u5982\u6709\u5fc5\u8981\uff0c\u5916\u639b\u7a0b\u5f0f\u5c07\u63d0\u793a\u60a8\u5206\u96e2\u5be6\u4f8b\u3002<\/p>\n<p>\u53ef\u4ee5\u900f\u904e\u6309\u5feb\u901f\u5b8c\u6210\u5206\u96e2\u5be6\u4f8b <strong>\u9078\u9805<\/strong> + <strong>\u547d\u4ee4<\/strong> + <strong>\u4e59 <\/strong>\uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236 <\/strong>+ <strong>\u4e59<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u3002<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f34ebc6408268df1e2746e_8520component20instance20alert.webp\" loading=\"lazy\" title=\"65f34ebc6408268df1e2746e_8520\u7d44\u4ef620\u5be6\u4f8b20\u8b66\u5831\"><\/div>\n<\/figure>\n<h3>\u985e\u5225<\/h3>\n<p>\u5c07\u8a2d\u8a08\u5f9e Figma \u8907\u88fd\u5230 Webflow \u5f8c\uff0c\u6bcf\u500b Figma \u5716\u5c64\u540d\u7a31\u90fd\u6703\u8f49\u63db\u70ba\u4e00\u500b\u985e\u5225\u3002<\/p>\n<h4>\u540d\u5b57\u76f8\u914d\uff0c\u98a8\u683c\u591a\u6a23<\/h4>\n<p>\u5982\u679c\u5169\u500b Figma \u5c64\u5171\u4eab <strong>\u76f8\u540c\u7684<\/strong><strong>\u59d3\u540d<\/strong> \u4f46\u651c\u5e36 <strong>\u5c0d\u6bd4\u98a8\u683c<\/strong>\uff0c\u63d2\u4ef6\u5c07\u900f\u904e\u5728\u985e\u5225\u540d\u7a31\u4e2d\u6dfb\u52a0\u6578\u5b57\u4f86\u81ea\u52d5\u91cd\u547d\u540d\u9019\u4e9b\u985e\u5225\u3002\u4f8b\u5982\uff0c\u5982\u679cFigma \u4e2d\u7684\u5169\u500b\u5716\u5c64\u88ab\u547d\u540d\u70ba\u5177\u6709\u4e0d\u540c\u6a23\u5f0f\u7684\u201ccontainer\u201d\uff0c\u5247\u5728\u5c07\u5b83\u5011\u8cbc\u5230Webflow Designer \u756b\u5e03\u4e0a\u6642\uff0c\u63d2\u4ef6\u5c07\u5411\u5176\u4e2d\u4e00\u500b\u5716\u5c64\u5206\u914d\u201ccontainer\u201d\u985e\uff0c\u5411\u7b2c\u4e8c\u5c64\u6307\u6d3e\u201ccontainer 2\u201d\u985e\u5225\u3002<\/p>\n<p>\u540c\u6a23\uff0c\u7576\u5728 Webflow \u756b\u5e03\u4e0a\u8cbc\u4e0a\u5177\u6709\u7db2\u7ad9\u4e0a\u73fe\u6709\u985e\u5225\u540d\u7a31\u7684\u5716\u5c64\u6642\uff0c\u985e\u5225\u540d\u7a31\u5c07\u986f\u793a\u70ba\u905e\u589e\u7684\u6578\u5b57\u3002\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u7684\u7db2\u7ad9\u5df2\u5305\u542b\u300cButton\u300d\u985e\uff0c\u4e26\u4e14\u60a8\u5c07\u540d\u70ba\u300cButton\u300d\u7684Figma \u5716\u5c64\u8cbc\u5230Webflow Designer \u756b\u5e03\u4e0a\uff0c\u5247\u8a72\u5716\u5c64\u7684\u985e\u5225\u5c07\u5728\u300c\u9078\u64c7\u5668\u300d\u6b04\u4f4d\u4e2d\u6a19\u8a18\u70ba\u300cButton 2\u201d\u3002\u6216\u8005\uff0c\u60a8\u53ef\u4ee5\u5c07 Figma \u5716\u5c64\u8cbc\u4e0a\u5230 Webflow \u4e2d\uff0c\u5957\u7528\u73fe\u6709\u7684 Webflow \u985e\u5225\u6a23\u5f0f\uff0c\u6216\u5c07\u73fe\u6709 Webflow \u985e\u5225\u7684\u6a23\u5f0f\u8b8a\u66f4\u70ba Figma \u5716\u5c64\u7684\u6a23\u5f0f\u3002<\/p>\n<h6><strong>\u5c08\u5bb6\u63d0\u793a\uff1a <\/strong>\u5982\u679c\u60a8\u7d93\u5e38\u5c07\u76f8\u540c\u7684\u4f48\u5c40\u8907\u88fd\u5230 Webflow\uff0c\u53ef\u80fd\u6703\u51fa\u73fe\u4e0d\u826f\u7684\u985e\u8c50\u5bcc\u60c5\u6cc1\uff0c\u5f9e\u800c\u5c0e\u81f4\u7db2\u7ad9\u6548\u80fd\u4e0b\u964d\u3002\u70ba\u4e86\u4fdd\u6301\u6574\u6f54\u7684\u985e\u5225\u7d50\u69cb\uff08\u4e26\u907f\u514d\u50cf\u300cButton 234986\u300d\u9019\u6a23\u7684\u6df7\u4e82\uff09\uff0c\u8acb\u6d88\u9664 Webflow \u7db2\u7ad9\u4e0a\u4e0d\u5fc5\u8981\u7684\u4f48\u5c40\u6216\u5143\u7d20\uff0c\u4e26\u5728\u6a23\u5f0f\u7ba1\u7406\u5668\u4e2d\u6574\u7406\u6a23\u5f0f\u3002\u9019\u6a23\uff0c\u60a8\u5c31\u53ef\u4ee5\u5c07 Figma \u8a2d\u8a08\u8cbc\u5230 Webflow \u4e2d\uff0c\u800c\u4e0d\u6703\u5c0e\u81f4\u985e\u5225\u904e\u8f09\u3002<\/h6>\n<h5>Figma \u8207 Webflow \u4e4b\u9593\u4ea4\u63db\u8a2d\u8a08<\/h5>\n<p>\u6709 2 \u500b\u9375\u76e4\u5feb\u901f\u9375\u7528\u65bc\u5728 Figma \u5716\u5c64\u548c Webflow \u985e\u5225\u4e4b\u9593\u5171\u7528\u6a23\u5f0f\u3002<\/p>\n<ul role=\"list\">\n<li><strong>\u547d\u4ee4 <\/strong>+<strong> \u8f49\u79fb<\/strong> + <strong>V <\/strong>\uff08\u5728 Mac \u4e0a\uff09\u6216\u00a0 <strong>\u63a7\u5236<\/strong> + <strong>\u8f49\u79fb<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u2014 \u6b64\u7279\u5b9a\u6377\u5f91\u5c07\u4f7f\u60a8\u80fd\u5920\u8cbc\u4e0a Figma \u5716\u5c64\u4e26\u4f7f\u7528\u73fe\u6709\u7684 Webflow \u985e\u5225\u5957\u7528\u6a23\u5f0f\u3002\u8981\u7e7c\u7e8c\uff0c\u53ea\u9700\u8907\u88fd Figma \u4e2d\u7684\u5716\u5c64\uff0c\u7136\u5f8c\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u5c07\u5176\u8cbc\u4e0a\u5230 Webflow \u4e2d\uff1a <strong>\u547d\u4ee4 <\/strong>+<strong> \u8f49\u79fb<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236<\/strong> + <strong>\u8f49\u79fb<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u3002\u7136\u5f8c\uff0c\u60a8\u7684\u5716\u5c64\u5c07\u88ab\u8cbc\u4e0a\u5230 Webflow \u4e2d\uff0c\u4e26\u4e14\u73fe\u6709\u985e\u5225\u7684\u6a23\u5f0f\u5df2\u7d93\u5c31\u4f4d\u3002\u4f8b\u5982\uff0c\u5982\u679c Figma \u4e2d\u6709\u4e00\u500b\u7d05\u8272\u80cc\u666f\u7684\u300cButton\u300d\u5716\u5c64\uff0c\u4f46 Webflow \u4e2d\u7684\u300cButton\u300d\u985e\u5225\u5177\u6709\u7da0\u8272\u80cc\u666f\uff0c\u5247\u300cButton\u300d\u5716\u5c64\u5c07\u8cbc\u4e0a\u5230\u5177\u6709\u7da0\u8272\u80cc\u666f\u7684 Webflow \u4e2d\u3002<\/li>\n<li><strong>\u547d\u4ee4<\/strong> + <strong>\u9078\u9805<\/strong> + <strong>V <\/strong>\uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236<\/strong> + <strong>\u9078\u9805<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09- \u9019\u500b\u7279\u6b8a\u7684\u5feb\u6377\u65b9\u5f0f\u5c07\u5141\u8a31\u60a8\u8cbc\u4e0a Figma \u5716\u5c64\u4e26\u8abf\u6574\u73fe\u6709\u7684 Webflow \u985e\u5225\u4ee5\u7b26\u5408 Figma \u7684\u6a23\u5f0f\u3002\u8a72\u904e\u7a0b\u6d89\u53ca\u8907\u88fd Figma \u4e2d\u7684\u5716\u5c64\u4e26\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u5c07\u5176\u8cbc\u4e0a\u5230 Webflow \u4e2d <strong>\u547d\u4ee4 <\/strong>+<strong> \u9078\u9805<\/strong> + <strong>V<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 <strong>\u63a7\u5236<\/strong> + <strong>\u9078\u9805<\/strong> + <strong>V<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u3002\u96a8\u5f8c\uff0cWebflow \u985e\u5225\u7684\u73fe\u6709\u6a23\u5f0f\u5c07\u88ab\u4fee\u6539\u4ee5\u8207 Figma \u5716\u5c64\u7684\u6a23\u5f0f\u4fdd\u6301\u4e00\u81f4\u3002\u4f8b\u5982\uff0c\u5982\u679c Figma \u4e2d\u6709\u4e00\u500b\u7d05\u8272\u80cc\u666f\u7684\u300cButton\u300d\u5716\u5c64\uff0c\u800c Webflow \u4e2d\u7b26\u5408\u7684\u300cButton\u300d\u985e\u5225\u5177\u6709\u7da0\u8272\u80cc\u666f\uff0c\u5247 Webflow \u4e2d\u300cButton\u300d\u985e\u5225\u7684\u80cc\u666f\u984f\u8272\u5c07\u5207\u63db\u70ba\u7d05\u8272\u3002<\/li>\n<\/ul>\n<h4>\u76f8\u540c\u7684\u98a8\u683c\uff0c\u7368\u7279\u7684\u6a94\u6b21<\/h4>\n<p>\u5982\u679c\u5169\u500b Figma \u5716\u5c64\u6216 Figma \u5716\u5c64\u548c Webflow \u5143\u7d20\u5171\u7528\u76f8\u540c\u7684\u6a23\u5f0f\u4f46\u5177\u6709\u4e0d\u540c\u7684\u985e\u5225\u540d\u7a31\uff0c\u5247\u5916\u639b\u7a0b\u5f0f\u5c07\u5408\u4f75\u9019\u4e9b\u985e\u5225\u3002\u6b64\u64cd\u4f5c\u6709\u52a9\u65bc\u6e1b\u5c11 Webflow \u4e2d\u91cd\u8907\u985e\u5225\u5be6\u4f8b\u7684\u6578\u91cf\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u5728Figma \u4e2d\u64c1\u67092 \u500b\u5716\u5c64\uff0c\u5b83\u5011\u5171\u7528\u76f8\u540c\u7684CSS \u6a23\u5f0f\uff0c\u4f46\u540d\u7a31\u4e0d\u540c\uff0c\u5047\u8a2d\u4e00\u500b\u6a19\u984c\u70ba\u201cNavbar\u201d\uff0c\u53e6\u4e00\u500b\u6a19\u8a18\u70ba\u201cCool navbar\u201d\uff0cWebflow \u5c07\u900f\u904e\u5c07\u76f8\u540c\u7684\u201cNavbar\u201d\u985e\u5225\u5206\u914d\u7d66\u5b83\u5011\u4f86\u7c21\u5316\u5b83\u5011\u5c07\u5b83\u5011\u8cbc\u5728 Webflow \u756b\u5e03\u4e0a\u5f8c\u3002<\/p>\n<h3>\u806f\u5408\u8ab2\u7a0b<\/h3>\n<p>\u53e6\u4e00\u9805\u529f\u80fd\u662f\u900f\u904e\u5728\u6b63\u659c\u7dda\u5f8c\u9762\u65b0\u589e\u985e\u5225\u540d\u7a31\uff08\u4f8b\u5982\u300c\u57fa\u5e95\u985e\u5225\/\u7d44\u5408\u985e\u5225\/\u7b2c\u4e8c\u500b\u7d44\u5408\u985e\u5225\u300d\uff09\uff0c\u5728 Figma \u5716\u5c64\u4e0a\u5efa\u7acb\u7d44\u5408\u985e\u5225\u3002<\/p>\n<h3>\u63d2\u5716<\/h3>\n<p>\u8cbc\u4e0a\u5305\u542b\u5716\u50cf\u7684\u8a2d\u8a08\u5f8c\uff0c\u9019\u4e9b\u5716\u50cf\u5c07\u4e0a\u50b3\u5230 Webflow \u7684\u8cc7\u7522\u9762\u677f\u3002\u78ba\u4fdd\u5728\u4ee5\u4e0b\u4f4d\u7f6e\u9078\u64c7\u4e86\u9069\u7576\u7684\u7ad9\u9ede <strong>\u9078\u64c7Webflow\u7ad9\u9ede <\/strong>\u63d2\u4ef6\u6a21\u5f0f\u8996\u7a97\u5167\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae\uff1b\u5426\u5247\uff0c\u5716\u50cf\u53ef\u80fd\u7121\u6cd5\u4e0a\u50b3\u5230\u8cc7\u6e90\u9762\u677f\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u60a8\u53ef\u80fd\u9700\u8981\u5237\u65b0 Webflow Designer \u624d\u80fd\u67e5\u770b\u8cc7\u7522\u9762\u677f\u4e2d\u4e0a\u50b3\u7684\u5716\u50cf\u3002<\/h6>\n<h3>\u6a19\u8a18\u5143\u7d20<\/h3>\n<p>\u8a72\u63d2\u4ef6\u81f4\u529b\u65bc\u900f\u904e\u9075\u5faa\u6307\u5b9a\u7684\u6a19\u6e96\u70ba\u6bcf\u500b Figma \u5c64\u63a8\u65b7\u51fa\u5408\u9069\u7684 HTML \u6a19\u7c64\uff1a<\/p>\n<ul role=\"list\">\n<li><strong>\u9328\u6a19\u8a18<\/strong>\uff1a\u5982\u679c\u5716\u5c64\u540d\u7a31\u5305\u542b&ldquo;button&rdquo;\uff0c\u5b83\u5c07\u5c07\u8a72\u5716\u5c64\u8f49\u63db\u70ba HTML \u9328\u6a19\u8a18\uff08\u4f8b\u5982\uff0c&ldquo;&lt;a&gt;&rdquo;\uff09<\/li>\n<li><strong>\u6bb5\u843d\u6a19\u7c64<\/strong>\uff1a\u5982\u679c\u5716\u5c64\u540d\u7a31\u5305\u542b&ldquo;description&rdquo;\u3001&ldquo;text&rdquo;\u6216&ldquo;paragraph&rdquo;\uff0c\u5247\u6703\u5c07\u8a72\u5716\u5c64\u8f49\u63db\u70ba HTML \u6bb5\u843d\u6a19\u7c64\uff08\u4f8b\u5982&ldquo;&lt;p&gt;&rdquo;\uff09<\/li>\n<li><strong>\u6a19\u984c\u6a19\u7c64<\/strong>\uff1a\u7576\u5716\u5c64\u540d\u7a31\u6574\u5408&ldquo;heading&rdquo;\u6642\uff0c\u5b83\u5c07\u8f49\u7f6e\u70ba HTML H1 \u6a19\u7c64\uff08\u4f8b\u5982&ldquo;&lt;h1&gt;&rdquo;\uff09<\/li>\n<\/ul>\n<p>\u4f46\u662f\uff0c\u5982\u679c\u9700\u8981\u66f4\u6539\u5916\u639b\u7a0b\u5f0f\u4f7f\u7528\u7684 HTML \u6a19\u7c64\uff0c\u624b\u52d5\u8a2d\u5b9a\u662f\u53ef\u884c\u7684\u3002<\/p>\n<h4>\u624b\u52d5\u78ba\u5b9a HTML \u6a19\u7c64<\/h4>\n<p>\u60a8\u53ef\u4ee5\u900f\u904e\u91cd\u65b0\u547d\u540d\u5716\u5c64\u4e26\u65b0\u589e\u7528\u62ec\u865f\u62ec\u8d77\u4f86\u7684\u6a19\u7c64\u540d\u7a31\uff0c\u5f8c\u9762\u8ddf\u8457 2 \u500b\u9023\u5b57\u5143\uff08\u4f8b\u5982\uff0c\u300c[H1] - \u5716\u5c64\u540d\u7a31\u300d\uff09\u4f86\u6307\u5b9a\u6bcf\u500b Figma \u5716\u5c64\u7684 HTML \u6a19\u7c64\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u78ba\u4fdd\u6a19\u7c64\u4e2d\u7684\u7b2c\u4e00\u500b\u5b57\u6bcd\u5927\u5beb\u3002<\/h6>\n<p>\u8a72\u5916\u639b\u5305\u542b\u4ee5\u4e0b HTML \u6a19\u7c64\uff1a<\/p>\n<ol role=\"list\">\n<li>H1<\/li>\n<li>\u6c2b2<\/li>\n<li>H3<\/li>\n<li>H4<\/li>\n<li>H5<\/li>\n<li>H6<\/li>\n<li>\u78f7<\/li>\n<li>A<\/li>\n<li>\u5206\u5272\u5340<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f35348f919437b39d609d2_11520manually20define20html20tags.webp\" loading=\"lazy\" title=\"65f35348f919437b39d609d2_11520\u624b\u52d520\u5b9a\u7fa920html20\u6a19\u7c64\"><\/div>\n<\/figure>\n<h3>\u80cc\u666f\u9078\u9805<\/h3>\n<p>\u8a72\u5916\u639b\u7a0b\u5f0f\u652f\u63f4\u81ea\u52d5\u4f48\u5c40\u5716\u5c64\u548c\u6587\u5b57\u5716\u5c64\u7684\u7d14\u8272\u3001\u7dda\u6027\u548c\u5716\u50cf\u80cc\u666f\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u5982\u679c\u60a8\u7684\u80cc\u666f\u5716\u7247\u5728\u4f7f\u7528\u5916\u639b\u7a0b\u5f0f\u8907\u88fd\u8cbc\u4e0a\u5f8c\u7121\u6cd5\u5728Webflow\u4e2d\u986f\u793a\uff0c\u8acb\u91cd\u65b0\u6574\u7406\u8a2d\u8a08\u5668\u9801\u9762\u3002<\/h6>\n<h3>\u9069\u61c9\u6027<\/h3>\n<p>\u60a8\u4e5f\u53ef\u4ee5\u9748\u6d3b\u5730\u78ba\u5b9a Figma \u5c64\u8f49\u63db\u70ba\u5782\u76f4\u5806\u758a\u7684\u65b7\u9ede\uff0c\u5f9e\u800c\u66f4\u597d\u5730\u63a7\u5236\u8a2d\u8a08\u7684\u53cd\u61c9\u80fd\u529b\u3002\u8a72\u5916\u639b\u63d0\u4f9b\u4e86 4 \u500b\u65b7\u9ede\u9078\u9805\u4f9b\u9078\u64c7\uff1a<\/p>\n<ul role=\"list\">\n<li><strong>\u85e5\u7247<\/strong> \u2014 \u6b64\u5c64\u5c07\u5728\u5e73\u677f\u96fb\u8166\u65b7\u9ede\u8655\u5207\u63db\u70ba\u5782\u76f4\u5806\u758a\uff08\u5bec\u5ea6\u7bc4\u570d\u5f9e 991 \u50cf\u7d20\u5230 767 \u50cf\u7d20\uff09<\/li>\n<li><strong>\u79fb\u52d5\u666f\u89c0 <\/strong> \u2014 \u6b64\u5716\u5c64\u5c07\u5728\u79fb\u52d5\u666f\u89c0\u65b7\u9ede\u8655\u8f49\u63db\u70ba\u5782\u76f4\u5806\u758a\uff08\u5bec\u5ea6\u7bc4\u570d\u5f9e 767 \u50cf\u7d20\u5230 478 \u50cf\u7d20\uff09<\/li>\n<li><strong>\u624b\u6a5f\u4eba\u50cf <\/strong> \u2014 \u6b64\u5716\u5c64\u5c07\u5728\u79fb\u52d5\u7e31\u5411\u65b7\u9ede\u8655\u8f49\u63db\u70ba\u5782\u76f4\u5806\u758a\uff08\u5bec\u5ea6\u7bc4\u570d\u5f9e 478 \u50cf\u7d20\u5230 0 \u50cf\u7d20\uff09<\/li>\n<li><strong>\u6c92\u6709\u53cd\u61c9 <\/strong> \u2014 \u7121\u8ad6\u8996\u7a97\u5bec\u5ea6\u5982\u4f55\uff0c\u5716\u5c64\u90fd\u6703\u4fdd\u7559\u6c34\u5e73\u5806\u758a\u3002\u4f46\u662f\uff0c\u60a8\u53ef\u4ee5\u624b\u52d5\u5efa\u7acb <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties#direction\" target=\"_blank\" rel=\"noopener\">\u88f9<\/a> \u548c <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties#Minimum_and_maximum_dimensions\" target=\"_blank\" rel=\"noopener\">\u6700\u5c0f\/\u6700\u5927\u5bec\u5ea6<\/a> \u5728\u7236\u6846\u67b6\u4e0a\uff0c\u4ee5\u78ba\u4fdd\u60a8\u7684\u8a2d\u8a08\u5177\u6709\u56de\u61c9\u80fd\u529b\u3002<\/li>\n<\/ul>\n<h6><strong>\u7b46\u8a18\uff1a<\/strong> \u5982\u679c\u5716\u5c64\u5bec\u5ea6\u4f4e\u65bc 478 \u50cf\u7d20\u6216\u5716\u5c64\u5df2\u4f4d\u65bc\u5782\u76f4\u5806\u758a\u4e2d\uff0c\u5247\u5728\u300c\u97ff\u61c9\u5f0f\u300d\u4e0b\u62c9\u6e05\u55ae\u4e2d\u914d\u7f6e\u5716\u5c64\u7684\u56de\u61c9\u80fd\u529b\u5c07\u7121\u6cd5\u4f7f\u7528\u3002<\/h6>\n<p>\u8981\u7ba1\u7406\u5716\u5c64\u7684\u56de\u61c9\u80fd\u529b\uff1a<\/p>\n<ol role=\"list\">\n<li>\u9078\u64c7\u5716\u5c64<\/li>\n<li>\u4f86\u81ea <strong>\u53cd\u61c9\u9748\u654f <\/strong>\u63d2\u4ef6\u6a21\u5f0f\u4e2d\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae\uff0c\u9078\u64c7\u5c64\u61c9\u8f49\u63db\u70ba\u5782\u76f4\u5806\u758a\u7684\u65b7\u9ede<\/li>\n<\/ol>\n<h3>\u589e\u5f37\u7684\u63d2\u4ef6\u529f\u80fd<\/h3>\n<p>\u8a72\u5916\u639b\u7a0b\u5f0f\u6703\u5256\u6790\u6240\u9078\u7684 Figma \u5716\u5c64\uff0c\u4e26\u5c07\u5176\u6a23\u5f0f\u548c\u4f48\u5c40\u8f49\u63db\u70ba HTML \u6a19\u7c64\u548c CSS \u5c6c\u6027\u3002\u900f\u904e\u50c5\u63a5\u53d7\u81ea\u52d5\u4f48\u5c40\u5143\u7d20\u4f86\u4fdd\u8b49\u9019\u7a2e\u8f49\u63db\u7cbe\u5ea6\u3002<\/p>\n<h6><strong>\u7b46\u8a18\uff1a <\/strong>\u907a\u61be\u7684\u662f\uff0cFigma to Webflow \u5916\u639b\u7a0b\u5f0f\u76ee\u524d\u7f3a\u4e4f\u8207 Safari \u700f\u89bd\u5668\u4e0a Figma \u7684\u517c\u5bb9\u6027\u3002\u56e0\u6b64\uff0c\u5982\u679c\u60a8\u5728 Safari \u700f\u89bd\u5668\u4e2d\u4f7f\u7528 Figma\uff0c\u8a72\u63d2\u4ef6\u5c07\u7121\u6cd5\u904b\u4f5c\u3002\u6211\u5011\u63d0\u5021\u4f7f\u7528 Chrome \u6216 Figma \u684c\u9762\u61c9\u7528\u7a0b\u5f0f\u3002<\/h6>\n<h2>\u5378\u8f09 Figma \u81f3 Webflow \u63d2\u4ef6<\/h2>\n<p>\u8981\u5f9e\u60a8\u7684\u5de5\u4f5c\u5340\u6216\u7db2\u7ad9\u4e4b\u4e00\u522a\u9664 Figma \u81f3 Webflow \u63d2\u4ef6\uff0c\u60a8\u61c9\u8a72\u78ba\u5b9a\u60a8\u6700\u521d\u6388\u4e88\u63d2\u4ef6\u5b58\u53d6\u6b0a\u9650\u7684\u4f4d\u7f6e\u3002\u5c0d\u65bc\u5de5\u4f5c\u5340\u6388\u6b0a\uff0c\u8acb\u4f9d\u7167\u4e0b\u5217\u6b65\u9a5f\u522a\u9664\u5916\u639b\u7a0b\u5f0f\u3002\u5c0d\u65bc\u7279\u5b9a\u65bc\u7db2\u7ad9\u7684\u6388\u6b0a\uff0c\u8acb\u7e7c\u7e8c\u57f7\u884c\u5f9e\u7db2\u7ad9\u5378\u8f09\u5916\u639b\u7a0b\u5f0f\u7684\u6b65\u9a5f\u3002<\/p>\n<h3>\u5f9e\u60a8\u7684\u5de5\u4f5c\u5340\u4e2d\u522a\u9664\u8a72\u63d2\u4ef6<\/h3>\n<p>\u82e5\u8981\u5f9e\u5de5\u4f5c\u5340\u4e2d\u522a\u9664 Figma \u81f3 Webflow \u63d2\u4ef6\uff1a<\/p>\n<ol role=\"list\">\n<li>\u8a2a\u554f <strong>\u5e33\u6236<\/strong> \u5c0e\u89bd\u5217\u4e2d\u7684\u4e0b\u62c9\u5f0f\u9078\u55ae<\/li>\n<li>\u9ede\u9078 <strong>\u5de5\u4f5c\u7a7a\u9593<\/strong><\/li>\n<li>\u9078\u64c7\u60a8\u8981\u5f9e\u4e2d\u522a\u9664\u5916\u639b\u7a0b\u5f0f\u7684\u5de5\u4f5c\u5340<\/li>\n<li>\u5c0e\u822a <strong>\u5de5\u4f5c\u5340\u8a2d\u5b9a<\/strong> &gt; <strong>\u6574\u5408 <\/strong>\u9078\u9805\u5361 &gt; <strong>\u6388\u6b0a\u61c9\u7528<\/strong><\/li>\n<li>\u9078\u64c7 <strong>\u64a4\u92b7<\/strong> \u7528\u65bc\u201cWebflow \u5f9e Figma \u5230 Site\u201d\u61c9\u7528\u7a0b\u5f0f<\/li>\n<\/ol>\n<h3>\u5f9e\u60a8\u7684\u7db2\u7ad9\u4e2d\u522a\u9664\u8a72\u63d2\u4ef6<\/h3>\n<p>\u8981\u5f9e\u60a8\u7684\u7db2\u7ad9\u6839\u9664 Figma \u81f3 Webflow \u63d2\u4ef6\uff1a<\/p>\n<ol role=\"list\">\n<li>\u8a2a\u554f\u60a8\u7684 <strong>\u5100\u8868\u677f<\/strong><\/li>\n<li>\u9ede\u64ca\u201c<strong>3\u500b\u62ab\u9732\u9ede<\/strong>\u201d \u5728\u6240\u9700\u7ad9\u9ede\u65c1\u908a<\/li>\n<li>\u5c0e\u822a <strong>\u8a2d\u5b9a<\/strong><\/li>\n<li>\u7e7c\u7e8c <strong>\u7ad9\u9ede\u8a2d\u5b9a<\/strong> &gt; <strong>\u6574\u5408 <\/strong>\u9078\u9805\u5361 &gt; <strong>\u6388\u6b0a\u61c9\u7528<\/strong><\/li>\n<li>\u9ede\u9078 <strong>\u770b\u6cd5<\/strong><\/li>\n<li>\u9078\u64c7 <strong>\u5e33\u6236\u6574\u5408\u8a2d\u5b9a<\/strong><\/li>\n<li>\u8a2a\u554f <strong>\u5e33\u865f\u8a2d\u5b9a<\/strong> &gt; <strong>\u00a0\u6388\u6b0a\u61c9\u7528<\/strong><\/li>\n<li>\u9ede\u9078 <strong>\u64a4\u92b7<\/strong> \u7528\u65bc\u201cWebflow \u5f9e Figma \u5230 Site\u201d\u61c9\u7528\u7a0b\u5f0f<\/li>\n<\/ol>\n<h2>\u63d2\u4ef6\u6545\u969c\u6392\u9664<\/h2>\n<p>\u5982\u679c\u5916\u639b\u7a0b\u5f0f\u7121\u6cd5\u6e96\u78ba\u8907\u88fd\u60a8\u7684\u8a2d\u8a08\uff0c\u8acb\u5148\u78ba\u4fdd\u60a8\u4f7f\u7528\u7684\u662f\u53d7\u652f\u63f4\u7684\u700f\u89bd\u5668\u3002\u8a72\u63d2\u4ef6\u652f\u63f4\u7684\u700f\u89bd\u5668\u5305\u62ec Chrome \u548c Figma \u684c\u9762\u61c9\u7528\u7a0b\u5f0f\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u8a72\u63d2\u4ef6\u76ee\u524d\u8207 Safari \u700f\u89bd\u5668\u4e2d\u7684 Figma \u4e0d\u76f8\u5bb9\u3002<\/p>\n<p>\u5982\u679c\u554f\u984c\u4ecd\u7136\u5b58\u5728\uff0c\u8acb\u5617\u8a66\u4ee5\u4e0b\u63aa\u65bd\uff1a<\/p>\n<ul role=\"list\">\n<li><strong>\u5229\u7528\u81ea\u52d5\u4f48\u5c40\u8907\u88fd\u55ae\u4e00\u9810\u5148\u5efa\u7f6e\u4f48\u5c40\u3001\u9810\u5148\u5efa\u7f6e\u7d50\u69cb\u6216\u6587\u5b57\u5716\u5c64\u4e26\u8cbc\u4e0a\u5230 Webflow \u4e2d<\/strong> \u2014 \u5982\u679c\u6846\u67b6\u8907\u88fd\u548c\u8cbc\u4e0a\u6b63\u78ba\uff0c\u5247\u63d2\u4ef6\u53ef\u4ee5\u904b\u884c\u3002\u5982\u679c\u6846\u67b6\u7121\u6cd5\u6b63\u78ba\u8907\u88fd\uff0c\u8acb\u7e7c\u7e8c\u57f7\u884c\u898f\u5b9a\u7684\u6545\u969c\u6392\u9664\u6b65\u9a5f<\/li>\n<li><strong>\u63a2\u7d22<\/strong> \u6211\u5011\u7684\u89e3\u6c7a\u65b9\u6848 <a href=\"https:\/\/webflow.circle.so\/join?invitation_token=99795801d4a6c427c3be0dd47508453032522f6c-f23ea5a4-2917-491b-8e75-37a2484e8630\" target=\"_blank\" rel=\"noopener\">Webflow \u5be6\u9a57\u5ba4\u793e\u5340<\/a><\/li>\n<li><strong>\u5f9e\u4e8b<\/strong> \u5728\u88e1\u9762 <a href=\"https:\/\/webflow.circle.so\/join?invitation_token=99795801d4a6c427c3be0dd47508453032522f6c-f23ea5a4-2917-491b-8e75-37a2484e8630\" target=\"_blank\" rel=\"noopener\">Webflow \u5be6\u9a57\u5ba4\u793e\u5340<\/a> \u900f\u904e\u63d0\u51fa\u67e5\u8a62<\/li>\n<\/ul>\n<p>\u5982\u679c\u6309\u7167\u4e0a\u8ff0\u6545\u969c\u6392\u9664\u6b65\u9a5f\u5f8c\u554f\u984c\u4ecd\u7136\u5b58\u5728\uff0c\u8acb\u5efa\u7acb\u4e00\u500b\u5305\u542b\u6709\u554f\u984c\u7684\u6846\u67b6\u7684\u65b0 Figma \u6587\u4ef6\uff0c\u4e26\u5c07\u5176\u8207 Webflow \u5be6\u9a57\u5ba4\u5718\u968a\u5171\u7528\uff1a <a href=\"mailto:labs@webflow.com\">labs@webflow.com<\/a>\u3002\u4ed6\u5011\u6703\u7acb\u5373\u89e3\u6c7a\u60a8\u7684\u7591\u616e\u3002<\/p>\n<h2>\u63d0\u4f9b\u56de\u994b<\/h2>\n<p>\u6211\u5011\u71b1\u5207\u7b49\u5f85\u60a8\u7684\u60f3\u6cd5\u3001\u8a55\u8ad6\u548c\u56de\u994b\uff0c\u4ee5\u5e6b\u52a9\u6211\u5011\u589e\u5f37\u9019\u500b\u5916\u639b\u7a0b\u5f0f\u3002\u8acb\u8207\u6211\u5011\u4e00\u8d77\u8ca2\u737b\u60a8\u7684\u898b\u89e3 <a href=\"https:\/\/webflow.circle.so\/join?invitation_token=99795801d4a6c427c3be0dd47508453032522f6c-f23ea5a4-2917-491b-8e75-37a2484e8630\" target=\"_blank\" rel=\"noopener\">Webflow \u5be6\u9a57\u5ba4\u793e\u5340<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"\u5c07\u60a8\u7684 Figma \u8a2d\u8a08\u8907\u88fd\u4e26\u8cbc\u4e0a\u5230 Webflow \u4e2d\uff0c\u4ee5\u7c21\u5316\u60a8\u7684\u7db2\u7ad9\u5efa\u7f6e\u3002","protected":false},"author":2,"featured_media":4412,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4411","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/4411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/comments?post=4411"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/4411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media\/4412"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media?parent=4411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/categories?post=4411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/tags?post=4411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}