In this lesson, you will learn how to bring existing designs into Magic Patterns so you can extend and prototype with AI instead of rebuilding from scratch, whether you start from screenshots, files, or a handoff from another tool. When your source frames live in Figma, use import from Figma. Keep generated UI aligned with your design system and reusable components. When you are ready to show progress, use sharing and publishing a custom URL.
Next: Design Systems
Continue to lesson four and use your design system.
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Magic Patterns","description":"Magic Patterns is an AI design tool for product teams. Create prototypes with your real design system, hand off to engineering, and speed up your software development lifecycle.","colors":{"primary":"#9784BF","light":"#FFFFFF","dark":"#001617"},"logo":{"light":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_light.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=2a7a773a8194091ebfe3e1c0104f2c92","dark":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_dark.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=20e5d64413256401004cd68c98e798d0"},"favicon":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/icon.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=7854f15b01790c1d076cf1f1e10c61b0","api":{"openapi":["openapi-v3.yml","openapi.yml"]},"navbar":{"links":[{"href":"https://www.magicpatterns.com/customers","label":"Case Studies"}],"primary":{"type":"button","label":"Start designing","href":"https://www.magicpatterns.com"}},"footer":{"socials":{"twitter":"https://x.com/magicpatterns","github":"https://github.com/magicpatterns","linkedin":"https://www.linkedin.com/company/magicpatterns"}},"integrations":{"intercom":{"appId":"ftkg08cn"}},"contextual":{"options":["copy","view","chatgpt","claude","cursor"],"display":"header"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"magicpatterns","hasAudioNarration":false,"actualSubdomain":"magicpatterns","customDomains":["www.magicpatterns.com"],"gitSource":{"type":"github","owner":"magicpatterns","repo":"patterns","deployBranch":"main","contentDirectory":"docs","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6aecbba141290b71c3828cbd","collectionId":"2e385020-b02a-471f-85a4-79efe7f6e8f4","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6aecbba141290b71c3828cbd"},"feedback":{"thumbs":true,"edits":false,"issues":false},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6aece1b3a84f97fba518a7c7","clientVersion":"0.0.4076","searchFilterCounts":[{"language":"default","tag":"Publish and Integrate","count":37},{"language":"default","tag":"Designs","count":18},{"language":"default","tag":"Introduction","count":15},{"language":"default","tag":"API","count":14},{"language":"default","tag":"Design Systems","count":14},{"language":"default","tag":"Integrations","count":11},{"language":"default","tag":"Teams and Enterprise","count":9},{"language":"default","tag":"Workflows and Video Guide","count":8},{"language":"default","tag":"Prompting and iterating","count":6},{"language":"default","tag":"Importing your Design System","count":6}]},"assistantConfig":{"deflection":{"enabled":true,"email":"support@magicpatterns.com","showHelpButton":true}},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":".nav-tabs-item[href^=\"/documentation/magic-os/\"]::after{content:\"NEW\";margin-left:0.375rem;padding:0.0625rem 0.375rem;border-radius:9999px;font-size:0.625rem;font-weight:600;line-height:1rem;color:rgb(var(--primary));background-color:rgb(var(--primary) / 0.1)}"}],"page":{"pagePath":"documentation/guide/figma-imports","slug":"/documentation/guide/figma-imports","pageMetadata":{"title":"Importing from Figma","description":"Bring in existing UI","icon":"figma","href":"/documentation/guide/figma-imports"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Bring in existing UI\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,p:`p`,..._provideComponents(),...props.components},{Card,OptimizedFrame}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!OptimizedFrame)_missingMdxReference(`OptimizedFrame`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`In this lesson, you will learn how to bring existing designs into Magic Patterns so you can extend and prototype with AI instead of rebuilding from scratch, whether you start from screenshots, files, or a handoff from another tool. When your source frames live in Figma, use `,_jsx(_components.a,{href:`/documentation/importing/import-from-figma`,children:`import from Figma`}),`. Keep generated UI aligned with your `,_jsx(_components.a,{href:`/documentation/design-systems/overview`,children:`design system`}),` and reusable `,_jsx(_components.a,{href:`/documentation/design-systems/editing/components`,children:`components`}),`. When you are ready to show progress, use `,_jsx(_components.a,{href:`/documentation/editor/sharing`,children:`sharing`}),` and `,_jsx(_components.a,{href:`/documentation/publishing/publish-url`,children:`publishing a custom URL`}),`.`]}),`\n`,_jsx(OptimizedFrame,{className:`mint-w-full mint-aspect-video`,src:`https://www.youtube.com/embed/v1lg-WHYwAc?si=NEFmEeCEyo5rhUEL`,title:`Importing`,alt:`Importing`,frameborder:`0`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture`,allowFullScreen:true}),`\n`,_jsx(Card,{title:`Next: Design Systems`,icon:`play`,href:`/documentation/guide/design-systems`,children:_jsx(_components.p,{children:`Continue to lesson four and use your design system.`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Importing from Figma","description":"Bring in existing UI","icon":"figma","href":"/documentation/guide/figma-imports"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-aspect-video {\n aspect-ratio: 16 / 9\n}\n.mint-w-full {\n width: 100%\n}","subdomain":"magicpatterns","siteName":"Magic Patterns","title":"Importing from Figma - Magic Patterns","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-06-06T00:56:13.928Z","originalFileLocation":"documentation/guide/figma-imports.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Bring in existing UI\">\u003cmeta data-mint-head name=\"application-name\" content=\"Magic Patterns\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Importing from Figma - Magic Patterns\">\u003cmeta data-mint-head property=\"og:description\" content=\"Bring in existing UI\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Magic Patterns\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://magicpatterns.mintlify.site/docs/_mintlify/api/og/v2?division=Workflows+and+Video+Guide\u0026amp;title=Importing+from+Figma\u0026amp;description=Bring+in+existing+UI\u0026amp;theme=58b3985732190453b80d7ef2\u0026amp;signature=ed1b65e103716f60b136e6ffe8948728a6bc5339033b690f0d999ad685f170c8\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Importing from Figma - Magic Patterns\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Bring in existing UI\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://magicpatterns.mintlify.site/docs/_mintlify/api/og/v2?division=Workflows+and+Video+Guide\u0026amp;title=Importing+from+Figma\u0026amp;description=Bring+in+existing+UI\u0026amp;theme=58b3985732190453b80d7ef2\u0026amp;signature=ed1b65e103716f60b136e6ffe8948728a6bc5339033b690f0d999ad685f170c8\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Magic Patterns\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#9784BF\">\u003clink data-mint-head rel=\"canonical\" href=\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/documentation/guide/figma-imports.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://www.magicpatterns.com/#organization\",\"name\":\"Magic Patterns\",\"url\":\"https://www.magicpatterns.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_light.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=2a7a773a8194091ebfe3e1c0104f2c92\"}},{\"@type\":\"WebSite\",\"@id\":\"https://www.magicpatterns.com/docs#website\",\"name\":\"Magic Patterns\",\"url\":\"https://www.magicpatterns.com/docs\",\"publisher\":{\"@id\":\"https://www.magicpatterns.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports#webpage\",\"url\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports\",\"name\":\"Importing from Figma\",\"description\":\"Bring in existing UI\",\"dateModified\":\"2026-06-06T00:56:13.928Z\",\"isPartOf\":{\"@id\":\"https://www.magicpatterns.com/docs#website\"},\"breadcrumb\":{\"@id\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Workflows and Video Guide\",\"item\":\"https://www.magicpatterns.com/docs/documentation/guide/introduction\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Importing from Figma\",\"item\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports#article\",\"headline\":\"Importing from Figma\",\"name\":\"Importing from Figma\",\"description\":\"Bring in existing UI\",\"url\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports\",\"mainEntityOfPage\":{\"@id\":\"https://www.magicpatterns.com/docs/documentation/guide/figma-imports#webpage\"},\"dateModified\":\"2026-06-06T00:56:13.928Z\",\"publisher\":{\"@id\":\"https://www.magicpatterns.com/#organization\"},\"isPartOf\":{\"@id\":\"https://www.magicpatterns.com/docs#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Magic Patterns\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Magic Patterns","nav":{"global":null,"tabs":[{"tab":"Introduction","groups":[{"group":"Start here","pages":[{"title":"Welcome","icon":"hand-wave","href":"/documentation/get-started/introduction"},{"title":"Features","icon":"cube","href":"/documentation/features/overview"},{"title":"Credits and Plans","icon":"credit-card","iconType":"solid","href":"/documentation/get-started/credits-and-billing"},{"title":"How to Prompt","icon":"graduation-cap","href":"/documentation/editor/how-to-prompt"}]},{"group":"Workflows and Video Guide","pages":[{"title":"Introduction","icon":"graduation-cap","href":"/documentation/guide/introduction"},{"title":"Building Your First Prototype","icon":"rocket","href":"/documentation/guide/building-your-first-prototype"},{"title":"Improving Your Prompts","description":"Troubleshooting, routes, merging designs, and Rules for context","icon":"circle-plus","href":"/documentation/guide/improving-your-prompts"},{"title":"Importing from Figma","icon":"figma","href":"/documentation/guide/figma-imports"},{"title":"Design Systems","description":"Overview of rules, typography, colors, components, and leveraging your real design system.","icon":"cubes","href":"/documentation/guide/design-systems"},{"title":"Team Workflows and Sharing","icon":"people-group","href":"/documentation/guide/team-workflows-and-sharing"},{"title":"Engineering Handoff","icon":"code","href":"/documentation/guide/engineering-handoff"},{"title":"Video Tutorials","icon":"video","href":"/documentation/tutorials/video-tutorials"}]},{"group":"Help","pages":[{"title":"Troubleshooting","icon":"hammer","href":"/documentation/troubleshooting/overview"},{"title":"Common Questions","icon":"comments-question","href":"/documentation/get-started/faq"},{"title":"Support","icon":"headset","href":"/documentation/get-started/support"}]}]},{"tab":"Designs","pages":[{"title":"Designs","href":"/documentation/editor/what-is-a-design"}]},{"tab":"MagicOS","pages":[{"title":"MagicOS","href":"/documentation/magic-os/overview"}]},{"tab":"Design Systems","pages":[{"title":"Design Systems","href":"/documentation/design-systems/overview"}]},{"tab":"Publish and Integrate","pages":[{"title":"Publish and Integrate","href":"/documentation/publishing/publish-url"}]},{"tab":"Teams and Enterprise","pages":[{"title":"Teams and Enterprise","href":"/documentation/collaboration/team-workspaces"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/documentation/feature-releases/changelog"}]}]},"basePath":"","title":"Importing from Figma - Magic Patterns","buildId":"dpl_ATnXPMW25DMPUr9VBw6kL6MfBt6T","deploymentId":"dpl_ATnXPMW25DMPUr9VBw6kL6MfBt6T","dynamics":[],"chunks":[]}