Code Connect

Code Connect bridges the gap between design and code. It links Figma components to their code implementations, so developers can see real code snippets directly in Figma’s Dev Mode.

How It Works

1. You define mappings between Figma components and code files
2. Code Connect pushes these mappings to Figma
3. Developers see your actual code when inspecting components in Dev Mode

Setup

npm install -g @figma/code-connect

figma connect login

figma connect init

import figma from "@figma/code-connect";
import { Button } from "./Button";

figma.connect(Button, "https://figma.com/design/FILE/..?node-id=1:23", {
  props: {
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
      Ghost: "ghost",
    }),
    disabled: figma.boolean("Disabled"),
    icon: figma.instance("Icon"),
  },
  example: ({ label, variant, disabled, icon }) => (
    <Button variant={variant} disabled={disabled}>
      {icon}
      {label}
    </Button>
  ),
});

import CodeConnect

struct Button_doc: FigmaConnect {
  let component = Button.self
  let figmaNodeUrl = "https://figma.com/design/FILE/..?node-id=1:23"

  @FigmaProp("Label")
  var label: String = "Click me"

  @FigmaProp("Variant", mapping: [
    "Primary": .primary,
    "Secondary": .secondary,
  ])
  var variant: ButtonVariant = .primary

  var body: some View {
    Button(label, variant: variant)
  }
}

import com.figma.code.connect.*

@FigmaConnect("https://figma.com/design/FILE/..?node-id=1:23")
class ButtonDoc {
  @FigmaProp("Label")
  val label: String = "Click me"

  @FigmaProp("Variant", mapping = mapOf(
    "Primary" to ButtonVariant.Primary,
    "Secondary" to ButtonVariant.Secondary,
  ))
  val variant: ButtonVariant = ButtonVariant.Primary

  @FigmaExample
  @Composable
  fun Example() {
    Button(text = label, variant = variant)
  }
}

figma connect publish

Property Mappings

Code Connect maps Figma component properties to code props:

Config Reference

{
  "codeConnect": {
    "include": ["src/**/*.figma.{tsx,ts}"],
    "exclude": ["node_modules"],
    "parser": "react",
    "importPaths": {
      "src/components/*": "@mylib/components"
    }
  }
}