{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/advanced/design-source","result":{"data":{"current":{"frontmatter":{"title":"Design Resources","order":9,"brief":null,"icon":"doc-designresource"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#ui-kit","title":"UI Kit"},{"url":"#figma-plugin","title":"Figma plugin","items":[{"url":"#-content-filling","title":"📝 Content filling"},{"url":"#-table-generation","title":"📊 Table Generation"},{"url":"#-data-visualization-generation","title":"📈 Data Visualization Generation"},{"url":"#semi-theme-synchronization","title":"Semi Theme Synchronization"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"Design Collaboration\",\n  \"title\": \"Design Resources\",\n  \"icon\": \"doc-designresource\",\n  \"localeCode\": \"en-US\",\n  \"order\": 9\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar MyImage = makeShortcode(\"MyImage\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Semi Design provides a wealth of design resources to help designers and developers collaborate efficiently. Whether you are a community user or a ByteDance internal designer, you can find UI Kit resource and Figma plug-ins that suit you here.\"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"UI Kit\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Design UI Kit provides a complete component library and design specifications, covering mainstream design scenarios, helping designers quickly build high-quality interfaces, facilitating team collaboration and asset reuse.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Community users: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.figma.com/community/file/1509783980598707066/semi-design-library\"\n  }, \"Semi Design library\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ByteDance Design users: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.figma.com/design/81rCf36kFTcxedsGgAibzd/Semi-Design--Base-?t=uy6hMwE8gwGgijZF-0\"\n  }, \"Semi Design library - ByteDance\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Figma plugin\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Toolbox supports content filling, table generation, data visualization chart generation, and theme synchronization. Semi Toolbox is a functional plug-in built by the Semi team to improve efficiency for designers.\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Community users: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.figma.com/community/plugin/1450409416307888169/semi-toolbox\"\n  }, \"Semi Toolbox\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ByteDance Design users: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.figma.com/community/plugin/1435200322193309779\"\n  }, \"Semi Toolbox\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"International users: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.figma.com/community/plugin/1435204511882469475\"\n  }, \"Semi Toolbox\"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83D\\uDCDD Content filling\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \" With one click, batch fill formatted text and images. It is deeply adapted to Semi components, and the filling process is as smooth as flowing water, instantly enriching your design draft.\", mdx(\"br\", null)), mdx(MyImage, {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/contentFill-en-us.gif\",\n    width: \"885\",\n    mdxType: \"MyImage\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83D\\uDCCA Table Generation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Leverage the Semi Table component to quickly build professional tables, easily meeting the needs of data presentation.\", mdx(\"br\", null), \" \\u26A0\\uFE0F Currently only supported in ByteDance Design and internationalization plugins.\"), mdx(MyImage, {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/table-generate-en.gif\",\n    width: \"885\",\n    mdxType: \"MyImage\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83D\\uDCC8 Data Visualization Generation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Connect to the Semi DV style library and output code simultaneously, enabling seamless integration between design and development.\", mdx(\"br\", null), \" \"), mdx(MyImage, {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/dv-en.gif\",\n    width: \"885\",\n    mdxType: \"MyImage\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Semi Theme Synchronization\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Rapidly synchronizes the DSM theme, making it extremely convenient to unify the design style.\", mdx(\"br\", null)), mdx(MyImage, {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-toolbox/docs/Theme-sync.png\",\n    width: \"387\",\n    mdxType: \"MyImage\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/advanced/design-source","next":{"fields":{"slug":"zh-CN/advanced/design-source"},"id":"560718b4-a89e-5352-8b90-0b7edd91731a","frontmatter":{"title":"Design Resources 设计资源","localeCode":"zh-CN","icon":"doc-designresource","showNew":null}},"previous":{"fields":{"slug":"zh-CN/experience/internationalization"},"id":"020a996c-a68d-50e3-8979-30216d679b1c","frontmatter":{"title":"Internationalization 国际化","localeCode":"zh-CN","icon":"doc-internationalization","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}