Understanding Figma's Code Connect

***

Picture this. You are a designer, you sweat the details. You make components in Figma, it’s not just beautiful visually, but also under the hood. All your properties and naming has been fine-tuned for optimal efficiency and flexibility. Then you hand this off to the engineering team, they come back with an implementation that looks like an off-brand version of your design, and to top it all off, it’s using your properties in Figma all wrong.

Now let’s flip the coin and picture this. You’re a developer, you care about reusability and efficiency. You get this simple design for a component in Figma that you need to create and add to an ever growing library of components. There’s not much documentation, and if there was, it’s not technical enough for what you need. It’s much quicker just to recreate this from scratch. A few sprints later, you start cleaning up some technical debt and you realise this component has been created multiple times, and all done differently….yikes

There’s a communication issue. Designers and developers are speaking to each other, just not in the same language and the same framing.

This is where a translator comes in, Code Connect.

***

?? What is Code Connect?

It is a feature in Figma’s Dev Mode (This means you need to have an enterprise or organisation account to use it, booo ???, I know ).

Code Connect takes the components that you have made in Figma, and maps its properties to existing code.

???What’s the significance of Code Connect?

When you connect a Figma component to its code counterpart, and map the properties between them, you get something really powerful. Developers can take these properties and do whatever they need with them in the code. The best part? They can just copy paste the Code Connect snippets straight from Figma into their files.

?? What Code Connect is not

Code Connect is not the styling of the component, it is more about what’s under the hood. What properties is this component using, is it a Variant, is it a Boolean; you know, the stuff that makes your component so much more efficient.

It’s not about “how to build this card” but more about “how to use this card”

Ok, cool, I’m convinced, I want consistent UX, and I want my design system to be as efficient as possible, how do I do this Code Connect thing?

Ready? Start!

Want to try this out? Let's start fresh with a new environment to keep things clean.

Pro tip: Jump onto replit.com if you want a quick and easy setup.

1. First, get your code environment ready
2. Pop open your terminal in the root folder and type in: npm install @figma/code-connect
3. Next up, run: npx figma connect
4. This opens up a menu in the terminal where you can pick which Figma component you want to link to inside your codebase... Nothing there yet? No worries - just get replit's AI to whip up a test component for you, I’ll even prompt you a prompt: Create a set of button components, which takes in some properties, to determine its hover, active, disabled, and default state; to take in text for the button label text.
5. Running npx figma connect creates a fresh .figma.tsx file that matches your chosen code component. You'll see something like this

1. Let's dive into the .figma.tsx file. This is where the magic happens - we'll connect our Figma component's properties to our code.

const sharedProps = {
  label: figma.string("Button label"),
  icon: figma.boolean("Has Icon", {
    true: figma.instance("Icon"),
    false: undefined,
  }),
  state: figma.enum("State", {
    Default: "Default",
    Accent: "Accent",
    Secondary: "Secondary",
  }),
  disabled: figma.enum("State", {
    Disabled: true,
  })
}        

I've wrapped all these properties in a sharedProps object - this way I can easily use them throughout my file.

Now, Figma gives us a bunch of property types we can use - things like figma.string, figma.boolean, and more. You can check out the full list in the docs.

Let's break down one of these properties:label: figma.string("Button label"),

• figma.string tells our code "hey, I'm looking for a string property in Figma"
• "Button label" is the exact name of that property in our Figma file

So whenever someone types something into that "Button label" field in Figma, boom - it shows up in our label variable.

1. Then further down, and this is most likely auto-generated if you used Figma’s connect AI mapping, you’ll get something like this. <DefaultButton/> would be an existing component elsewhere with all the styling and functionality

figma.connect(
  DefaultButton,
  "https://www.figma.com/design/linktoyourfigmafile/node-id=122%4B8220",
  {
    variant: {State: "Default"},
    props: sharedProps,
    example: ({label, disabled, ...props}) => {
      return (
        <DefaultButton onClick={() => {}} disabled={disabled}>
          {label}  /*<-- This is my label variable that will contain the text from "Button label" */
        </DefaultButton>
      );
    }
  },
)        

1. Now when you’re ready, put npx figma connect publish into your terminal, and it will publish the above code snippet into your Figma component
2. Once that is done, when you view your connected component in Dev mode, you’ll see this. You can now copy paste this snippet into your code, with the already set properties from Figma already set up, and used correctly and as intended

1. Continue, here would be the text that I put into my component property inside of Figma
2. Now do the same with rest, and you’ll have yourself a connect component
3. And then the power really shows when you have nested connected components. Such as a sheet, where the header, body content, buttons are all connected components with their properties set, all you have to do is copy paste the snippet and most of the work is already done!

Closing remarks

Code Connect is a game-changer for design systems. It creates this unbreakable bond between your Figma components and their code counterparts, making sure everyone follows the rules you've set up.

Now, I'll be honest - getting everything set up takes time and effort. You need to put in the work upfront and keep maintaining it. But once you've got it running smoothly, the time you save and the headaches you avoid make it totally worth it.