Dev.to WebDev 🛠 Dev Fri, 16 Oct 2026 06:13:00 +0000 👁 0 📖 14 min read

Figma Code Layers & Specs (Config India): Arabic RTL Design-to-Code Checklist + MCP

The short answer Figma code layers moved into open beta on 15 October 2026 at Config India (Bengaluru), alongside Figma Specs (open beta on paid plans), MCP improvements that can create code layers and read/write Specs

The short answer

Figma code layers moved into open beta on 15 October 2026 at Config India (Bengaluru), alongside Figma Specs (open beta on paid plans), MCP improvements that can create code layers and read/write Specs, Payload as Make's native backend, Guidelines (open beta), and Code sources (closed beta). For Arabic and RTL product teams in MENA, the launch is not a "replace your design system" moment — it is a design-to-code handoff moment: real running code on the canvas, Markdown Specs that travel into Claude Code and Cursor via the Figma MCP, and a short promotional window where creating and editing inside code layers is free on paid plans through 4 November 2026. This article is a verification checklist for bilingual EN/AR products. It does not invent Arabic or RTL behaviour that Figma's docs do not claim; where behaviour is unverified, we mark it as something your team must test.

Key facts, with dates and primary sources

Config India 2026, 15 October 2026: Figma's largest international Config yet (over 30,000 registered in-person and virtually) at BIEC, Tumkur Road, Bengaluru. Product wave: code layers open beta, Specs open beta, Payload in Figma, MCP improvements, Guidelines open beta, Code sources closed beta, centralized design systems preview. (Config India; Help Center — What's new from Config India 2026; Release notes, 15 Oct 2026)
Code layers — open beta, rolling out to all plans: Education (not K-12), Starter, Professional, Organization, Enterprise; requires edit access. Start from design frames, a GitHub repo, an empty layer + agent prompt, or capture a live page with the Figma Chrome extension. Supported on desktop, web, and the Figma mobile app. (Help Center; Code layers blog, 15 Oct 2026)
AI credits promotional period (exact Help Center wording): creating and editing within code layers is free through November 4, 2026 on paid plans. Generating and editing code inside a code layer does not use credits through that date; other agent tasks in the same prompt still consume AI credits. After 4 November 2026, all code layer tasks use AI credits. Only Enterprise can opt out (by disabling AI features org-wide). (Help Center FAQs)
Figma Specs — open beta: rolling out to Professional, Organization, and Enterprise (overview table); Help "who can use" also lists Education and Government. View access to view, edit access to edit. Specs are a multiplayer Markdown container on the canvas (press D or the Specs icon). Using the agent with Specs consumes AI credits. (Introducing Specs, 15 Oct 2026; Help Center)
Figma MCP — available now on all listed plans: faster/more reliable with fewer tokens; agents can generate interactive code layers, create visual assets, run Weave workflows, and read, write, and create Specs. New tools include html_to_figma and generate_image (generate_image consumes AI credits). Remote endpoint documented as https://mcp.figma.com/mcp. Claude Code and Cursor have first-party setup paths. (Help Center; Remote MCP install; Cursor + Figma MCP)
India market context (not MENA localisation): as of 30 June 2026 India is Figma's second-largest market by daily active users; Figma launched a Hindi localisation earlier in 2026 and announced an MCP partnership with Sarvam (Indus). That is India-first AI context — it is not an Arabic RTL guarantee. (Figma deepens investment in India, 15 Oct 2026)

What Config India actually shipped — and what MENA teams should not assume

Config India is a product launch day, not a localisation day. The Help Center table is the authority for availability:

Feature	Availability	Access (per Help Center overview)
Code layers	Open beta	Rolling out to all plans
Figma Specs	Open beta	Professional, Organization, Enterprise
Payload in Figma	Available now	All plans in Figma Make
MCP improvements	Available now	All plans (limits vary by plan/seat)
Guidelines	Open beta	Professional, Organization, Enterprise
Code source in libraries	Closed beta	—
Centralized design systems	Preview	Preview

What this means for Gulf, Egypt, Jordan, and Levant product orgs:

