Welcome, designers! This guide shows you how to install Cursor and connect it to your Figma workflow. Learn how to use Cursor’s AI to turn your Figma designs into code and bridge the gap between design and development.

1

Download and Install Cursor

First, you need to download the correct installer for your operating system from the official website.

macOS

Download for macOS

Windows

Download for Windows

Linux

Download for Linux

Once the download is complete, run the installer and follow the on-screen instructions.

After installation, launch Cursor to make sure it opens correctly.

2

Set Up Your Workspace

A workspace is like a project folder. It keeps all your documentation files organized in one place. Let’s open your project folder.

  1. Launch Cursor if it’s not already open.
  2. From the top menu, select File > Open Folder… (or simply File > Open… on macOS).
  3. Navigate to the folder containing your documentation files and click Open.

You’ll now see your project’s files and folders listed in the Explorer panel on the left-hand side.

3

Find Your Way Around the Editor

Cursor’s interface is designed to be simple and intuitive. Here are the key areas you’ll work with:

  • Explorer (Left Sidebar): Your file browser. Click any file to open it for editing.
  • Editor (Center Area): This is where you’ll write and edit your content.
  • AI Chat (Right Sidebar): Interact with the AI to generate or modify content.
4

Edit a File

Editing your documentation is straightforward.

  1. From the Explorer, click on the file you want to change (e.g., guides/prompts.mdx).
  2. The file will open in the Editor.
  3. Click into the editor and begin typing. Your changes are saved automatically.

You can have multiple files open at once. They will appear as tabs at the top of the editor.

5

Use AI to Make Changes

The core of Cursor is its AI assistant. You can give it instructions in plain English to speed up your workflow.

  1. Open the file you want to edit.
  2. Press Cmd + K (macOS) or Ctrl + K (Windows/Linux) to activate the AI prompt.
  3. Type a command, such as “Add a new section about color theory.”
  4. Press Enter and watch the AI generate the content for you.

You’re all set! You have successfully installed Cursor, set up your project, and learned the basics of editing with AI. Happy documenting!