Get CSS from Figma design

Pre-requisites

You must have Figma’s Desktop app installed on your computer. 

MCP Client Setup

1. Follow the instructions here to enable Figma’s MCP server in the app. 

2. Open Saga and navigate to Settings. If you can’t find Settings, click on the Saga icon in your dock first.

   

   

3. Scroll to MCP Setup. Click Set up MCPs.

4. Copy the following configuration into the MCP Configuration textbox

   {
     "mcpServers": {
       "Figma": {
         "url": "http://127.0.0.1:3845/sse"
       }
     }
   }

5. Click Save. 

6. Make sure the Figma server says Loaded under MCP Servers Status.

7. Now you’re ready to execute MCP actions! Click Let’s go! Or navigate to the Assistant to start.

8. Select an element in a design file and ask the Assistant for the CSS. Make sure to say “using my current selection in Figma” as part of your request.

   1. Example: “What’s the CSS for my current selection in Figma?” 

   2. NOTE: If it’s not working, restart the Figma app and then try again.

9. You can also try out other requests and share your favorites in our Discord. 

Troubleshooting Common Issues

1. Note that MCP is a relatively new concept and the quality of response largely depends on the quality of the MCP servers themselves.

   1. Says it’s unable to perform the action or fails to execute the action

      1. Check that the MCP server is marked as “Loaded” under MCP Tools Loaded in MCP Settings. 

      2. Try clicking “Save” again. 

      3. Restart the Figma app.

   2. Says it doesn’t have access to your current selection.

      1. Try saying “Current selection in Figma.”