{"id":1257,"date":"2025-04-09T13:00:00","date_gmt":"2025-04-09T05:00:00","guid":{"rendered":"https:\/\/hsiehchengyi.com\/?post_type=blog&#038;p=1257"},"modified":"2025-09-25T20:19:42","modified_gmt":"2025-09-25T12:19:42","slug":"common-mistakes-to-avoid-as-a-figma-novice","status":"publish","type":"blog","link":"https:\/\/hsiehchengyi.com\/ja\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/","title":{"rendered":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png\" alt=\"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0\" class=\"wp-image-1248\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice-300x169.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice-768x432.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice-1536x864.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice-1160x653.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>\u512a\u79c0\u7684UI\u8a2d\u8a08\u7a3f\uff0c\u5176\u50f9\u503c\u4e0d\u50c5\u5728\u65bc\u83ef\u9e97\u7684\u5916\u8868\uff0c\u66f4\u9ad4\u73fe\u65bc\u80cc\u5f8c\u6240\u50b3\u9054\u7684\u4e00\u81f4\u6027\u3001\u908f\u8f2f\u8207\u7e1d\u5bc6\u6c7a\u7b56\u3002\u900f\u904e\u9019\u7bc7\u6587\u7ae0\uff0c\u4f60\u5c07\u80fd\u8df3\u812b\u4e00\u6627\u805a\u7126\u65bc\u8edf\u9ad4\u64cd\u4f5c\u4e0a\u7684\u7aa0\u81fc\u3001\u5feb\u901f\u5730\u8a8d\u8b58\u5e38\u898b\u7684\u65b0\u624b\u8aa4\u5340\u53ca\u80cc\u5f8c\u8207\u4e4b\u9023\u7d50\u7684\u91cd\u8981\u89c0\u5ff5\uff0c\u671d\u66f4\u5c08\u696d\u7684UI\u8a2d\u8a08\u9081\u9032\u3002<\/p>\n\n\n\n<p>\u203b\u672c\u6587\u70ba\u500b\u4eba\u7d93\u9a57\u5206\u4eab\uff0c\u5118\u7ba1\u5177\u9ad4\u7d30\u7bc0\u53ef\u80fd\u56e0\u4e0d\u540c\u516c\u53f8\u6216\u5718\u968a\u7684\u904b\u4f5c\u65b9\u5f0f\u800c\u6709\u6240\u5dee\u7570\uff0c\u4f46\u6574\u9ad4\u65b9\u5411\u8207\u539f\u5247\u4f9d\u7136\u9069\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528Frame\u800c\u4e0d\u662fGroup<\/h2>\n\n\n\n<p><strong>\u5728 Figma \u88e1\uff0c\u5e7e\u4e4e99.9%\u60c5\u6cc1\u4e0b\u4f60\u90fd\u61c9\u8a72\u7528\u300cFrame\u300d\u800c\u4e0d\u662f\u300cGroup\u300d\u4f86\u5305\u4f4f\u5143\u4ef6\u3002\u9019\u662f\u56e0\u70ba\u53ea\u6709Frame\u624d\u5177\u5099Auto layout\u2014\u2014\u91cd\u73fe\u771f\u5be6\u7db2\u9801\u3001App\u6392\u7248\u95dc\u4fc2\u7684\u91cd\u8981\u529f\u80fd\u3002<\/strong><\/p>\n\n\n\n<p>\u64cd\u4f5cFigma\u8207\u64cd\u4f5c\u4e00\u822c\u7684\u7e6a\u5716\u8edf\u9ad4\u6709\u4e9b\u4e0d\u540c\uff0c\u7576\u4f60\u5c07\u4e00\u7fa4\u7269\u4ef6\u300c\u5305\u300d\u5728\u4e00\u8d77\u6642\uff0c\u4e26\u975e\u53ea\u662f\u70ba\u4e86\u65b9\u4fbf\u5feb\u901f\u9078\u53d6\u800c\u5df2\uff0c\u9023\u5e36\u5730\uff0c\u4f60\u4e5f\u5fc5\u9808\u8981\u601d\u8003\u9019\u4e9b\u7269\u4ef6\u9593\u7684\u6392\u7248\u95dc\u4fc2\u3002\u5118\u7ba1\u9019\u500b\u6982\u5ff5\u4e26\u672a\u88ab\u660e\u78ba\u5f37\u8abf\uff0c\u4f46\u537b\u662fUI\u8a2d\u8a08\u5e2b\u7684\u5fc5\u5099\u7d20\u990a\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1.png\" alt=\"\u5728figma\u8a2d\u8a08\u6309\u9215\u61c9\u4f7f\u7528frame\uff0c\u4e26\u4e14\u8003\u616e\u5167\u90e8\u5143\u7d20\u7684\u6392\u7248\u95dc\u4fc2\" class=\"wp-image-1249\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-1-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">\u5728figma\u8a2d\u8a08\u6309\u9215\u61c9\u4f7f\u7528frame\uff0c\u4e26\u4e14\u8003\u616e\u5167\u90e8\u5143\u7d20\u7684\u6392\u7248\u95dc\u4fc2<\/figcaption><\/figure>\n\n\n\n<p>\u8209\u4f8b\u4f86\u8aaa\uff0c\u7576\u4f60\u5728\u88fd\u4f5c\u540c\u6642\u5177\u6709Icon\u548c\u6587\u5b57\u7684\u6309\u9215\u6642\uff0c\u4f60\u6703\u5f88\u81ea\u7136\u5730\u5c07\u5b83\u5011\u8996\u70ba\u4e00\u500b\u6574\u9ad4\uff0c\u5c0d\u5427\uff1f\u9019\u6642\uff0c\u5c31\u9700\u8981\u601d\u8003\u5b83\u5011\u8a72\u5982\u4f55\u6392\u7248\u3002\u5177\u9ad4\u601d\u8003\u6b65\u9a5f\u5982\u4e0b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u9996\u5148\uff0c\u61c9\u8a72\u5148\u5b9a\u7fa9\u6309\u9215\u7684\u7bc4\u570d\uff0c\u56e0\u6b64\u7528Frame\u4f86\u756b\u51fa\u6309\u9215\u7684\u5bec\u5ea6\u3001\u9ad8\u5ea6<\/li>\n\n\n\n<li>\u63a5\u4e0b\u4f86\uff0c\u662fIcon\u8207\u6587\u5b57\u4e2d\u9593\u7684\u9593\u9694\u6c38\u9060\u9700\u4fdd\u63014pt\uff0c\u6240\u4ee5\u8a2d\u5b9a\u4e86Auto layout\uff0c\u4e26\u8abf\u6574Gap<\/li>\n\n\n\n<li>\u6700\u5f8c\uff0c\u662fIcon\u8207\u6587\u5b57\u7684\u7d44\u5408\uff0c\u6c38\u9060\u9700\u8981\u7f6e\u65bc\u6309\u9215\u7684\u6c34\u5e73\u3001\u5782\u76f4\u7f6e\u4e2d\u4f4d\u7f6e\uff0c\u56e0\u6b64\u8abf\u6574\u4e86Auto layout\u7684Alignment<\/li>\n<\/ol>\n\n\n\n<p>\u7531\u65bc\u6211\u5011\u4eba\u985e\u53ef\u4ee5\u770b\u898bUI\uff0c\u6240\u4ee5\u524d\u8ff0\u908f\u8f2f\u5e38\u88ab\u4e0b\u610f\u8b58\u5730\u7701\u7565\uff1b\u4f46\u5c0d\u65bc\u6c92\u6709\u773c\u775b\u7684\u96fb\u8166\u4f86\u8aaa\uff0c\u5c31\u9700\u8981\u7d30\u5fc3\u5730\u4e00\u500b\u500b\u5c07\u898f\u5247\u5217\u6e05\u695a\uff0c\u5b83\u624d\u77e5\u9053\u8a72\u600e\u9ebc\u505a\u3002\u7531\u6b64\u985e\u63a8\uff0c\u6bd4\u9019\u66f4\u8907\u96dc\u3001\u7cbe\u7d30\u7684UI\uff0c\u5c31\u9700\u8981\u7528\u66f4\u591a\u7684Frame+Auto layout\u4f86\u5806\u780c\uff01\u4f8b\u5982\uff1a\u8907\u6578\u500b\u6309\u9215\u7684\u6392\u5217\u3001\u8907\u6578\u500b\u5361\u7247\u7684\u5217\u8868\u2026\u2026\u5168\u90e8\u90fd\u662f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1084\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu.png\" alt=\"\" class=\"wp-image-1258\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu-300x169.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu-768x434.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu-1536x867.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-rbeu-1160x655.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">\u518d\u8907\u96dc\u7684\u7248\u9762\u90fd\u662f\u7531\u7121\u6578\u500bAuto Layout\u5806\u780c\u800c\u6210\u7684\uff01<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1085\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy.jpg\" alt=\"\u4f7f\u7528\u700f\u89bd\u5668\u7684\u958b\u767c\u8005\u5de5\u5177\uff0c\u9ede\u64ca\u4e92\u52d5\u5de5\u5177\uff0c\u89c0\u5bdf\u7db2\u9801\u5143\u7d20\u7684\u6846\u5206\u4f48\" class=\"wp-image-1255\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy-300x170.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy-768x434.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy-1536x868.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pgyy-1160x656.jpg 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">\u4f7f\u7528\u700f\u89bd\u5668\u7684\u958b\u767c\u8005\u5de5\u5177\uff0c\u9ede\u64ca\u4e92\u52d5\u5de5\u5177\uff0c\u89c0\u5bdf\u7db2\u9801\u5143\u7d20\u7684\u6846\u5206\u4f48<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u4f60\u53ef\u4ee5\u6309\u4e0bF12\u958b\u555f\u700f\u89bd\u5668\u7684\u300c\u958b\u767c\u8005\u5de5\u5177\u300d\uff0c\u63a5\u8457\u9ede\u64ca\u5de6\u4e0a\u89d2\u7684\u4e92\u52d5\u9078\u53d6\u5de5\u5177\uff0c\u89c0\u5bdf\u7db2\u9801\u662f\u5982\u4f55\u5283\u5206\u4e0d\u540c\u7684\u5bb9\u5668\u7684\uff0c\u7136\u5f8c\u4ee5\u6b64\u4f5c\u70ba\u8a2d\u8a08\u6642\u5340\u5206Frame\u7684\u4f9d\u64da\uff01\u96d6\u7136\u5169\u8005\u908f\u8f2f\u4e0d\u5b8c\u5168\u4e00\u81f4\uff0c\u4f46\u5927\u81f4\u4e0a\u662f\u76f8\u4f3c\u7684\u3002<\/p><\/div><\/div>\n\n\n\n<p>\u5982\u679c\u4f60\u5c0d\u65bcAuto layout\u4e0d\u592a\u719f\u6089\uff0c\u53ef\u4ee5\u770b\u4ee5\u4e0b\u4f86\u81eaFigma\u5b98\u65b9\u7684\u6559\u5b78\u5f71\u7247\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"A Guide to Auto Layout: Best Practices, Tips &amp; Tricks | Figma\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1odqpkfkDL8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br>\u8a73\u7d30\u7684Auto layout\u5bb9\u5668\u8207\u5b50\u5143\u7d20\u53ef\u8a2d\u5b9a\u7684\u5c6c\u6027\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p><strong>\u8a2d\u6709Auto layout\u7684Frame<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c6c\u6027<\/th><th>\u4f5c\u7528<\/th><\/tr><\/thead><tbody><tr><td>Alignment<\/td><td>\u5167\u5143\u7d20\u5c0d\u9f4a\u3002\u6c7a\u5b9a\u6846\u88e1\u982d\u7684\u5143\u7d20\uff0c\u61c9\u8a72\u8981\u5982\u4f55\u5c0d\u9f4a\u3002<\/td><\/tr><tr><td>Width<\/td><td>\u6846\u7684\u5bec\u5ea6\u3002\u53ef\u8a2d\u5b9a\u70ba\u56fa\u5b9a\u5927\u5c0f\uff08Fixed\uff09\u6216\u4f9d\u5167\u5bb9\u8b8a\u63db\u5bec\u5ea6\uff08Hug\uff09\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u53ef\u9032\u4e00\u6b65\u8a2d\u5b9aMin-width\u548cMax-width\uff0c\u9032\u4e00\u6b65\u9650\u5236\u5176\u6700\u5c0f\u3001\u6700\u5927\u5bec\u5ea6\u3002<\/td><\/tr><tr><td>Height<\/td><td>\u6846\u7684\u9ad8\u5ea6\u3002\u53ef\u8a2d\u5b9a\u70ba\u56fa\u5b9a\u5927\u5c0f\uff08Fixed\uff09\u6216\u4f9d\u5167\u5bb9\u8b8a\u63db\u9ad8\u5ea6\uff08Hug\uff09\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u53ef\u9032\u4e00\u6b65\u8a2d\u5b9aMin-height\u548cMax-height\uff0c\u9032\u4e00\u6b65\u9650\u5236\u5176\u6700\u5c0f\u3001\u6700\u5927\u9ad8\u5ea6\u3002<\/td><\/tr><tr><td>Gap<\/td><td>\u9593\u8ddd\u3002\u6846\u5167\u5143\u7d20\u5f7c\u6b64\u7684\u8ddd\u96e2\u3002<\/td><\/tr><tr><td>Padding<\/td><td>\u908a\u6846\u9593\u8ddd\u3002\u8a2d\u5b9a\u908a\u6846\u9593\u8ddd\u6703\u4f7f\u5be6\u969b\u7684\u53ef\u6392\u7248\u7bc4\u570d<strong>\u5f80\u5167\u7e2e<\/strong>\u3002<\/td><\/tr><tr><td>Clip content<\/td><td>\u8a2d\u5b9a\u7576\u5167\u5143\u7d20\u8d85\u51fa\u908a\u6846\u6642\uff0c\u662f\u5426\u8981\u986f\u793a\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Auto layout\u5167\u5143\u7d20<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c6c\u6027<\/th><th>\u4f5c\u7528<\/th><\/tr><\/thead><tbody><tr><td>Width<\/td><td>\u5143\u7d20\u7684\u5bec\u5ea6\u3002\u53ef\u8a2d\u5b9a\u70ba\u56fa\u5b9a\u5927\u5c0f\uff08Fixed\uff09\u6216\u586b\u6eff\u5bb9\u5668\uff08Fill\uff09\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u53ef\u9032\u4e00\u6b65\u8a2d\u5b9aMin-width\u548cMax-width\uff0c\u9032\u4e00\u6b65\u9650\u5236\u5176\u6700\u5c0f\u3001\u6700\u5927\u5bec\u5ea6\u3002<\/td><\/tr><tr><td>Height<\/td><td>\u5143\u7d20\u7684\u9ad8\u5ea6\u3002\u53ef\u8a2d\u5b9a\u70ba\u56fa\u5b9a\u5927\u5c0f\uff08Fixed\uff09\u6216\u586b\u6eff\u5bb9\u5668\uff08Fill\uff09\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u53ef\u9032\u4e00\u6b65\u8a2d\u5b9aMin-height\u548cMax-height\uff0c\u9032\u4e00\u6b65\u9650\u5236\u5176\u6700\u5c0f\u3001\u6700\u5927\u9ad8\u5ea6\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u203b\u5bec\u5ea6\u8207\u9ad8\u5ea6\u7684\u5224\u65b7\u7686\u70ba\u7531\u5916\u81f3\u5167\u9032\u884c\u3002Figma\u6703\u5148\u8655\u7406Auto layout\u672c\u8eab\u7684\u5bec\u9ad8\uff0c\u7136\u5f8c\u518d\u8655\u7406\u5167\u90e8\u5143\u7d20\u7684\u5bec\u9ad8\u3002<\/p>\n\n\n\n<p>\u203b\u5bec\u5ea6\u8a2d\u5b9a\u70ba\u586b\u6eff\u5bb9\u5668\u7684\u5143\u7d20\uff0c<strong>\u6703\u586b\u6eff\u6263\u9664\u5176\u9918\u5143\u7d20\u5bec\u5ea6\u53ca\u9593\u8ddd\u5f8c\u7684\u6240\u6709\u5bec\u5ea6\uff08\u4f46\u4e0d\u6703\u5c0f\u65bc\u8a2d\u5b9a\u7684min-width\u6216\u8d85\u904emax-width\uff09\u3002<\/strong>\u9ad8\u5ea6\u540c\u7406\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5c07Icon\u7d66\u300c\u6846\u300d\u8d77\u4f86<\/h2>\n\n\n\n<p>Icon\u672c\u8eab\u662f\u7531\u76f8\u5c0d\u8907\u96dc\u7684\u5411\u91cf\u5716\u6848\u7d44\u6210\uff0c\u5148\u5929\u5f62\u72c0\u3001\u5927\u5c0f\u5c31\u4e0d\u898f\u5247\uff0c\u5982\u679c\u6211\u5011\u76f4\u63a5\u5c07\u672a\u7d93\u8655\u7406\u7684Icon\u7528\u65bc\u8a2d\u8a08\u4e2d\uff0c\u5c31\u6703\u5c0d\u9593\u8ddd\u8a08\u7b97\u3001\u6392\u7248\u9020\u6210\u6df7\u4e82\u3002<\/p>\n\n\n\n<p><strong>\u6b63\u78ba\u7684\u505a\u6cd5\u662f\uff0c\u5c07Icon\u653e\u7f6e\u65bc\u4e00\u500b\u6b63\u65b9\u5f62\u7684Frame\u5167\u5f8c\u518d\u4f7f\u7528\u5b83\u3002\u5982\u6b64\u4e00\u4f86\uff0c\u7121\u8ad6Icon\u5716\u6848\u518d\u4e0d\u898f\u5f8b\uff0c\u6392\u7248\u6642\u4e5f\u53ea\u9700\u8981\u8003\u616e\u5916\u5074\u7684\u6b63\u65b9\u5f62\u6846\u5c31\u597d\u3002<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2.png\" alt=\"\u6b63\u65b9\u5f62\u3001\u5713\u5f62\u3001\u4e09\u89d2\u5f62\u4e09\u8005\u660e\u660e\u9ad8\u5ea6\u4e00\u6a23\uff0c\u4f46\u770b\u8d77\u4f86\u537b\u4e0d\u4e00\u6a23\u5927\" class=\"wp-image-1250\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-2-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">\u6b63\u65b9\u5f62\u3001\u5713\u5f62\u3001\u4e09\u89d2\u5f62\u4e09\u8005\u660e\u660e\u9ad8\u5ea6\u4e00\u6a23\uff0c\u4f46\u770b\u8d77\u4f86\u537b\u4e0d\u4e00\u6a23\u5927<\/figcaption><\/figure>\n\n\n\n<p>\u9019\u6a23\u7684\u505a\u6cd5\u4e0d\u50c5\u662f\u70ba\u4e86\u65b9\u4fbf\uff0c\u4e5f\u662f\u70ba\u4e86\u66ff\u5e73\u8861\u8996\u89ba\u91cd\u5fc3\u505a\u6e96\u5099\u3002\u8209\u500b\u6700\u7c21\u55ae\u7684\u4f8b\u5b50\uff0c\u5118\u7ba1\u4e0a\u5716\u6240\u6709\u5f62\u72c0\u7684\u5927\u5c0f\u90fd\u662f\u76f8\u540c\u7684\uff0c\u4f46\u5947\u5999\u7684\u662f\uff0c\u6b63\u65b9\u5f62\u770b\u8d77\u4f86\u5c31\u662f\u6bd4\u5713\u5f62\u9084\u5927\u4e00\u4e9b\u3001\u9084\u91cd\u4e00\u4e9b\u3002\u9047\u5230\u9019\u7a2e\u60c5\u6cc1\uff0c\u300c\u8996\u89ba\u4e0a\u7684\u4e00\u81f4\u300d\u5c31\u6bd4\u300c\u7d55\u5c0d\u7684\u7cbe\u78ba\u300d\u9084\u8981\u91cd\u8981\uff0c\u56e0\u6b64\u8981\u4e88\u4ee5\u4fee\u6b63\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/mH1U1c7ftn3PXTnp5BHd4szbpRuGxE0R8ih9tl0T5I44wXjcBrep5Kv2dii4HGDLT64-d_Dc2by31hYhg6E1h7bljBbtnWPQzUFUQfxMaYSGoA=s0\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Google Material Design\u4e2d\u6240\u63d0\u4f9b\u7684\u5f62\u72c0Keyline\u3002Source: <a href=\"https:\/\/m3.material.io\/styles\/icons\/designing-icons#ba42b061-ed66-4768-900f-9071e2649ccb\">Material Design<\/a><\/figcaption><\/figure>\n\n\n\n<p>Material Design\u7684<a href=\"https:\/\/m3.material.io\/styles\/icons\/designing-icons#ba42b061-ed66-4768-900f-9071e2649ccb\">Icon<\/a>\u9801\u9762\u4e2d\uff0c\u5373\u5b9a\u7fa9\u4e86Icon\u7684\u5916\u6846\u5c3a\u5bf8\u3001\u908a\u8ddd\uff0c\u4ee5\u53ca\u7528\u65bc\u5c0d\u61c9\u4e0a\u8ff0\u554f\u984c\u7684\u53c3\u8003\u7ddaKeyline\u3002\u9019\u4efdKeyline\u88e1\uff0c\u6b63\u65b9\u5f62\u7684\u5927\u5c0f\u5c31\u8a2d\u5b9a\u7684\u6bd4\u5713\u5f62\u9084\u5c0f\u4e00\u4e9b\uff0c\u5982\u6b64\u4e00\u4f86\uff0c\u9060\u9060\u5730\u770b\u4e0a\u53bb\u5169\u8457\u7684\u8996\u89ba\u4efd\u91cf\u5c31\u6703\u76f8\u4f3c\u3002\u5728\u7e6a\u88fdIcon\u6642\u53c3\u8003\u9019\u4e9bKeyline\uff0c\u5c31\u80fd\u8f15\u9b06\u505a\u51fa\u5354\u8abf\u7684Icon\u7d44\u5408\u3002<\/p>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u95dc\u65bcIcon\u7684\u5be6\u969b\u5916\u6846\u3001\u5167\u6846\u5206\u5225\u8981\u7528\u591a\u5927\uff0c\u8acb\u53c3\u8003\u5404\u500b\u8a2d\u8a08\u898f\u7bc4\u4e2d\u6240\u5217\u7684\u898f\u683c\uff01<\/p><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u57fa\u65bc8pt\u6578\u503c\u7684\u9593\u8ddd<\/h2>\n\n\n\n<p>\u6709\u4e86\u524d\u9762\u7684\u898f\u6574\u77e9\u5f62\u3001Frame\u57fa\u790e\u5f8c\uff0c\u63a5\u4e0b\u4f86\u6211\u5011\u5c31\u80fd\u4f86\u8ac7\u300c\u9593\u8ddd\u300d\u4e86\uff01\u5728UI\u8a2d\u8a08\u4e2d\uff0c\u4f7f\u7528\u57fa\u65bc8pt\u7684\u9593\u8ddd\u6578\u503c\uff088\/16\/24\/32\u7b49\u7b49\uff09\u53ef\u4ee5\u4f7f\u5143\u7d20\u7121\u5f62\u9593\u5f7c\u6b64\u5c0d\u9f4a\uff0c\u7522\u751f\u79e9\u5e8f\u8207\u5354\u8abf\u7684\u7f8e\uff0c\u9593\u8ddd\u7684\u5c64\u7d1a\u95dc\u4fc2\u4e5f\u66f4\u597d\u7ba1\u7406\u3002\u4f8b\u5982\uff1a\u76f8\u540c\u5c64\u7d1a\u7684\u5143\u7d20\u5f7c\u6b64\u9593\u96948pt\uff0c\u800c\u4e0d\u540c\u5c64\u7d1a\u7684\u5143\u7d20\u9593\u5f7c\u6b64\u9700\u9593\u96942\u500d\u2014\u2014\u4e5f\u5c31\u662f16pt\u3002<\/p>\n\n\n\n<p>\u5118\u7ba1\u7406\u8ad6\u4e0a\u4f86\u8aaa\uff0c\u4f60\u53ef\u4ee5\u63a1\u7528\u4efb\u4f55\u6578\u503c\u70ba\u57fa\u790e\u7684\u9593\u8ddd\u6578\u503c\u6578\u5217\uff0c\u4f46\u884c\u696d\u4e2d\u591a\u4ee58pt\u70ba\u6163\u4f8b\u3002<\/p>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u5728\u9019\u88cf\u6211\u60f3\u5411\u4f60\u4ecb\u7d39\u6211\u6240\u958b\u767c\u7684Figma\u5916\u639b\u7a0b\u5f0f<a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">Spaciiing<\/a>\u3002\u5b83\u662f\u4e00\u6b3e\u80fd\u4e00\u9375\u57fa\u65bc8pt\u6392\u5217\u5143\u7d20\u7684\u5c0f\u5de5\u5177\uff0c\u4e14\u6392\u5217\u5b8c\u6210\u5f8c\u9084\u80fd\u81ea\u52d5\u5efa\u7acb\u70baAuto layout\uff01\u611f\u8208\u8da3\u7684\u670b\u53cb\u6b61\u8fce\u53bb\u4f7f\u7528\u770b\u770b\uff01<\/p><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3.png\" alt=\"\u6211\u6240\u958b\u767c\u7684Figma\u5916\u639b\u7a0b\u5f0fSpaciiing\u3002\u5b83\u662f\u4e00\u6b3e\u80fd\u4e00\u9375\u57fa\u65bc8pt\u6392\u5217\u5143\u7d20\u7684\u5c0f\u5de5\u5177\uff0c\u4e14\u6392\u5217\u5b8c\u6210\u5f8c\u9084\u80fd\u81ea\u52d5\u5efa\u7acb\u70baAuto layout\uff01\" class=\"wp-image-1251\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-3-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u7db2\u683c<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Baseline Grids with Auto Layout\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1LbEoZbzjxk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u7576\u4f60\u8a2d\u8a08\u5230\u4e00\u534a\uff0c\u8166\u4e2d\u7a81\u7136\u5192\u51fa\uff1a\u300c\u6b38\uff0c\u9019\u500b\u5143\u7d20\u7684\u5bec\u5ea6\u6216\u9ad8\u5ea6\u5230\u5e95\u8981\u8a2d\u591a\u5c11\u624d\u5c0d\u554a\uff1f\u300d\u9019\u500b\u6642\u5019\uff0c\u6700\u597d\u7684\u89e3\u6c7a\u8fa6\u6cd5\u4fbf\u662f\u4f7f\u7528\u7db2\u683c\u7cfb\u7d71\uff01<\/p>\n\n\n\n<p>\u7db2\u683c\u7cfb\u7d71\u7684\u539f\u7406\u8207\u525b\u525b\u4ecb\u7d39\u904e\u7684\u9593\u8ddd\u539f\u7406\u76f8\u540c\uff0c\u90fd\u662f\u900f\u904e\u6578\u5b78\u4e0a\u7684\u898f\u5f8b\u4f86\u5275\u9020\u8a2d\u8a08\u7684\u5354\u8abf\u8207\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n<p><strong>\u7db2\u683c\u7cfb\u7d71\u7684\u4f7f\u7528\u65b9\u6cd5\uff0c\u901a\u5e38\u662f\u5c07\u6846\u5283\u520612\u6b04\uff0c\u7136\u5f8c\u4f9d\u6b64\u6c7a\u5b9a\u6846\u5167\u90e8\u7684\u5143\u7d20\u5bec\u5ea6\u3002<\/strong>\u800c\u7279\u610f\u5283\u5206\u70ba12\u6b04\u7684\u539f\u56e0\uff0c\u662f\u56e0\u70ba\u5b83\u53ef\u4ee5\u63d0\u4f9b1*12\u30016*2\u30013*4\u30014*3\u30012*6\u7b49\u591a\u6a23\u6392\u7248\u7d44\u5408\u3002\u4f60\u53ef\u4ee5\u81ea\u7531\u6c7a\u5b9a\u4e00\u500b\u5143\u7d20\uff0c\u8981\u4f54\u64da\u591a\u5c11\u6b04\u4f4d\u7684\u7a7a\u9593\u3002\u540c\u6642\uff0c\u4f60\u4e5f\u4e0d\u5fc5\u62d8\u6ce5\u65bc\u4e00\u5b9a\u8981\u628a\u6240\u6709\u6b04\u4f4d\u586b\u6eff\u3002\u9078\u64c7\u8b93\u5143\u7d20\u4f54\u64da7\u500b\u6b04\u4f4d\u7684\u7a7a\u9593\uff0c\u5269\u4e0b5\u500b\u6b04\u4f4d\u7559\u767d\u7684\u505a\u6cd5\u4e5f\u662f\u53ef\u884c\u7684\u3002<\/p>\n\n\n\n<p>\u53e6\u5916\u8981\u88dc\u5145\u7684\u662f\uff0c\u7db2\u683c\u96d6\u7136\u63d0\u4f9b\u4e86\u898f\u5f8b\u7684\u6392\u7248\u4f9d\u64da\uff0c\u4f46\u5982\u679c\u904e\u5ea6\u4f9d\u8cf4\u5b83\uff0c\u6574\u9ad4\u756b\u9762\u5c31\u53ef\u80fd\u8b8a\u5f97\u904e\u65bc\u5de5\u6574\u3001\u7f3a\u4e4f\u6d3b\u529b\u3002\u6240\u4ee5\u6709\u6642\u5019\uff0c\u9069\u7576\u5730\u6253\u7834\u898f\u5247\uff0c\u50cf\u662f\u8b93\u67d0\u500b\u5143\u7d20\u76f4\u63a5\u6eff\u7248\uff0c\u4e5f\u662f\u5fc5\u8981\u7684\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u5e38\u898b\u7684\u5bec\u9ad8\u6bd4\u4f8b<\/h2>\n\n\n\n<p>UI\u5143\u7d20\u7684\u5bec\u5ea6\u8207\u9ad8\u5ea6\uff0c\u53ef\u4e0d\u662f\u8a2d\u8a08\u5e2b\u60f3\u600e\u9ebc\u6a23\u5c31\u600e\u9ebc\u6a23\u3002\u4f7f\u7528\u7279\u5b9a\u7684\u5bec\u5ea6\u3001\u9ad8\u5ea6\uff0c\u9664\u4e86\u6eff\u8db3\u524d\u9762\u63d0\u5230\u7684\u9593\u8ddd\u3001\u7db2\u683c\u7b49\u6392\u7248\u4e0a\u7684\u8003\u91cf\u5916\uff0c\u4e5f\u6703\u76f4\u63a5\u5f71\u97ff\u4f7f\u7528\u8005\u7684\u64cd\u4f5c\u9ad4\u9a57\u3002<\/p>\n\n\n\n<p>\u8209\u4f8b\u4f86\u8aaa\uff0c\u5982\u679c\u4f60\u6b63\u5728\u8a2d\u8a08\u4e00\u500b\u50cfYoutube\u7684\u5f71\u97f3\u5e73\u53f0\uff0c\u628a\u5f71\u7247\u9810\u89bd\u5716\u7684\u6bd4\u4f8b\u8a2d\u70ba16:9\uff0c\u6703\u662f\u6bd4\u8f03\u660e\u667a\u7684\u9078\u64c7\u3002\u9019\u662f\u56e0\u70ba\u5927\u90e8\u5206\u7684\u5f71\u7247\u672c\u4f86\u5c31\u662f\u9019\u500b\u6bd4\u4f8b\u3002\u4f7f\u7528\u9019\u500b\u5e38\u898b\u6bd4\u4f8b\uff0c\u4e0d\u4f46\u80fd\u78ba\u4fdd\u4f7f\u7528\u8005\u770b\u5230\u5b8c\u6574\u7684\u5f71\u7247\u756b\u9762\uff0c\u4e5f\u80fd\u8b93\u5275\u4f5c\u8005\u4e0d\u7528\u984d\u5916\u88fd\u4f5c\u7279\u5225\u5c3a\u5bf8\u7684\u9810\u89bd\u5716\u3002<strong>\u9019\u5c31\u662f\u300c\u8a2d\u8a08\u300d\u8207\u300c\u5be6\u969b\u4f7f\u7528\u60c5\u5883\u300d\u4e4b\u9593\u7684\u91cd\u8981\u9023\u7d50\u3002<\/strong><\/p>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u6211\u958b\u767c\u7684<a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">Spaciiing<\/a>\u5916\u639b\u7a0b\u5f0f\u4e2d\uff0c\u6709\u5c0d\u61c9\u7684\u300c\u8abf\u6574\u5bec\u9ad8\u6bd4\u300d\u5de5\u5177\uff0c\u53ef\u4e00\u9375\u4f7f\u5143\u7d20\u81ea\u52d5\u7b26\u5408\u7279\u5b9a\u6bd4\u4f8b\uff0c\u8df3\u904e\u4ee4\u4eba\u56f0\u64fe\u7684\u8a08\u7b97\u904e\u7a0b\uff01<\/p><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4.png\" alt=\"\u6211\u958b\u767c\u7684Spaciiing\u5916\u639b\u7a0b\u5f0f\u4e2d\uff0c\u6709\u5c0d\u61c9\u7684\u300c\u8abf\u6574\u5bec\u9ad8\u6bd4\u300d\u5de5\u5177\uff0c\u53ef\u4e00\u9375\u4f7f\u5143\u7d20\u81ea\u52d5\u7b26\u5408\u7279\u5b9a\u6bd4\u4f8b\uff0c\u8df3\u904e\u4ee4\u4eba\u56f0\u64fe\u7684\u8a08\u7b97\u904e\u7a0b\uff01\" class=\"wp-image-1252\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-4-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6d3b\u7528Components<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma Components 101\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/EoJolbaEQi8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u5728\u8a2d\u8a08UI\u6642\uff0c\u4f60\u6703\u767c\u73fe\u6709\u8a31\u591a\u5143\u7d20\u662f\u53cd\u8986\u51fa\u73fe\u3001\u4f7f\u7528\u7684\uff0c\u4f8b\u5982\u9801\u9762\u9802\u90e8\u7684\u5c0e\u89bd\u5217\u3001\u6309\u9215\u3001\u5361\u7247\u3001\u9078\u9805\u3001\u5217\u8868\u2026\u2026\u7b49\u7b49\u3002\u4ee5\u300c\u6309\u9215\u300d\u70ba\u4f8b\uff0c\u5982\u679c\u6709\u4e00\u5929\uff0c\u4f60\u60f3\u8981\u4fee\u6539\u6309\u9215\u7684\u984f\u8272\uff0c\u4f46\u9019\u4e9b\u6309\u9215\u5df2\u7d93\u6563\u4f48\u65bc\u4e0a\u767e\u500b\u756b\u9762\u4e2d\u4e86\uff0c\u8a72\u600e\u9ebc\u8fa6\uff1f\u96e3\u9053\u5c31\u53ea\u80fd\u4e00\u500b\u500b\u624b\u52d5\u4fee\u6539\u8a2d\u8a08\u7a3f\u4e2d\u7684\u6240\u6709\u6309\u9215\u55ce\uff1f<\/p>\n\n\n\n<p><strong>\u8981\u907f\u514d\u9047\u4e0a\u9019\u6a23\u7684\u9ebb\u7169\uff0c\u6700\u597d\u7684\u65b9\u6cd5\u4fbf\u662f\u5f9e\u4e00\u958b\u59cb\u5c31\u5584\u7528Figma\u7684\u5143\u4ef6\uff08Component\uff09\u529f\u80fd\u3002<\/strong><\/p>\n\n\n\n<p>\u5c07\u6309\u9215\u7b49\u9ad8\u983b\u7387\u4f7f\u7528\u7684\u5143\u7d20\u5efa\u7acb\u70ba\u5143\u4ef6\u4ee5\u5f8c\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728\u8a2d\u8a08\u6642\u5f9e\u5143\u4ef6\u8907\u88fd\u51fa\u5b83\u5011\u7684\u300c\u5206\u8eab\uff08\u5be6\u4f8bInstance\uff09\u300d\u3002\u9019\u4e9b\u5206\u8eab\u7684\u5916\u89c0\u3001\u5167\u5bb9\u9810\u8a2d\u90fd\u548c\u672c\u9ad4\u5b8c\u5168\u76f8\u540c\uff0c\u4f46\u4f60\u4e5f\u53ef\u4ee5\u4f9d\u9700\u8981\u518d\u52a0\u4ee5\u7de8\u8f2f\uff0c\u50cf\u662f\u6539\u52d5\u6309\u9215\u7684\u6587\u5b57\u3002\u7576\u672c\u9ad4\u7684\u6a23\u5f0f\u767c\u751f\u8b8a\u52d5\u6642\uff0c\u8b8a\u66f4\u6703\u81ea\u52d5\u5957\u7528\u5728\u6240\u6709\u5206\u8eab\u4e0a\uff1b\u800c\u5206\u8eab\u4e0a\u7684\u8b8a\u52d5\uff0c\u5247\u4e0d\u6703\u5f71\u97ff\u672c\u9ad4\u3002\u5982\u6b64\u4e00\u4f86\uff0c\u5c31\u80fd\u66f4\u52a0\u8f15\u9b06\u5730\u7dad\u6301\u8a2d\u8a08\u7684\u4e00\u81f4\u6027\u3001\u63d0\u5347\u6548\u7387\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma tutorial: Component properties\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/iIq8FLt1hUY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>\u9664\u6b64\u4e4b\u5916\uff0c\u5143\u4ef6\u9084\u80fd\u9032\u4e00\u6b65\u8a2d\u5b9a\u8b8a\u9ad4\uff08Variant\uff09\u548c\u5c6c\u6027\uff08Property\uff09\uff0c\u65b9\u4fbf\u4f60\u70ba\u540c\u500b\u5143\u4ef6\u88fd\u4f5c\u591a\u7a2e\u8b8a\u5316\u3002<\/strong>\u8209\u4f8b\u4f86\u8aaa\uff0c\u4f60\u53ef\u4ee5\u70ba\u300cButton\u300d\u5143\u4ef6\u88fd\u4f5c\u5927\u3001\u4e2d\u3001\u5c0f\u4e09\u7a2e\u8b8a\u9ad4\uff0c\u4ee5\u61c9\u5c0d\u4e0d\u540c\u4f7f\u7528\u60c5\u5883\u3002\u8207\u6b64\u540c\u6642\uff0cFigma\u6703\u81ea\u52d5\u5efa\u7acb\u4e00\u500b\u5c6c\u6027\uff08\u9810\u8a2d\u540d\u7a31\u70baProperty 1\uff09\uff0c\u4f86\u5340\u5206\u9019\u4e9b\u8b8a\u9ad4\u7684\u5dee\u7570\u3002\u7531\u65bc\u9019\u4e09\u7a2e\u8b8a\u9ad4\u7684\u4e3b\u8981\u5dee\u5225\u5728\u65bc\u5927\u5c0f\uff0c\u6240\u4ee5\u5c07\u5c6c\u6027\u540d\u7a31\u6539\u70ba\u300cSize\u300d\u6703\u66f4\u52a0\u9069\u5408\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1085\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha.png\" alt=\"\u5efa\u7acb\u6309\u9215\u6642\uff0c\u5340\u5206\u6309\u9215Variant\u4e0d\u540c\u7684\u5c6c\u6027\u9069\u5408\u547d\u540d\u70baSize\" class=\"wp-image-1256\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha-300x170.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha-768x434.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha-1536x868.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/scr-20250402-pwha-1160x656.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">\u5efa\u7acb\u6309\u9215\u6642\uff0c\u5340\u5206\u6309\u9215Variant\u4e0d\u540c\u7684\u5c6c\u6027\u9069\u5408\u547d\u540d\u70baSize<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u5177\u908f\u8f2f\u3001\u4e00\u81f4\u7684\u5716\u5c64\u547d\u540d\u898f\u5247<\/h2>\n\n\n\n<p>\u9810\u8a2d\u60c5\u6cc1\u4e0b\uff0cFigma \u7684\u5716\u5c64\u547d\u540d\u683c\u5f0f\u901a\u5e38\u662f\u300c\u5716\u5c64\u985e\u578b + \u6578\u5b57\u300d\uff0c\u4f8b\u5982 \u300cRectangle 1\u300d\u300cText 3\u300d\u3002\u4e0d\u96e3\u60f3\u50cf\uff0c\u7576\u5716\u5c64\u4e00\u591a\u7684\u6642\u5019\uff0c\u9019\u7a2e\u547d\u540d\u65b9\u5f0f\u6703\u8b93\u4f60\u5f88\u96e3\u5feb\u901f\u627e\u5230\u9700\u8981\u7684\u5167\u5bb9\u3002\u56e0\u6b64\uff0c\u70ba\u5716\u5c64\u53d6\u4e00\u500b<strong>\u6709\u610f\u7fa9\u7684\u540d\u7a31<\/strong>\uff08\u5982 ProfileCard\u3001Header \u7b49\uff09\u4e0d\u50c5\u53ef\u4ee5\u5e6b\u52a9\u81ea\u5df1\u7406\u6e05\u8a2d\u8a08\u67b6\u69cb\uff0c\u4e5f\u80fd\u8b93\u5718\u968a\u6210\u54e1\u66f4\u5bb9\u6613\u7406\u89e3\u8207\u6e9d\u901a\u3002<\/p>\n\n\n\n<p>\u6b64\u5916\uff0c\u6709\u4e9b\u5718\u968a\u53ef\u80fd\u6703\u501f\u9451\u7a0b\u5f0f\u78bc\u7684\u547d\u540d\u7fd2\u6163\uff0c\u4f7f\u7528\u7d71\u4e00\u7684\u683c\u5f0f\u4f86\u547d\u540d\u5716\u5c64\uff0c\u5982\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u540d\u7a31<\/th><th>\u8aaa\u660e<\/th><th>\u7bc4\u4f8b<\/th><\/tr><\/thead><tbody><tr><td>\u99dd\u5cf0\u547d\u540d\u6cd5CamelCase<\/td><td>\u7b2c\u4e00\u500b\u55ae\u5b57\u5b57\u6bcd\u5c0f\u5beb\uff0c\u5f8c\u9762\u7684\u6bcf\u500b\u55ae\u5b57\u9996\u5b57\u6bcd\u5927\u5beb\uff0c\u4e2d\u9593\u4e0d\u52a0\u7a7a\u683c\u6216\u5e95\u7dda\u3002\u770b\u8d77\u4f86\u5c31\u50cf\u99f1\u99dd\u7684\u80cc\u6709\u51f8\u8d77\u4e00\u6a23\uff0c\u56e0\u800c\u5f97\u540d\u3002<\/td><td>profileCard\u3001mainHeader<\/td><\/tr><tr><td>PascalCase<\/td><td>\u7b2c\u4e00\u500b\u55ae\u5b57\u5b57\u6bcd\u5927\u5beb\uff0c\u5f8c\u9762\u7684\u6bcf\u500b\u55ae\u5b57\u9996\u5b57\u6bcd\u5927\u5beb\uff0c\u4e2d\u9593\u4e0d\u52a0\u7a7a\u683c\u6216\u5e95\u7dda\u3002<\/td><td>ProfileCard\u3001MainHeader<\/td><\/tr><tr><td>\u86c7\u5e95\u7dda\u547d\u540d\u6cd5 snake_case<\/td><td>\u6240\u6709\u5b57\u6bcd\u5c0f\u5beb\uff0c\u55ae\u5b57\u4e4b\u9593\u7528\u5e95\u7dda _ \u5206\u9694<\/td><td>profile_card\u3001main_header<\/td><\/tr><tr><td>\u4e2d\u7dda\u547d\u540d\u6cd5kebab-case<\/td><td>\u6240\u6709\u5b57\u6bcd\u5c0f\u5beb\uff0c\u55ae\u5b57\u4e4b\u9593\u7528\u4e2d\u7dda &#8211; \u5206\u9694<\/td><td>profile-card\u3001main-header<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u800c\u5728\u8868\u9054Frame\u5c64\u7d1a\u95dc\u4fc2\u4e0a\uff0c\u4ee5\u4e0b\u662f\u8f03\u70ba\u5e38\u898b\u7684\u505a\u6cd5\uff0c\u4f46\u5177\u9ad4\u7684\u547d\u540d\u65b9\u5f0f\u4ecd\u56e0\u5718\u968a\u800c\u7570\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u540d\u7a31<\/th><th>\u7bc4\u4f8b<\/th><\/tr><\/thead><tbody><tr><td>\u4f7f\u7528\u5e95\u7dda\u5340\u9694<\/td><td>Home\u3001Home_Product\u3001Home_Product_ProductDetail<\/td><\/tr><tr><td>\u4f7f\u7528\u659c\u7dda\u5340\u9694<\/td><td>Home\u3001Home\/Product\u3001Home\/Product\/ProductDetail<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u8f38\u51fa\u4ee5\u659c\u7dda\u5340\u9694\u505a\u547d\u540d\u7684Frame\u6642\uff0cFigma\u6703\u5efa\u7acb\u591a\u5c64\u8cc7\u6599\u593e\uff08\u5047\u8a2d\u8f38\u51faHome\/Product\/ProductDetail\u9019\u500bFrame\uff0cFigma\u6703\u5efa\u7acbHome\u2192Product\u96d9\u5c64\u8cc7\u6599\u593e\uff0c\u7136\u5f8c\u6700\u88e1\u982d\u624d\u6703\u662f\u540d\u70baProductDetail\u7684\u6a94\u6848\uff09\u3002<\/strong><\/p>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u6211\u958b\u767c\u7684<a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">Spaciiing<\/a>\u5916\u639b\u7a0b\u5f0f\u4e2d\u6709\u540d\u70ba\u300c\u6e05\u7406\u5716\u5c64\u540d\u7a31\u300d\u7684\u5de5\u5177\uff0c\u53ef\u4e00\u9375\u6e05\u7406\u7e41\u8907\u7684\u5716\u5c64\u540d\u7a31\u3001\u6a19\u8a3bAuto layout\u65b9\u5411\uff01<\/p><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5.png\" alt=\"\u6211\u958b\u767c\u7684Spaciiing\u5916\u639b\u7a0b\u5f0f\u4e2d\u6709\u540d\u70ba\u300c\u6e05\u7406\u5716\u5c64\u540d\u7a31\u300d\u7684\u5de5\u5177\uff0c\u53ef\u4e00\u9375\u6e05\u7406\u7e41\u8907\u7684\u5716\u5c64\u540d\u7a31\u3001\u6a19\u8a3bAuto layout\u65b9\u5411\uff01\" class=\"wp-image-1253\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-5-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5efa\u7acb\u5177\u6709\u67b6\u69cb\u7684variables<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma tutorial: Intro to variables\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1ONxxlJnvdM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Variables\u662f\u7ba1\u7406\u8a2d\u8a08\u7a3f\u4e2d\u7684\u8272\u5f69\u3001\u6578\u503c\u7684\u6700\u597d\u65b9\u5f0f\u3002\u4f46\u6b63\u56e0\u70bavaraibles\u7cfb\u7d71\u76f8\u7576\u5730\u8907\u96dc\uff0c\u6240\u4ee5\u8a31\u591a\u521d\u5b78\u8005\u4e26\u672a\u80fd\u6b63\u78ba\u5730\u5efa\u7acbvariables\u67b6\u69cb\u3001\u5f9e\u4e2d\u7372\u76ca\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u4f86\u8aaa\uff0cvariables\u4f9d\u7167\u5c64\u7d1a\u53ef\u5340\u5206\u70ba\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u985e\u578b<\/th><th>\u8aaa\u660e<\/th><th>\u5c64\u7d1a<\/th><\/tr><\/thead><tbody><tr><td>\u57fa\u790e\u578b<\/td><td>\u81ea\u8eab\u6578\u503c\uff1d\u67d0\u500b\u503c\uff08\u5982\u8272\u78bc\u3001\u6578\u5b57\uff09\uff0c\u901a\u5e38\u4e0d\u6703\u76f4\u63a5\u4f7f\u7528<\/td><td>\u6700\u4f4e<\/td><\/tr><tr><td>\u7d22\u5f15\u578b<\/td><td>\u81ea\u8eab\u6578\u503c\uff1d\u67d0\u500b\u57fa\u790e\u578b\/\u7d22\u5f15\u578bvariable\u3002\u4e00\u822c\u7528\u5728\u8a2d\u8a08\u7a3f\u4e2dvariable\u7684\u90fd\u662f\u9019\u985e\u578b\u3002\u4f7f\u7528\u6642Figma\u6703\u6301\u7e8c\u56de\u63a8\u7d22\u5f15\uff0c\u76f4\u5230\u7372\u53d6\u5177\u9ad4\u7684\u8272\u78bc\u3001\u6578\u5b57<\/td><td>\u9ad8<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u63a5\u8457\uff0c\u4f60\u6703\u9700\u8981\u4f7f\u7528Collections\u4f86\u7ba1\u7406\u9019\u4e9bVariables\u3002\u6700\u57fa\u672c\u7684\u60c5\u6cc1\u4e0b\uff0c\u4f60\u81f3\u5c11\u9700\u8981\u5404\u4e00\u500bCollection\u4f86\u5206\u5225\u7ba1\u7406\u57fa\u790e\u578b\u3001\u7d22\u5f15\u578bvariable\u3002\u63a8\u85a6\u4f60\u5c07\u7ba1\u7406\u57fa\u790e\u578bvariable\u7684collection\u547d\u540d\u70ba\u300cPrimitive\u300d\uff1b\u800c\u7ba1\u7406\u7d22\u5f15\u578b\u7684\u5247\u547d\u540d\u70ba\u300cSemantic\u300d\u3002\u6709\u4e86\u9019\u500b\u67b6\u69cb\u5f8c\uff0c\u4f60\u5c31\u80fd\u76e1\u60c5\u5730\u5728\u8a2d\u8a08\u4e2d\u4f7f\u7528variables\u5566\uff01<\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u60f3\u77e5\u9053\u66f4\u591a\u95dc\u65bcVariables\u662f\u4ec0\u9ebc\u3001\u5982\u4f55\u4f7f\u7528\uff0c\u53ef\u4ee5\u53c3\u8003<a href=\"https:\/\/m3.material.io\/foundations\/design-tokens\/overview\">Google Material Design\u7684\u6587\u7ae0<\/a>\uff08\u6587\u4e2d\u5c07Variables\u7a31\u4f5cTokens\uff09\u3002<\/p>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u6709\u95dcCollection\u7684\u67b6\u69cb\u5efa\u7acb\u3001\u547d\u540d\u5be6\u969b\u4e0a\u4f9d\u5404\u8a2d\u8a08\u898f\u7bc4\u6709\u4e9b\u5fae\u5dee\u7570\uff0c\u672c\u6587\u4e2d\u63d0\u4f9b\u7684\u662f\u4f9b\u65b0\u624b\u4e0a\u624b\u7528\u7684\u57fa\u790e\u7248\u672c\u3002<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u6211\u958b\u767c\u7684<a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">Spaciiing<\/a>\u5916\u639b\u7a0b\u5f0f\u4e2d\u7684\u300c\u9810\u8a2d\u6a23\u5f0f\u5eab\u300d\uff0c\u53ef\u4ee5\u5e6b\u4f60\u4e00\u9375\u532f\u5165\u4f86\u81ea\u773e\u591a\u77e5\u540d\u7cfb\u7d71\u7684Variables\uff01<\/p><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u59a5\u5584\u547d\u540dVariables<\/h2>\n\n\n\n<p><strong>\u6b63\u5982\u5716\u5c64\u3001Frame\u9700\u8981\u6e05\u6670\u4e14\u8868\u610f\u7684\u547d\u540d\uff0cVariables\u4e5f\u540c\u6a23\u9700\u8981\u3002Variables\u7684\u5e38\u898b\u547d\u540d\u898f\u5247\u8207\u524d\u6bb5\u4ecb\u7d39\u7684\u5b8c\u5168\u76f8\u540c\uff0c\u4e14\u4f7f\u7528\u300c\/\u300d\u7b26\u865f\u5206\u9694\u6642\uff0cFigma\u4e5f\u6703\u81ea\u52d5\u5efa\u7acb\u985e\u4f3c\u8cc7\u6599\u593e\u7684\u67b6\u69cb\u3002<\/strong><\/p>\n\n\n\n<p>\u9664\u6b64\u4e4b\u5916\uff0c\u8003\u616e\u76ee\u6a19\u5e73\u53f0\u7684\u6163\u7528\u547d\u540d\u898f\u5247\u4f86\u547d\u540d\u4e5f\u662f\u53ef\u884c\u7684\u505a\u6cd5\u4e4b\u4e00\u3002\u4f8b\u5982\u5728\u6c7a\u5b9a\u7db2\u9801\u5916\u8868\u7684CSS\u7a0b\u5f0f\u78bc\u4e2d\uff0c\u5c31\u898f\u5b9a\u8981\u4f7f\u7528\u4e2d\u7dda\u547d\u540d\u6cd5\uff1b\u800cApp\u7aef\u5247\u591a\u63a1\u7528\u99dd\u5cf0\u547d\u540d\u6cd5\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#1e1e1e\"><span style=\"background:#c7c7c7;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#1e1e1e\">CSS<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/*\u5b9a\u7fa9CSS\u8b8a\u6578*\/\n--red-50: #fef2f2;\n--red-100: #fee2e2;\n--red-200: #fecaca;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/*\u5b9a\u7fa9CSS\u8b8a\u6578*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">--red-50: <\/span><span style=\"color: #F44747\">#fef2f2;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">--red-100: <\/span><span style=\"color: #F44747\">#fee2e2;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">--red-200: <\/span><span style=\"color: #F44747\">#fecaca;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><br>\u6e96\u5099\u6a23\u5f0f\u6587\u4ef6\uff0c\u96a8\u6642\u8a55\u4f30\u7279\u5b9a\u6a23\u5f0f\u7684\u5b58\u5728\u5fc5\u8981\u6027<\/h2>\n\n\n\n<p>\u4fd7\u8a71\u8aaa\uff1a\u300c\u5c11\u5373\u662f\u591a\u300d\u3002\u8a2d\u8a08\u7684\u7cbe\u5999\u4e4b\u8655\uff0c\u5728\u65bc\u904b\u7528\u6700\u5c11\u7684\u898f\u5247\u3001\u898f\u5283\uff0c\u9069\u61c9\u6700\u591a\u7684\u60c5\u6cc1\u3002Figma\u4e2d\u7684Styles\u3001Variables\uff0c\u4e5f\u540c\u6a23\u9069\u7528\u9019\u500b\u898f\u5247\u3002\u96a8\u8457\u8a2d\u8a08\u7684\u4e0d\u65b7\u8fed\u4ee3\uff0c\u4e0d\u65b7\u8a55\u4f30\u3001\u6dd8\u6c70\u3001\u5408\u4f75\u6a23\u5f0f\uff0c\u624d\u80fd\u4f7f\u8a2d\u8a08\u6975\u81f4\u5730\u7cbe\u934a\u3002<\/p>\n\n\n\n<p>\u56e0\u6b64\uff0c\u63a8\u85a6\u4f60\u5c07\u6240\u6709\u7528\u5230\u7684\u6a23\u5f0f\u53ca\u5176\u5c0d\u61c9\u7684\u6578\u503c\u5217\u51fa\u3001\u6574\u7406\u6210\u4e00\u4efd\u6587\u4ef6\uff0c\u5982\u6b64\u4fbf\u80fd\u8996\u89ba\u5316\u5730\u8a55\u4f30\u6a23\u5f0f\u662f\u5426\u6709\u5b58\u5728\u7684\u5fc5\u8981\u3002<\/p>\n\n\n\n<p>\u95dc\u65bc\u88fd\u4f5c\u6a23\u5f0f\u6587\u4ef6\u7684\u7d30\u7bc0\uff0c\u5177\u9ad4\u53ef\u53c3\u8003\u6211\u5beb\u7684\u9019\u7bc7\u6587\u7ae0\uff1a<\/p>\n\n\n<div class=\"vlp-link-container vlp-layout-cy-spotlight-1 wp-block-visual-link-preview-link\"><a href=\"https:\/\/hsiehchengyi.com\/ja\/blog\/essential-tips-for-building-style-guides-in-figma-tw\/\" class=\"vlp-link\" title=\"\u88fd\u4f5cFigma\u6a23\u5f0f\u6587\u4ef6\u7684\u5fc5\u8981\u8a23\u7ac5\"><\/a><div class=\"vlp-layout-zone-side\"><div class=\"vlp-block-3 vlp-link-image\"><img loading=\"lazy\" decoding=\"async\" style=\"max-width: 300px;\" width=\"300\" height=\"169\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover-300x169.jpg\" class=\"attachment-medium size-medium\" alt=\"\u88fd\u4f5cFigma\u6a23\u5f0f\u6587\u4ef6\u7684\u5fc5\u8981\u8a23\u7ac5\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover-300x169.jpg 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover-768x432.jpg 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover.jpg 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover-1536x864.jpg 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/02\/essential-tips-for-building-style-guides-in-figma-tw-cover-1160x653.jpg 1160w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/div><\/div><div class=\"vlp-layout-zone-main\"><div class=\"vlp-block-0 vlp-link-title\">\u88fd\u4f5cFigma\u6a23\u5f0f\u6587\u4ef6\u7684\u5fc5\u8981\u8a23\u7ac5<\/div><div class=\"vlp-block-1 vlp-link-summary\">\u6a23\u5f0f\u6587\u4ef6(Style guides)\u662f\u7528\u4f86\u898f\u7bc4\u8a2d\u8a08\u7cfb\u7d71\u5404\u500b\u5143\u7d20\u7684\u6587\u4ef6\uff0c\u7121\u8ad6\u662f\u6b63\u5f0f\u6216\u975e\u6b63\u5f0f\u7684\uff0c\u90fd\u6703\u6db5\u84cb\u984f\u8272\u3001\u5b57\u9ad4\u3001\u6548\u679c\u7b49\u7d30\u7bc0\u3002\u5236\u5b9a\u6a23\u5f0f\u6587\u4ef6\u80fd\u5920\u78ba\u4fdd\u8a2d\u8a08\u7684\u54c1\u8cea\u8207\u4e00\u81f4\u6027\uff0c\u63d0\u4f9b\u5718\u968a\u53ef\u53c3\u7167\u7684\u8a2d\u8a08\u6a19\u6e96\uff0c\u9032\u800c\u52a0\u901f\u8a2d [&hellip;]<\/div><div class=\"vlp-block-2 vlp-link-url\">hsiehchengyi.com<\/div><\/div><\/div>\n\n\n<div class=\"wp-block-ourplugin-chengyi-callout callout callout-emoji display-flex-row\"><p class=\"ele-emoji\">\ud83d\udc81\u200d\u2642\ufe0f<\/p><div class=\"ele-wrap\"><p>\u6211\u958b\u767c\u7684<a href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">Spaciiing<\/a>\u5916\u639b\u7a0b\u5f0f\u4e2d\u7684\u300c\u578b\u9304\u300d\u529f\u80fd\uff0c\u53ef\u4ee5\u5e6b\u4f60\u4e00\u9375\u88fd\u4f5c\u6a23\u5f0f\u6587\u4ef6\uff01<\/p><\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1440\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6.png\" alt=\"\u6211\u958b\u767c\u7684Spaciiing\u5916\u639b\u7a0b\u5f0f\u4e2d\u7684\u300c\u578b\u9304\u300d\u529f\u80fd\uff0c\u53ef\u4ee5\u5e6b\u4f60\u4e00\u9375\u88fd\u4f5c\u6a23\u5f0f\u6587\u4ef6\uff01\" class=\"wp-image-1254\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6-300x225.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6-768x576.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6-1536x1152.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/exclusive-tips-ep5-6-880x660.png 880w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u8b93Spaciiing\u5e6b\u4f60\u8f15\u9b06\u9081\u5411\u5c08\u696d<\/h2>\n\n\n\n<p><strong>\u672c\u6587\u6240\u63d0\u53ca\u7684\u773e\u591a\u8981\u8a23\u4e2d\uff0c\u5176\u5be6\u7d55\u5927\u591a\u6578\u90fd\u53ea\u9700\u8981\u4e00\u9ede\u9ede\u7684\u77e5\u8b58\uff0c\u4f46\u57f7\u884c\u8d77\u4f86\uff0c\u537b\u4ef0\u8cf4\u6975\u5927\u7684\u6bc5\u529b\u8207\u7d30\u5fc3\u3002\u904b\u7528\u6211\u6240\u958b\u767c\u7684Figma\u5916\u639b\u7a0b\u5f0fSpaciiing\uff0c\u4f60\u5c31\u80fd\u6bd4\u5225\u4eba\u7528\u66f4\u5c11\u7684\u6642\u9593\uff0c\u7372\u5f97\u66f4\u597d\u7684\u6210\u679c\u3002<\/strong><\/p>\n\n\n\n<p>\u6bcf\u6708\u53ea\u9700$3\u7f8e\u5143\uff0c\u5373\u53ef\u7121\u9650\u5236\u4f7f\u752810\u7a2e\u4ee5\u4e0a\u53ef\u5927\u5e45\u63d0\u5347\u6548\u7387\u7684\u5de5\u5177\uff0c\u5305\u542b\u6587\u4e2d\u7528\u5230\u7684 \u6e05\u7406\u5716\u5c64\u540d\u7a31\u3001\u7cbe\u6e96\u8a2d\u5b9a\u9593\u8ddd\u3001\u578b\u9304\u3001\u8a2d\u5b9a\u5bec\u9ad8\u6bd4\u2026\u2026\u7b49\u7b49\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u9084\u5305\u542b\u4e86\u6bcf\u65e5\u7e6a\u88fd\u6d41\u7a0b\u5716\u5fc5\u5099\u7684\u300c\u756b\u7bad\u982d\u300d\u529f\u80fd\u4e5f\u5305\u542b\u5728\u5167\u3002\u4e00\u6b3e\u7a0b\u5f0f\u5c31\u80fd\u7701\u4e0b\u55ae\u7368\u8cfc\u8cb710\u7a2e\u5916\u639b\u7a0b\u5f0f\u7684\u9322\uff0c\u6beb\u7121\u7591\u554f\u5212\u7b97\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover.png\" alt=\"\u737b\u7d66UIUX\u8a2d\u8a08\u5e2b\u7684\u591a\u5408\u4e00Figma plugin\uff01Spaciiing\u4e00\u500b\u62b5\u5341\u500b\uff0c\u6392\u9593\u8ddd\u3001\u756b\u7bad\u982d\u90fd\u80fd\u4e00\u9375\u641e\u5b9a\uff01\" class=\"wp-image-1224\" srcset=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover.png 1920w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover-300x169.png 300w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover-768x432.png 768w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover-1536x864.png 1536w, https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/03\/introducing-spaciiing-tw-cover-1160x653.png 1160w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.figma.com\/community\/plugin\/1129646367083296027\/spaciiing-more-than-10-editing-tools-in-one-more-than-10-editing-tools-in-one\">\u4e86\u89e3Spaciiing\u7684\u6240\u6709\u529f\u80fd<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hsiehchengyi.gumroad.com\/l\/spaciiing-pro\">\u7acb\u5373\u8a02\u95b1Spaciiing<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":1248,"comment_status":"closed","ping_status":"closed","template":"","blog_category":[29],"blog_tags":[39],"class_list":["post-1257","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-exclusive-design-tips","blog_tags-uiux-bootcamp"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hsiehchengyi.com\/ja\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"og:description\" content=\"\u512a\u79c0\u7684UI\u8a2d\u8a08\u7a3f\uff0c\u5176\u50f9\u503c\u4e0d\u50c5\u5728\u65bc\u83ef\u9e97\u7684\u5916\u8868\uff0c\u66f4\u9ad4\u73fe\u65bc\u80cc\u5f8c\u6240\u50b3\u9054\u7684\u4e00\u81f4\u6027\u3001\u908f\u8f2f\u8207\u7e1d\u5bc6\u6c7a\u7b56\u3002\u900f\u904e\u9019\u7bc7\u6587\u7ae0\uff0c\u4f60\u5c07\u80fd\u8df3\u812b\u4e00\u6627\u805a\u7126\u65bc\u8edf\u9ad4\u64cd\u4f5c\u4e0a\u7684\u7aa0\u81fc\u3001\u5feb\u901f\u5730\u8a8d\u8b58\u5e38\u898b\u7684\u65b0\u624b\u8aa4\u5340\u53ca\u80cc\u5f8c\u8207\u4e4b\u9023\u7d50\u7684\u91cd\u8981\u89c0\u5ff5\uff0c\u671d\u66f4\u5c08\u696d\u7684UI\u8a2d\u8a08\u9081\u9032\u3002 \u203b\u672c [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hsiehchengyi.com\/ja\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/\" \/>\n<meta property=\"og:site_name\" content=\"Hsieh Cheng Yi | UIUX Designer\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-25T12:19:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/\",\"name\":\"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/cover-common-mistakes-to-avoid-as-a-figma-novice.png\",\"datePublished\":\"2025-04-09T05:00:00+00:00\",\"dateModified\":\"2025-09-25T12:19:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/cover-common-mistakes-to-avoid-as-a-figma-novice.png\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/cover-common-mistakes-to-avoid-as-a-figma-novice.png\",\"width\":1920,\"height\":1080,\"caption\":\"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/blog\\\/common-mistakes-to-avoid-as-a-figma-novice\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/\",\"name\":\"Hsieh Cheng Yi | UIUX Designer\",\"description\":\"\u64c1\u62b1\u8a2d\u8a08\u8207\u958b\u767c\u96d9\u8996\u89d2\u7684\u8a2d\u8a08\u5e2b\",\"publisher\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/ja\\\/#\\\/schema\\\/person\\\/5985c00aa7e87f949a42bda6b6a4b214\",\"name\":\"Hsieh Cheng-Yi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"url\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"contentUrl\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\",\"width\":512,\"height\":512,\"caption\":\"Hsieh Cheng-Yi\"},\"logo\":{\"@id\":\"https:\\\/\\\/hsiehchengyi.com\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/profile-square.jpg\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hsiehchengyi.com\/ja\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/","og_locale":"ja_JP","og_type":"article","og_title":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer","og_description":"\u512a\u79c0\u7684UI\u8a2d\u8a08\u7a3f\uff0c\u5176\u50f9\u503c\u4e0d\u50c5\u5728\u65bc\u83ef\u9e97\u7684\u5916\u8868\uff0c\u66f4\u9ad4\u73fe\u65bc\u80cc\u5f8c\u6240\u50b3\u9054\u7684\u4e00\u81f4\u6027\u3001\u908f\u8f2f\u8207\u7e1d\u5bc6\u6c7a\u7b56\u3002\u900f\u904e\u9019\u7bc7\u6587\u7ae0\uff0c\u4f60\u5c07\u80fd\u8df3\u812b\u4e00\u6627\u805a\u7126\u65bc\u8edf\u9ad4\u64cd\u4f5c\u4e0a\u7684\u7aa0\u81fc\u3001\u5feb\u901f\u5730\u8a8d\u8b58\u5e38\u898b\u7684\u65b0\u624b\u8aa4\u5340\u53ca\u80cc\u5f8c\u8207\u4e4b\u9023\u7d50\u7684\u91cd\u8981\u89c0\u5ff5\uff0c\u671d\u66f4\u5c08\u696d\u7684UI\u8a2d\u8a08\u9081\u9032\u3002 \u203b\u672c [&hellip;]","og_url":"https:\/\/hsiehchengyi.com\/ja\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/","og_site_name":"Hsieh Cheng Yi | UIUX Designer","article_modified_time":"2025-09-25T12:19:42+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"1\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/","url":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/","name":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0 - Hsieh Cheng Yi | UIUX Designer","isPartOf":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/#primaryimage"},"image":{"@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/#primaryimage"},"thumbnailUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png","datePublished":"2025-04-09T05:00:00+00:00","dateModified":"2025-09-25T12:19:42+00:00","breadcrumb":{"@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/#primaryimage","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/04\/cover-common-mistakes-to-avoid-as-a-figma-novice.png","width":1920,"height":1080,"caption":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0"},{"@type":"BreadcrumbList","@id":"https:\/\/hsiehchengyi.com\/blog\/common-mistakes-to-avoid-as-a-figma-novice\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/hsiehchengyi.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/hsiehchengyi.com\/ja\/blog\/"},{"@type":"ListItem","position":3,"name":"\u4e0d\u518d\u7576Figma\u65b0\u624b\uff1a\u8b93UI\u8a2d\u8a08\u7a3f\u66f4\u52a0\u5c08\u696d\u7684\u5fc5\u8981\u7d30\u7bc0"}]},{"@type":"WebSite","@id":"https:\/\/hsiehchengyi.com\/ja\/#website","url":"https:\/\/hsiehchengyi.com\/ja\/","name":"Hsieh Cheng Yi | UIUX Designer","description":"\u30c7\u30b6\u30a4\u30f3\u3068\u958b\u767a\u306e\u30c0\u30d6\u30eb\u8996\u70b9\u3092\u6301\u3064\u30c7\u30b6\u30a4\u30ca\u30fc","publisher":{"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hsiehchengyi.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":["Person","Organization"],"@id":"https:\/\/hsiehchengyi.com\/ja\/#\/schema\/person\/5985c00aa7e87f949a42bda6b6a4b214","name":"Hsieh Cheng-Yi","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","url":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","contentUrl":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg","width":512,"height":512,"caption":"Hsieh Cheng-Yi"},"logo":{"@id":"https:\/\/hsiehchengyi.com\/wp-content\/uploads\/2025\/09\/profile-square.jpg"}}]}},"_links":{"self":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog\/1257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/types\/blog"}],"replies":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/comments?post=1257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media\/1248"}],"wp:attachment":[{"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/media?parent=1257"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_category?post=1257"},{"taxonomy":"blog_tags","embeddable":true,"href":"https:\/\/hsiehchengyi.com\/ja\/wp-json\/wp\/v2\/blog_tags?post=1257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}