Their Productivity Is So Envy-Worthy

For years, technologically advanced organizations have been trying to automatically generate code from design mockups.

• [A1] Do more, with less. - Design System, what’s next?
• Introduction to DEUS
• OROR Forge: Creating a Figma to Code Tool (1) Let’s turn designs into code!

Working in a relatively small organization, I would read these tech blog posts and think, “Wow, they must have it so easy.” We didn’t have a dedicated team for our internal design system, so opportunities and time for such productivity enhancements were limited, as our focus was on product sprints.

We use Figma at my company, and I tried a design-to-code tool plugin called Anima, but it wasn’t great. So I just waited…

Then, around June 2024, Figma announced Code Connect.

Code Connect

I’d been using Figma’s Dev mode since it came out in June 2023, and I thought it was pretty good for developers. But this new update brought something even more incredible.

It was the very tool I had been so envious of: one that turns design mockups into code.

It doesn’t turn the entire mockup into code, but rather works by registering components and then converting those components into code. Still, I thought, “This is a huge step forward!”

The process is as follows:

1. Components created in Figma get a unique ID and link.

2. Run the component code generation command provided by the Code Connect CLI.

npx figma connect create "https://..." --token <auth token>

3. figma connect create uses the unique link to generate code based on the properties of the component registered on the Figma server.

This file is a definition file that specifies which URL a component is linked to, what properties the component has in Figma, and so on.

import figma from '@figma/code-connect'
import { Button } from 'src/components'
 
figma.connect(Button, 'https://...', {
  {
    props: {
      leftIcon: figma.boolean('leftIcon'),
      rightIcon: figma.boolean('rightIcon'),
      children: figma.string('children'),
      variant: figma.enum('variant', {
        default: 'default',
        outline: 'outline',
        light: 'light',
        filled: 'filled',
        subtle: 'subtle',
      }),
      color: figma.enum('color', {
        infgreen: 'infgreen',
        rallit: 'rallit',
        dark: 'dark',
        gray: 'gray',
        red: 'red',
      }),
      size: figma.enum('size', {
        xs: 'xs',
        sm: 'sm',
        md: 'md',
        lg: 'lg',
        xl: 'xl',
      }),
      states: figma.enum('states', {
        default: 'default',
        hover: 'hover',
      }),
      disabled: figma.boolean('disabled'),
      compact: figma.boolean('compact'),
      radius: figma.enum('radius', {
        md: 'md',
      }),
      fullWidth: figma.boolean('fullWidth'),
    },
    example: (props) => (
      <Button
        leftIcon={props.leftIcon}
        rightIcon={props.rightIcon}
        variant={props.variant}
        color={props.color}
        size={props.size}
        disabled={props.disabled}
        compact={props.compact}
        fullWidth={props.fullWidth}
        radius={props.radius}>
        {props.children}
      </Button>
    ),
  }
  example: () => {
    return <Button />
  },
})

4. Upload the generated definition file to Figma.

npx figma connect publish --token <token>

5. Now you can see the code when you select that component in Figma.

<img src=“/img/figma-code-connect-01.png” width=“300” alt=“Code Connect Example” />

I Can Finally Work More Efficiently

My productivity won’t increase right away, but it will soon, thanks to a global tech giant. That’s because I need to connect Code Connect to every single design system component to achieve the level of automated code generation I’m looking for.

But it’s not as easy as it seems.

• The property names used by designers in Figma often differ from the property names used in our code.
  • Connecting Code Connect has actually become a great opportunity to align these naming conventions.
• Some properties are necessary for the design mockup but are unnecessary in the actual code.
• Since it’s a beta version, the library isn’t perfect yet. The documentation isn’t very detailed, either, so I’m learning by trial and error.
• As I mentioned earlier, our team doesn’t allocate dedicated work time for these kinds of experimental productivity tools, so I have to invest my personal time. The same goes for the designers I collaborate with.
  • However, as we connect more and more components and receive positive feedback from people using them, it motivates me to keep going.