Do not wait for a "MENA pack". There is no Config India bullet that says Arabic typography, bidirectional text, or RTL auto layout behaviour changed. Hindi localisation is documented for India; Arabic is not claimed in these launch pages. Treat RTL as your verification backlog.
Plan seats matter for Specs. If your studio is on Starter, Specs may not be in your rolling wave yet (overview table lists paid Pro/Org/Enterprise). Code layers are listed for all plans including Starter. Confirm what your file browser and toolbar actually show before you rewrite the handoff SOP.
Open beta means staggered access. Help Center FAQs say you may get code layers or Specs at a different time than teammates. The operational rule: document who has the Code icon and Spec icon this week, and do not block a release on a feature that has not appeared in the account yet.
Agents amplify whatever your Spec writes. A Spec that says "mirror LTR padding" will ship bad Arabic. A Spec that says "verify dir, logical CSS, and Arabic font metrics on every extracted screen" gives Claude Code and Cursor a usable contract.

Our earlier posts on the Figma-to-production handoff, design tokens across web and mobile, and multilingual product design still apply — Config India adds running code and Markdown Specs on the same canvas those posts already treat as the shared source of truth.

Figma code layers: a MENA product-team checklist

Code layers hold real, running code on the Design canvas. The Help Center and code-layers blog list four practical entry points:

Capture code from a webpage with the Figma Chrome extension and paste it as a code layer.
Select design frames and prompt the agent to turn them into a code layer.
Clone a connected GitHub repo and build on an existing frontend.
Add an empty code layer and prompt the agent from scratch.

For Arabic RTL products, turn that into a test protocol, not a demo script:

A. Capture your live Arabic surface first. If you already ship an Arabic web app, capture the production (or staging) Arabic URL into a code layer. You now have a baseline of what customers see, sitting next to the LTR exploration frames. Compare: does the agent's new layer inherit your dir="rtl" document setup, or does it regenerate an LTR shell? Verify — do not assume. Figma's launch pages do not document RTL capture behaviour.

B. Prefer logical CSS and token names in anything GitHub-fed. When you connect a repo, the agent builds on that codebase. If your tokens still say paddingLeft / marginRight instead of logical inline-start / inline-end, every agent edit will fight Arabic layout. This is the same discipline we recommended in design tokens that survive web and mobile — Config India makes the cost of bad tokens visible because the prototype runs.

C. Duplicate layers for EN vs AR exploration, then merge deliberately. The code-layers blog emphasises side-by-side duplicates for alternative directions. For bilingual products, treat language as a direction: one layer for EN flow, one for AR flow, then ask the agent to merge only after both pass the checklist below. Do not "translate in place" on a single layer unless your Spec forbids layout drift.

D. Use Extract designs as a bilingual review gate. The blog describes extracting a screen or full flow back into editable Figma layers for visual polish. For MENA teams, extraction is where you catch truncated Arabic labels, mirrored icons that should not flip, and numbers/dates that should stay LTR inside RTL. Mark frames ready for dev only after that review.

E. Push to a branch; do not merge agent output unread. Code layers can push updates to a GitHub branch and open a PR. Require bilingual screenshot evidence (EN + AR) on that PR — the same bar you already use for human PRs. Agents do not get a free pass because the demo looked good in fullscreen.

F. Mobile mirror is a second device check, not localisation proof. Help Center notes Specs and code layers on the Figma mobile app; the blog tip is to mirror a code layer on mobile. Use it to feel touch targets and keyboard overlap for Arabic input. It does not prove font fallback on customer devices.

G. Credits clock: ship experiments before 4 November 2026. On paid plans, creating and editing inside code layers is free through 4 November 2026; after that, those tasks consume AI credits like other agentic features. Other agent work in the same prompt still costs credits during the promo. Enterprise admins who must freeze AI spend can disable AI features (which turns off all AI features, not only code layers).

Related: AI in product development for guardrails when agents write UI code; fintech design systems and product engineering if your Arabic product is regulated.

Figma Specs: Markdown that agents and humans share

Specs are Figma's answer to the "context lives in someone's laptop Markdown" problem. The Specs blog (15 October 2026) frames Specs as a multiplayer container for written intent that sits on the canvas next to designs, FigJam diagrams, and code layers. You can drag a .md file onto the canvas, embed frames or FigJam nodes inside the Spec, duplicate Specs for parallel riffs, and hand a Spec link to a coding agent through MCP so Markdown, frame references, diagrams, and Code Connect snippets travel together.

