"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[2442],{1425:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/figma-copy-link-to-selection-c8a6f15a334f322383b5f6cd0e719b5c.png"},8175:(e,n,t)=>{t.d(n,{A:()=>s});t(6540);var i=t(4848);function s(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var i=t(6540);const s={},r=i.createContext(s);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:n},e.children)}},8707:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>g,frontMatter:()=>a,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"getting-started/figma","title":"Figma for Design","description":"integrates directly with Figma to import frames and generate web pages and UIs from your designs.","source":"@site/userGuide/getting-started/016.figma.md","sourceDirName":"getting-started","slug":"/getting-started/figma","permalink":"/guides/user/getting-started/figma","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":16,"frontMatter":{"sidebar_position":16},"sidebar":"sidebar","previous":{"title":"GitHub Integration","permalink":"/guides/user/getting-started/github"},"next":{"title":"Edit Content After Website Creation","permalink":"/guides/user/getting-started/edit-content"}}');var s=t(4848),r=t(8453),o=t(8175);const a={sidebar_position:16},c="Figma for Design",l={},d=[{value:"Overview",id:"overview",level:2},{value:"How to Copy a Frame URL",id:"how-to-copy-a-frame-url",level:3},{value:"Option 1: From the Homepage",id:"option-1-from-the-homepage",level:3},{value:"Option 2: From Project Settings",id:"option-2-from-project-settings",level:3}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"figma-for-design",children:"Figma for Design"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(o.A,{})," integrates directly with Figma to import frames and generate web pages and UIs from your designs."]}),"\n",(0,s.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,s.jsxs)(n.p,{children:["Figma is a widely used design tool for creating and collaborating on digital product interfaces. With ",(0,s.jsx)(o.A,{}),"'s Figma integration, you can import Figma frames and instantly turn them into functional layouts."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h1,{id:"figma-frames",children:"Figma Frames"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(o.A,{})," imports a ",(0,s.jsx)(n.strong,{children:"single frame"})," from Figma\u2014not the whole project."]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["Frames are layers that act as containers to organize other layers\u2014such as shapes, images, and text\u2014into cohesive designs. You can even nest frames within other frames, allowing you to create more complex designs. ",(0,s.jsx)(n.a,{href:"https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design",children:(0,s.jsx)(n.em,{children:"Frames in Figma design"})})]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"how-to-copy-a-frame-url",children:"How to Copy a Frame URL"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Right-click the frame."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Select ",(0,s.jsx)(n.strong,{children:"Copy/Paste as \u2192 Copy link to selection"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:t(1425).A+"",width:"627",height:"524"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h1,{id:"connect-to-figma-and-import-a-frame",children:"Connect to Figma and Import a Frame"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Important:"}),"\nYou can only enable ",(0,s.jsx)(n.strong,{children:"Figma Connect"})," after authorizing your Figma account.\nIf you haven't authorized yet, the toggle cannot be selected."]}),"\n",(0,s.jsx)(n.p,{children:"You can authorize Figma from two places:"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"option-1-from-the-homepage",children:"Option 1: From the Homepage"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["On the ",(0,s.jsxs)(n.a,{href:"https://ezsite.ai/",children:[(0,s.jsx)(o.A,{})," Homepage"]}),", click ",(0,s.jsx)(n.strong,{children:"Import from Figma"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.strong,{children:"Figma Connect"})," is not authorized, click ",(0,s.jsx)(n.strong,{children:"Authorize Figma"})," and complete the Figma authorization flow."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Once authorized, return to the homepage, click ",(0,s.jsx)(n.strong,{children:"Import from Figma"})," again, and enable ",(0,s.jsx)(n.strong,{children:"Figma Connect"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Paste the URL of the Figma frame you want to import into the prompt field.\nExample:\n",(0,s.jsx)(n.code,{children:'"Build this page: https://www.figma.com/design/xxxxx/xxxxx?node-id=0-1"'})]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"option-2-from-project-settings",children:"Option 2: From Project Settings"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Open your project and click ",(0,s.jsx)(n.strong,{children:"Settings"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Go to ",(0,s.jsx)(n.strong,{children:"MCP Tools"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.strong,{children:"Figma Connect"})," is not authorized, you will see an ",(0,s.jsx)(n.strong,{children:"Authorize Figma"})," button.\nComplete authorization first."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["After authorization, reopen the project and return to ",(0,s.jsx)(n.strong,{children:"Settings \u2192 MCP Tools"}),". Now you can enable ",(0,s.jsx)(n.strong,{children:"Figma Connect"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Paste your Figma frame URL into the prompt field."}),"\n"]}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}}}]);