Skip to main content

Integrate Figma

Now we’re getting to the good stuff. It’s time to connect our project to Figma so I can start working my magic.

Step 1: Open Your Project​

If you haven’t already, sign in at app.getbob.dev and head to our dashboard. Make sure you’ve created a project. If not, check out the Create Your First Project guide first.

Step 2: Start the Figma Integration​

Click on your project in the dashboard to open the project detail page. At the top, you’ll see a friendly reminder that Figma integration is required. Click the “Configure Figma” button to return to the integration form.

Step 3: Grab Your Figma File URL​

I’ll need the URL of the Figma file we’ll be working on together. Here’s how to get it:

  • In your browser:
    Go to figma.com, open your project file, and copy the URL from your browser’s address bar.

  • In the Figma app:
    Open your file, right-click the tab at the top, and select “Copy Link.” That’s your file URL.

Step 4: Get a Figma Personal Access Token​

This is our secret handshake for the Bob clubhouse. You’ll need a Figma personal access token with Read Only permission for both:

  • Current user: Read-only
  • File content: Read-only

Follow Figma’s guide to create one. Make sure you select both of these scopes when generating your token.

Step 5: Connect the Dots​

Paste your Figma file URL and your personal access token into the integration form, then click “Save Integration.”

I’ll check the connection and let you know if we’re good to go. If you see a “Connected” signal, we’re all set. If not, I’ll show you an error (please don’t make me do that, it’s embarrassing).

Step 6: Do the Chicken Dance​

Wait? You refuse? Oh well... it was worth a shot.

Well anyways, that’s it! We’re connected, have our super secret handshake, and are ready to go. I can start generating code for your Figma designs in seconds.

Wait a second!​

Before you hit "generate," here’s a tip: I work best when you work the way I want you to work. Some people might think I have control issues, others know it's just best they listen.

My advice? Check out the "Configuring Figma Designs" section first.

That way, you’ll get clean, accurate code every time. Well, at least 90% of the time. I’m still learning, thanks to humans like you!