For MENA product teams, Specs are the place to encode bilingual acceptance criteria that tickets usually bury:

Language matrix in the Spec, not in Slack. For each screen: EN copy key, AR copy key, truncation rule, plural rules, and whether the layout is mirrored or redesigned. Embed the EN and AR frames side by side in the Spec so the agent sees both.
RTL verification section as a first-class heading. Example checklist items your Spec should force humans and agents to answer: document dir; logical properties vs physical; icon flip allow-list; Arabic font stack and fallback; number and date isolation; text input caret and selection; toast/snackbar alignment; empty states with long Arabic strings.
What the agent must not invent. Spell out: do not reverse brand marks; do not auto-translate legal microcopy; do not change currency formats without the compliance row in the Spec.
Comments are part of the Spec. The Specs blog notes the Figma agent can read and reply to comments. Use comment threads for open RTL questions ("does this chevron flip?") so the answer lands in the durable Spec, not in a meeting recording.
FigJam crit → Spec. Summarise design crit stickies into a Spec before anyone prompts Claude Code. That is how you stop "we decided Arabic labels can wrap to three lines" from disappearing.

Specs consume AI credits when you use the agent with them (Help Center FAQ). Budget Spec drafting the same way you budget code-layer prompts. FigJam agent → Spec is noted as not consuming credits if you are in that closed beta — treat that as beta-gated, not a general MENA entitlement.

Figma MCP in Claude Code and Cursor — what changed on 15 October

The Help Center lists MCP improvements as available now: fewer tokens, more reliable task completion, ability to generate interactive code layers on the canvas, create visual assets, run Weave workflows, and read/write/create Specs. New tools called out: html_to_figma (agent HTML → editable design layers) and generate_image (consumes AI credits).

Official remote server setup (developer docs / Help Center):

