[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-site-config":3,"$fSWrINcrzlKKF6tPdS-YmtaU2zxogOdqxJzE2B3hkThA":6,"mdc--eg38gn-key":45},{"gaMeasurementId":4,"bookingUrl":5},"G-7BYTDCVDDR","https:\u002F\u002Ftidycal.com\u002Fcmdcntr\u002F30-minute-meeting",{"tool":7},{"id":8,"slug":9,"name":10,"kind":11,"summary":12,"version":13,"coverImageUrl":14,"description":15,"githubUrl":14,"downloadUrl":14,"promptBody":14,"fileSize":14,"downloadCount":16,"relatedArticles":17,"updatedAt":44,"publishedAt":44},"15c017af-88d1-4bc7-af3b-6c43b899a40f","figma-to-cms-mapping-table","Figma-to-CMS Component Mapping Table (Template)","file","A blank mapping template that turns a design component into a real CMS content contract before anyone builds a page.","1.0",null,"## What this is\n\nA blank mapping template for turning a design component into a real content management system (CMS) contract before anyone builds a page. It is the artifact that stops a Figma file from being mistaken for a component library. Fill one row per component, agree it across the design and engineering teams, and you have a contract instead of an argument.\n\nThis template is CMS-agnostic. The right-hand columns use Sitecore terms because that is where the discipline is richest, but the same table works for Storyblok, Contentful, Sanity, or any structured CMS: the point is to decide, once, where every piece of content lives and how an author is prevented from breaking it.\n\n## How to use it\n\n1. List every component from the design, using the designer-facing names.\n2. For each field in the component, decide the CMS field type and its constraint. Prefer the most restrictive type that works (a droplink over free text, a general link over separate label and URL fields).\n3. Decide how variants are handled: rendering parameters for layout and theme toggles, a separate rendering only when the markup structure genuinely differs.\n4. Record the accessibility requirements as build requirements, not a later cleanup pass.\n5. Note where the CMS enforces a rule so an author cannot undo it.\n\nIf the two teams cannot fill a row in one sitting, that disagreement is the finding. Resolve it before building.\n\n## The terminology map (fill this first)\n\n| Term | Design meaning | CMS meaning (your agreed definition) |\n|---|---|---|\n| Component | | |\n| Variant | | |\n| Token | | |\n| Frame \u002F artboard | | |\n| Library | | |\n\n## The per-component mapping table\n\n| Component | Field (design) | CMS field type | Constraint | Variant handling | Accessibility requirement | CMS-enforced? |\n|---|---|---|---|---|---|---|\n| | | | | | | |\n| | | | | | | |\n| | | | | | | |\n\n**Column notes**\n\n- **CMS field type:** single-line text, rich text, image, general link, droplink, treelist, number, checkbox.\n- **Constraint:** character limit, required, allowed link types, allowed values.\n- **Variant handling:** rendering parameter, template inheritance, SXA variant, or separate rendering.\n- **Accessibility requirement:** required alt text, 44px target, aria-current, keyboard order, contrast token.\n- **CMS-enforced?:** yes or no. A \"no\" is a note to add a field constraint, a rendering default, or a render-time check so the requirement does not depend on the author remembering.\n\n## Worked example row\n\n| Component | Field (design) | CMS field type | Constraint | Variant handling | Accessibility requirement | CMS-enforced? |\n|---|---|---|---|---|---|---|\n| SectionNav | Heading | Single-line text | Required, max 40 chars | Variant param: Default \u002F Compact \u002F Sticky | Nav label must match page title; 44px targets | Yes: required field + droplink variant |\n\n## Companion reading\n\nThe full process this template belongs to is in [Figma Developer Handoff, Sitecore Edition](\u002Fblog\u002Fenterprise-cms\u002Ffigma-developer-handoff-sitecore-component-library), and the accessibility column ties into the [WCAG 2.2 AA checklist](\u002Ftools\u002Fwcag-22-aa-checklist).",0,[18],{"id":19,"slug":20,"title":21,"description":22,"coverImageUrl":23,"coverImageAlt":24,"tags":25,"featured":31,"tool":14,"publishedAt":32,"author":33,"cluster":40},"ec4ecb2f-8f62-4dd8-9ba9-0a623c1caf44","figma-developer-handoff-sitecore-component-library","Figma Developer Handoff, Sitecore Edition: From Design File to Working Component Library","Inherited polished Figma files but no component library in the CMS? Here is the exact process we run to rebuild a working Sitecore component library on a live site.","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Ffigma-handoff.png","Chrome component blocks assembling from purple wireframe blueprints into a solid component library",[26,27,28,29,30],"sitecore","figma","component library","design handoff","accessibility",false,"2026-05-27T14:00:00.000Z",{"slug":34,"name":35,"avatarUrl":36,"role":37,"bio":38,"isPublic":39},"mohd-naeem","Mohd Naeem","\u002Fapi\u002Fpublic\u002Favatar\u002F443302bc-2d77-4202-8688-1968f2354b37","Sitecore Lead Developer and Solution Architect (XM\u002FXP, headless, practical AI)","Mohd Naeem is a Sitecore lead developer and solution architect with 15+ years across XM, XP, and composable headless delivery with JSS. He has led platform upgrades, content modeling, search and personalization, and CI\u002FCD for multi-site digital experience programs, usually as the technical lead bridging developers, content teams, and stakeholders. His recent work applies practical AI where it actually earns its keep: smarter search and content discovery, draft and review workflows for editors, and API-based assistants wired into existing Sitecore and line-of-business systems. He is AWS, Microsoft, and Sitecore certified, and his delivery record includes public sites for regulated pharma brands. Through Command Center he takes on greenfield architecture, rescue and refactor work, platform upgrades, and hands-on delivery leadership.",true,{"slug":41,"name":42,"color":43},"enterprise-cms","Enterprise CMS Delivery","#0EA5E9","2026-07-11T13:00:43.291Z",{"data":46,"body":47},{},{"type":48,"children":49},"root",[50,59,65,70,76,106,111,117,220,226,344,353,407,413,491,497],{"type":51,"tag":52,"props":53,"children":55},"element","h2",{"id":54},"what-this-is",[56],{"type":57,"value":58},"text","What this is",{"type":51,"tag":60,"props":61,"children":62},"p",{},[63],{"type":57,"value":64},"A blank mapping template for turning a design component into a real content management system (CMS) contract before anyone builds a page. It is the artifact that stops a Figma file from being mistaken for a component library. Fill one row per component, agree it across the design and engineering teams, and you have a contract instead of an argument.",{"type":51,"tag":60,"props":66,"children":67},{},[68],{"type":57,"value":69},"This template is CMS-agnostic. The right-hand columns use Sitecore terms because that is where the discipline is richest, but the same table works for Storyblok, Contentful, Sanity, or any structured CMS: the point is to decide, once, where every piece of content lives and how an author is prevented from breaking it.",{"type":51,"tag":52,"props":71,"children":73},{"id":72},"how-to-use-it",[74],{"type":57,"value":75},"How to use it",{"type":51,"tag":77,"props":78,"children":79},"ol",{},[80,86,91,96,101],{"type":51,"tag":81,"props":82,"children":83},"li",{},[84],{"type":57,"value":85},"List every component from the design, using the designer-facing names.",{"type":51,"tag":81,"props":87,"children":88},{},[89],{"type":57,"value":90},"For each field in the component, decide the CMS field type and its constraint. Prefer the most restrictive type that works (a droplink over free text, a general link over separate label and URL fields).",{"type":51,"tag":81,"props":92,"children":93},{},[94],{"type":57,"value":95},"Decide how variants are handled: rendering parameters for layout and theme toggles, a separate rendering only when the markup structure genuinely differs.",{"type":51,"tag":81,"props":97,"children":98},{},[99],{"type":57,"value":100},"Record the accessibility requirements as build requirements, not a later cleanup pass.",{"type":51,"tag":81,"props":102,"children":103},{},[104],{"type":57,"value":105},"Note where the CMS enforces a rule so an author cannot undo it.",{"type":51,"tag":60,"props":107,"children":108},{},[109],{"type":57,"value":110},"If the two teams cannot fill a row in one sitting, that disagreement is the finding. Resolve it before building.",{"type":51,"tag":52,"props":112,"children":114},{"id":113},"the-terminology-map-fill-this-first",[115],{"type":57,"value":116},"The terminology map (fill this first)",{"type":51,"tag":118,"props":119,"children":120},"table",{},[121,145],{"type":51,"tag":122,"props":123,"children":124},"thead",{},[125],{"type":51,"tag":126,"props":127,"children":128},"tr",{},[129,135,140],{"type":51,"tag":130,"props":131,"children":132},"th",{},[133],{"type":57,"value":134},"Term",{"type":51,"tag":130,"props":136,"children":137},{},[138],{"type":57,"value":139},"Design meaning",{"type":51,"tag":130,"props":141,"children":142},{},[143],{"type":57,"value":144},"CMS meaning (your agreed definition)",{"type":51,"tag":146,"props":147,"children":148},"tbody",{},[149,164,178,192,206],{"type":51,"tag":126,"props":150,"children":151},{},[152,158,161],{"type":51,"tag":153,"props":154,"children":155},"td",{},[156],{"type":57,"value":157},"Component",{"type":51,"tag":153,"props":159,"children":160},{},[],{"type":51,"tag":153,"props":162,"children":163},{},[],{"type":51,"tag":126,"props":165,"children":166},{},[167,172,175],{"type":51,"tag":153,"props":168,"children":169},{},[170],{"type":57,"value":171},"Variant",{"type":51,"tag":153,"props":173,"children":174},{},[],{"type":51,"tag":153,"props":176,"children":177},{},[],{"type":51,"tag":126,"props":179,"children":180},{},[181,186,189],{"type":51,"tag":153,"props":182,"children":183},{},[184],{"type":57,"value":185},"Token",{"type":51,"tag":153,"props":187,"children":188},{},[],{"type":51,"tag":153,"props":190,"children":191},{},[],{"type":51,"tag":126,"props":193,"children":194},{},[195,200,203],{"type":51,"tag":153,"props":196,"children":197},{},[198],{"type":57,"value":199},"Frame \u002F artboard",{"type":51,"tag":153,"props":201,"children":202},{},[],{"type":51,"tag":153,"props":204,"children":205},{},[],{"type":51,"tag":126,"props":207,"children":208},{},[209,214,217],{"type":51,"tag":153,"props":210,"children":211},{},[212],{"type":57,"value":213},"Library",{"type":51,"tag":153,"props":215,"children":216},{},[],{"type":51,"tag":153,"props":218,"children":219},{},[],{"type":51,"tag":52,"props":221,"children":223},{"id":222},"the-per-component-mapping-table",[224],{"type":57,"value":225},"The per-component mapping table",{"type":51,"tag":118,"props":227,"children":228},{},[229,269],{"type":51,"tag":122,"props":230,"children":231},{},[232],{"type":51,"tag":126,"props":233,"children":234},{},[235,239,244,249,254,259,264],{"type":51,"tag":130,"props":236,"children":237},{},[238],{"type":57,"value":157},{"type":51,"tag":130,"props":240,"children":241},{},[242],{"type":57,"value":243},"Field (design)",{"type":51,"tag":130,"props":245,"children":246},{},[247],{"type":57,"value":248},"CMS field type",{"type":51,"tag":130,"props":250,"children":251},{},[252],{"type":57,"value":253},"Constraint",{"type":51,"tag":130,"props":255,"children":256},{},[257],{"type":57,"value":258},"Variant handling",{"type":51,"tag":130,"props":260,"children":261},{},[262],{"type":57,"value":263},"Accessibility requirement",{"type":51,"tag":130,"props":265,"children":266},{},[267],{"type":57,"value":268},"CMS-enforced?",{"type":51,"tag":146,"props":270,"children":271},{},[272,296,320],{"type":51,"tag":126,"props":273,"children":274},{},[275,278,281,284,287,290,293],{"type":51,"tag":153,"props":276,"children":277},{},[],{"type":51,"tag":153,"props":279,"children":280},{},[],{"type":51,"tag":153,"props":282,"children":283},{},[],{"type":51,"tag":153,"props":285,"children":286},{},[],{"type":51,"tag":153,"props":288,"children":289},{},[],{"type":51,"tag":153,"props":291,"children":292},{},[],{"type":51,"tag":153,"props":294,"children":295},{},[],{"type":51,"tag":126,"props":297,"children":298},{},[299,302,305,308,311,314,317],{"type":51,"tag":153,"props":300,"children":301},{},[],{"type":51,"tag":153,"props":303,"children":304},{},[],{"type":51,"tag":153,"props":306,"children":307},{},[],{"type":51,"tag":153,"props":309,"children":310},{},[],{"type":51,"tag":153,"props":312,"children":313},{},[],{"type":51,"tag":153,"props":315,"children":316},{},[],{"type":51,"tag":153,"props":318,"children":319},{},[],{"type":51,"tag":126,"props":321,"children":322},{},[323,326,329,332,335,338,341],{"type":51,"tag":153,"props":324,"children":325},{},[],{"type":51,"tag":153,"props":327,"children":328},{},[],{"type":51,"tag":153,"props":330,"children":331},{},[],{"type":51,"tag":153,"props":333,"children":334},{},[],{"type":51,"tag":153,"props":336,"children":337},{},[],{"type":51,"tag":153,"props":339,"children":340},{},[],{"type":51,"tag":153,"props":342,"children":343},{},[],{"type":51,"tag":60,"props":345,"children":346},{},[347],{"type":51,"tag":348,"props":349,"children":350},"strong",{},[351],{"type":57,"value":352},"Column notes",{"type":51,"tag":354,"props":355,"children":356},"ul",{},[357,367,377,387,397],{"type":51,"tag":81,"props":358,"children":359},{},[360,365],{"type":51,"tag":348,"props":361,"children":362},{},[363],{"type":57,"value":364},"CMS field type:",{"type":57,"value":366}," single-line text, rich text, image, general link, droplink, treelist, number, checkbox.",{"type":51,"tag":81,"props":368,"children":369},{},[370,375],{"type":51,"tag":348,"props":371,"children":372},{},[373],{"type":57,"value":374},"Constraint:",{"type":57,"value":376}," character limit, required, allowed link types, allowed values.",{"type":51,"tag":81,"props":378,"children":379},{},[380,385],{"type":51,"tag":348,"props":381,"children":382},{},[383],{"type":57,"value":384},"Variant handling:",{"type":57,"value":386}," rendering parameter, template inheritance, SXA variant, or separate rendering.",{"type":51,"tag":81,"props":388,"children":389},{},[390,395],{"type":51,"tag":348,"props":391,"children":392},{},[393],{"type":57,"value":394},"Accessibility requirement:",{"type":57,"value":396}," required alt text, 44px target, aria-current, keyboard order, contrast token.",{"type":51,"tag":81,"props":398,"children":399},{},[400,405],{"type":51,"tag":348,"props":401,"children":402},{},[403],{"type":57,"value":404},"CMS-enforced?:",{"type":57,"value":406}," yes or no. A \"no\" is a note to add a field constraint, a rendering default, or a render-time check so the requirement does not depend on the author remembering.",{"type":51,"tag":52,"props":408,"children":410},{"id":409},"worked-example-row",[411],{"type":57,"value":412},"Worked example row",{"type":51,"tag":118,"props":414,"children":415},{},[416,450],{"type":51,"tag":122,"props":417,"children":418},{},[419],{"type":51,"tag":126,"props":420,"children":421},{},[422,426,430,434,438,442,446],{"type":51,"tag":130,"props":423,"children":424},{},[425],{"type":57,"value":157},{"type":51,"tag":130,"props":427,"children":428},{},[429],{"type":57,"value":243},{"type":51,"tag":130,"props":431,"children":432},{},[433],{"type":57,"value":248},{"type":51,"tag":130,"props":435,"children":436},{},[437],{"type":57,"value":253},{"type":51,"tag":130,"props":439,"children":440},{},[441],{"type":57,"value":258},{"type":51,"tag":130,"props":443,"children":444},{},[445],{"type":57,"value":263},{"type":51,"tag":130,"props":447,"children":448},{},[449],{"type":57,"value":268},{"type":51,"tag":146,"props":451,"children":452},{},[453],{"type":51,"tag":126,"props":454,"children":455},{},[456,461,466,471,476,481,486],{"type":51,"tag":153,"props":457,"children":458},{},[459],{"type":57,"value":460},"SectionNav",{"type":51,"tag":153,"props":462,"children":463},{},[464],{"type":57,"value":465},"Heading",{"type":51,"tag":153,"props":467,"children":468},{},[469],{"type":57,"value":470},"Single-line text",{"type":51,"tag":153,"props":472,"children":473},{},[474],{"type":57,"value":475},"Required, max 40 chars",{"type":51,"tag":153,"props":477,"children":478},{},[479],{"type":57,"value":480},"Variant param: Default \u002F Compact \u002F Sticky",{"type":51,"tag":153,"props":482,"children":483},{},[484],{"type":57,"value":485},"Nav label must match page title; 44px targets",{"type":51,"tag":153,"props":487,"children":488},{},[489],{"type":57,"value":490},"Yes: required field + droplink variant",{"type":51,"tag":52,"props":492,"children":494},{"id":493},"companion-reading",[495],{"type":57,"value":496},"Companion reading",{"type":51,"tag":60,"props":498,"children":499},{},[500,502,509,511,517],{"type":57,"value":501},"The full process this template belongs to is in ",{"type":51,"tag":503,"props":504,"children":506},"a",{"href":505},"\u002Fblog\u002Fenterprise-cms\u002Ffigma-developer-handoff-sitecore-component-library",[507],{"type":57,"value":508},"Figma Developer Handoff, Sitecore Edition",{"type":57,"value":510},", and the accessibility column ties into the ",{"type":51,"tag":503,"props":512,"children":514},{"href":513},"\u002Ftools\u002Fwcag-22-aa-checklist",[515],{"type":57,"value":516},"WCAG 2.2 AA checklist",{"type":57,"value":518},"."]