Complete onboarding: select the project and Figma file, then open Elf Bridge in that file. Paste the pairing code printed by Elf into the plugin. Pairing codes are single-use and expire; saved pairing credentials let the plugin reconnect later.Follow the document-approval prompt. Strict verification uses your connected Figma account; plugin-only mode requires explicit approval of the current connection.Start with a check. Review proposed changes before enabling automatic sync. Leave Elf running and Elf Bridge open.The beta command requires the npm beta to have been published. If npm cannot find it, the release is not available yet.Continue with pairing, drift checks, or VS Code.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Elf","colors":{"primary":"#6F3CFA","light":"#9670FF","dark":"#5426CE"},"logo":{"light":"https://mintcdn.com/elf-docs/PIUjFcWgpng1oLcg/images/elf-mascot.png?fit=max\u0026auto=format\u0026n=PIUjFcWgpng1oLcg\u0026q=85\u0026s=e13c4e4b0fc6601edd7f707eb52f25ac","dark":"https://mintcdn.com/elf-docs/PIUjFcWgpng1oLcg/images/elf-mascot.png?fit=max\u0026auto=format\u0026n=PIUjFcWgpng1oLcg\u0026q=85\u0026s=e13c4e4b0fc6601edd7f707eb52f25ac"},"favicon":"https://mintcdn.com/elf-docs/PIUjFcWgpng1oLcg/images/elf-mascot.png?fit=max\u0026auto=format\u0026n=PIUjFcWgpng1oLcg\u0026q=85\u0026s=e13c4e4b0fc6601edd7f707eb52f25ac","navbar":{"links":[{"href":"https://github.com/nonyonah/elf","label":"GitHub"}]},"footer":{"socials":{"github":"https://github.com/nonyonah/elf"}},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"elf-docs","hasAudioNarration":false,"actualSubdomain":"elf-docs","customDomains":["elf-docs.riftlabs.xyz"],"gitSource":{"type":"github","owner":"nonyonah","repo":"elf-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":"","_id":"6ae5c9de9a3d87f412ffe67d"},"chroma":{"latestBuiltDeploymentHistoryId":"6ae5dceb3badfbce406c170b","collectionId":"127d9aac-4d66-4e91-9bcd-4d331b2c7437","liveDeploymentHistoryId":"6ae5dceb3badfbce406c170b","schemaVersion":"v3"},"entitlements":{},"buildId":"6ae5e22cc23d1566bdfb2225","clientVersion":"0.0.4043","searchFilterCounts":[{"language":"default","tag":"Your design system","count":5},{"language":"default","tag":"Start here","count":4},{"language":"default","tag":"Reference","count":3},{"language":"default","tag":"Coding assistants","count":2}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","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":"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":"byok-sep-25","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":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","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}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"quickstart","slug":"/quickstart","pageMetadata":{"title":"Quickstart","description":"Start with your project and one Figma file.","href":"/quickstart"},"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: \"Start with your project and one Figma file.\"\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`,code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`requirements`,children:`Requirements`}),`\n`,_jsxs(_components.p,{children:[`Use Node.js 22 and npm, a local project directory, and Figma Desktop. Install `,_jsx(_components.a,{href:`https://www.figma.com/community/plugin/1698340879529702744`,children:`Elf Bridge from Figma Community`}),`, then run it in the file you want to connect. See `,_jsx(_components.a,{href:`/pairing`,children:`Connect Figma`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`start-elf`,children:`Start Elf`}),`\n`,_jsx(_components.p,{children:`From your project directory:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`npx`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` elf-tokens@beta`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` start`})]}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`Complete onboarding: select the project and Figma file, then open Elf Bridge in that file. Paste the pairing code printed by Elf into the plugin. Pairing codes are single-use and expire; saved pairing credentials let the plugin reconnect later.`}),`\n`,_jsx(_components.p,{children:`Follow the document-approval prompt. Strict verification uses your connected Figma account; plugin-only mode requires explicit approval of the current connection.`}),`\n`,_jsx(_components.p,{children:`Start with a check. Review proposed changes before enabling automatic sync. Leave Elf running and Elf Bridge open.`}),`\n`,_jsx(_components.p,{children:`The beta command requires the npm beta to have been published. If npm cannot find it, the release is not available yet.`}),`\n`,_jsxs(_components.p,{children:[`Continue with `,_jsx(_components.a,{href:`/pairing`,children:`pairing`}),`, `,_jsx(_components.a,{href:`/drift`,children:`drift checks`}),`, or `,_jsx(_components.a,{href:`/vscode`,children:`VS Code`}),`.`]})]})}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":"Quickstart","description":"Start with your project and one Figma file.","href":"/quickstart"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Requirements","slug":"requirements","depth":2,"children":[]},{"title":"Start Elf","slug":"start-elf","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"elf-docs","siteName":"Elf","title":"Quickstart - Elf","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-31T12:42:22.986Z","originalFileLocation":"quickstart.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=\"Start with your project and one Figma file.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Elf\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_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=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Quickstart - Elf\">\u003cmeta data-mint-head property=\"og:description\" content=\"Start with your project and one Figma file.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Elf\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://elf-docs.riftlabs.xyz/quickstart\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://elf-docs.mintlify.app/_mintlify/api/og/v2?division=Start+here\u0026amp;title=Quickstart\u0026amp;description=Start+with+your+project+and+one+Figma+file.\u0026amp;theme=771ef95932986edac8fa3d87\u0026amp;signature=2864de2d9fce35f24adf1425f48cec70dc0f41044bfd98d369895a23e5d1fd41\">\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=\"Quickstart - Elf\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Start with your project and one Figma file.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://elf-docs.mintlify.app/_mintlify/api/og/v2?division=Start+here\u0026amp;title=Quickstart\u0026amp;description=Start+with+your+project+and+one+Figma+file.\u0026amp;theme=771ef95932986edac8fa3d87\u0026amp;signature=2864de2d9fce35f24adf1425f48cec70dc0f41044bfd98d369895a23e5d1fd41\">\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=\"/mintlify-assets/_mintlify/favicons/elf-docs/V29YsBchUAcB6WC4/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Elf\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#6F3CFA\">\u003clink data-mint-head rel=\"canonical\" href=\"https://elf-docs.riftlabs.xyz/quickstart\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/quickstart.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://elf-docs.riftlabs.xyz/#organization\",\"name\":\"Elf\",\"url\":\"https://elf-docs.riftlabs.xyz\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/elf-docs/PIUjFcWgpng1oLcg/images/elf-mascot.png?fit=max\u0026auto=format\u0026n=PIUjFcWgpng1oLcg\u0026q=85\u0026s=e13c4e4b0fc6601edd7f707eb52f25ac\"}},{\"@type\":\"WebSite\",\"@id\":\"https://elf-docs.riftlabs.xyz#website\",\"name\":\"Elf\",\"url\":\"https://elf-docs.riftlabs.xyz\",\"publisher\":{\"@id\":\"https://elf-docs.riftlabs.xyz/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://elf-docs.riftlabs.xyz/quickstart#webpage\",\"url\":\"https://elf-docs.riftlabs.xyz/quickstart\",\"name\":\"Quickstart\",\"description\":\"Start with your project and one Figma file.\",\"dateModified\":\"2026-10-31T12:42:22.986Z\",\"isPartOf\":{\"@id\":\"https://elf-docs.riftlabs.xyz#website\"},\"breadcrumb\":{\"@id\":\"https://elf-docs.riftlabs.xyz/quickstart#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://elf-docs.riftlabs.xyz/quickstart#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start here\",\"item\":\"https://elf-docs.riftlabs.xyz/introduction\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quickstart\",\"item\":\"https://elf-docs.riftlabs.xyz/quickstart\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://elf-docs.riftlabs.xyz/quickstart#article\",\"headline\":\"Quickstart\",\"name\":\"Quickstart\",\"description\":\"Start with your project and one Figma file.\",\"url\":\"https://elf-docs.riftlabs.xyz/quickstart\",\"mainEntityOfPage\":{\"@id\":\"https://elf-docs.riftlabs.xyz/quickstart#webpage\"},\"dateModified\":\"2026-10-31T12:42:22.986Z\",\"publisher\":{\"@id\":\"https://elf-docs.riftlabs.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://elf-docs.riftlabs.xyz#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Elf\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Elf","nav":{"global":null,"groups":[{"group":"Start here","pages":[{"title":"Meet Elf","description":"Keep your code and Figma design system in sync.","href":"/introduction"},{"title":"Quickstart","href":"/quickstart"},{"title":"Connect Figma","description":"Pair the open document with your local Elf runtime.","href":"/pairing"},{"title":"VS Code extension","href":"/vscode"}]},{"group":"Your design system","pages":[{"title":"Check design drift","href":"/drift"},{"title":"Review and sync","href":"/sync"},{"title":"Import from Figma","href":"/imports"},{"title":"Slack notifications","href":"/slack"},{"title":"Divergence and deprecations","href":"/lifecycle"}]},{"group":"Coding assistants","pages":[{"title":"Local MCP","href":"/local-mcp"},{"title":"Markdown to Figma","href":"/markdown"}]},{"group":"Reference","pages":[{"title":"Troubleshooting","href":"/troubleshooting"},{"title":"Data and permissions","href":"/privacy"},{"title":"Beta release notes","href":"/releases"}]}]},"basePath":"","title":"Quickstart - Elf","buildId":"dpl_G9nrg4qeJSZtah1Ziwbc2n6WkLch","deploymentId":"dpl_G9nrg4qeJSZtah1Ziwbc2n6WkLch","dynamics":[],"chunks":[]}