Remote URL: https://mcp.figma.com/mcp (recommended over desktop localhost).
Claude Code: install the Figma plugin with claude plugin install figma@claude-plugins-official, then authenticate; or manually claude mcp add --transport http figma https://mcp.figma.com/mcp.
Cursor: /add-plugin figma, then Cursor Settings → Tools & MCP → Connect next to Figma; or add the remote URL as a custom MCP server. Desktop MCP (http://127.0.0.1:3845/mcp) still exists but Figma recommends remote.

Practical MENA workflow we recommend testing this week:

Author the bilingual Spec on the canvas (EN + AR frames embedded).
From Claude Code or Cursor, point the agent at the Spec link via Figma MCP.
Generate or update a code layer or implement in the repo — but require the Spec's RTL checklist as acceptance.
If the agent proposes UI, send HTML back with html_to_figma only after Arabic strings are real product copy, not Latin placeholders.
If MCP tool calls fail in Cursor, Figma's known-issues doc points to clearing MCP tokens and re-auth — not to "RTL is broken".

MCP usage limits and seat types still vary by plan; Dev/Full seat expectations from earlier MCP docs remain relevant for desktop server paths. Pair this with our note on UserTesting MCP servers: design context without human insight still ships the wrong product — especially for Arabic UX research.

Arabic RTL verification checklist — what MENA teams must verify (not what Figma claims)

Figma's Config India pages do not document Arabic bidirectional behaviour for code layers or Specs. Hindi localisation is an India market fact. Therefore every item below is framed as a team verification task. If your hands-on test confirms a behaviour, record it in your Spec with date and build; if not, keep it open.

Layout and direction

Does a code layer created from an Arabic production capture keep dir="rtl" / dir="auto" on the root, or reset to LTR?
Do auto-layout frames that use physical left/right survive agent edits, or must you migrate to logical properties first?
When you Extract designs from a code layer, do constraints and padding stay mirrored correctly for AR screens?

Typography

Which font stack does the agent pick when the Spec names an Arabic webfont? Does it fall back to a Latin-only face?
Line-height and letter-spacing tuned for Latin often break Arabic — re-measure on extracted frames.
Mixed EN/AR strings (order IDs, IBAN, OTP) need explicit isolation; confirm the prototype does not reorder digits.

Components and icons

Maintain an icon flip allow-list in the Spec (chevrons yes, brand logos no, media transport controls case-by-case).
Form controls: label position, error text alignment, and helper text length in Arabic.
Navigation: bottom tabs and side drawers with long Arabic labels.

Motion and interaction (Motion features are separate from Config India; still verify if you use them)

Enter/exit animations that assume left-edge origins.
Gesture affordances that imply LTR reading order.

Handoff artifacts

Spec section "RTL acceptance" must be non-empty before MCP handoff.
PR template requires EN screenshot + AR screenshot + checklist tick.
Token PR: no new physical inset tokens without a logical twin.

This is the same spirit as multilingual product design and Material 3 / Liquid Glass fintech systems: platform chrome changes; your Arabic contract stays owned by the product team.

Design-to-code handoff after Config India: a one-week operating model

Day 0–1 (access): confirm Code icon and Spec icon on Pro/Org seats; list who is still waiting on the rolling beta.

Day 1–2 (baseline): capture live Arabic web (or highest-fidelity AR prototype) into a code layer; create a Spec with the RTL verification section and embedded EN/AR frames.

Day 2–4 (explore): duplicate code layers for interaction options; keep Spec updated via MCP as decisions land; do not delete rejected layers until the Spec records why.

Day 4–5 (extract and polish): Extract designs for visual QA; fix tokens; regenerate only the agreed screens.

Day 5–7 (ship path): push branch / PR with bilingual evidence; if using Claude Code or Cursor, paste Spec link every session so context does not drift.

Credits: front-load code-layer create/edit before 4 November 2026 on paid plans; Specs agent usage still burns credits during the promo for Specs themselves.

Pricing, plans, and AI credits — keep the Help Center numbers exact

Code layers create/edit: free on paid plans through 4 November 2026; then AI credits. Other agent tasks in the same prompt still consume credits during the promo.
Specs + agent: consumes AI credits (complexity-dependent).
generate_image via MCP: consumes AI credits.
Weave MCP tool: Weave credits, not Figma AI credits (per Help Center).
Payload in Make/code layers: adding Payload uses more credits because the agent loads more guidance and writes more code.
Guidelines on libraries: may increase prompt credit use because extra context is attached.
Opt-out: Enterprise only, by disabling AI features (disables all AI features).

Do not quote third-party "credit calculator" blogs as authority; hover the in-product receipt after each prompt as Figma documents.

Frequently asked questions

What are Figma code layers and when can my team use them?

Code layers are open beta as of 15 October 2026, rolling out to Education (not K-12), Starter, Professional, Organization, and Enterprise plans with edit access. You may see the Code toolbar icon later than teammates. Creating and editing inside a code layer is free on paid plans through 4 November 2026; afterward those tasks use AI credits.

What is Figma Specs and which plans get it?

Specs is an open-beta Markdown container on the Figma canvas for shared context (PRDs, technical notes, embedded frames). The Help Center overview lists Professional, Organization, and Enterprise; the who-can-use block also lists Education and Government. Using the agent with Specs consumes AI credits. Press D or use the Specs icon once it appears in your account.

How do I connect Figma MCP to Claude Code or Cursor?

Use the remote server at https://mcp.figma.com/mcp. In Claude Code, install figma@claude-plugins-official or add the HTTP MCP server manually. In Cursor, run /add-plugin figma and Connect under Tools & MCP, or add the remote URL as a custom server. MCP can now read/write Specs and generate code layers on the canvas.

Does Config India improve Arabic RTL in Figma?

Figma's Config India Help Center and launch blogs do not claim new Arabic or RTL behaviour for code layers or Specs. They do document Hindi localisation and an India-first Sarvam MCP partnership as India-market investments. MENA teams should run the verification checklist in this article and record results in Specs — do not treat launch marketing as an RTL guarantee.

Should we rewrite our design-system handoff this week?

Yes for process, carefully for tooling. Add Specs as the durable bilingual contract, put code layers on the canvas for interactive review, and wire Claude Code/Cursor through MCP with Spec links. Do not delete Dev Mode annotations or token pipelines until Specs + code layers are available on the seats that own the system. Keep Code sources (closed beta) and centralized design systems (preview) on a watch list, not on the critical path.

Sources

Originally published on iFynx.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.

← News 🛠 Dev 🏠 Home