Summary
Highlights
This video will teach us how to connect Cloud Desktop with Figma using Figma Consol MCP. This server allows AI models to interact directly with Figma design files and tools. We will use Cloud Desktop for a more user-friendly experience, exploring how AI can generate design tokens, create buttons with variants, and build prototypes. The final prototype will be transferred to Figma Make, completing the AI-assisted creative cycle.
To establish the connection, we navigate to the 'Figma conso MCP' GitHub repository. Essential requirements include Node.js, the Figma desktop application, and an MCP client (we'll use Cloud Desktop). First, download the project ZIP file and extract it. The crucial file is 'manifest.json' located in the 'Figma Desktop Bridge' subfolder.
Confirm Node.js is installed by opening the terminal and typing 'Node -version'. If not installed, a link to the official Node.js website is provided. Next, generate a personal access token in Figma. Go to Figma's settings, then security, and create a new token. Name it (e.g., 'design-system'), set an expiration, and select all options under 'Files' in the scope. Copy the generated token as it won't be visible again.
For Cloud Desktop, we need to add a specific code snippet from the GitHub repository to the 'clouddktopconcfig.json' file. This file's location is provided in the repository. Open the file with a code editor, copy the 'Figma Console' section, and paste it. Then, insert the previously generated personal access token into the designated area within the code.
Open a Figma design file in the desktop application (e.g., 'design system test'). Go to plugins, then 'development', and import the plugin from 'manifest.json' located in the downloaded GitHub project. This registers the plugin in development mode. Share your screen between Cloud Desktop and Figma. In Cloud Desktop, type a prompt asking if it can access the Figma file. A positive response confirms the connection.
Instruct Cloud Desktop to create a variable collection named 'primitive' with all color variables from Tailwind CSS. Cloud will initiate the process, creating the collection and progressively adding color variables. You can observe the tools being executed in the chat and in real-time in Figma. Cloud will indicate when the collection, with 244 color variables, is successfully created, categorizing them by warm, green, blue, purple, and pink tones. Verify this in Figma's variable panel.
Next, ask Cloud Desktop to create a 'button' component with variants for its 'default', 'hover', 'active', 'focus', and 'disabled' states, utilizing the previously created color variables. Cloud will execute the necessary tools, and you'll see a preview of the button with its five variants in Figma. Cloud will also provide a detailed explanation of the button's creation and the color variables used.
To generate a landing page, insert a specific prompt into Cloud Desktop, asking for a prototype of a fictitious design agency landing page. Cloud will build the prototype within Figma. While Cloud Desktop generates a good initial version, Figma Make offers more precise and well-defined prototypes for these types of exercises. Cloud will also provide feedback on the design, suggesting adjustments like logo and navigation link spacing, and confirming the application of auto-layouts.
Select the newly created landing page frame in Figma and send it to Figma Make. In Figma Make, instruct it to create a responsive web prototype from this design, specifying that the header menu should hide for devices narrower than 576 pixels. Figma Make will process this, redacting the implementation details in its chat. The resulting prototype will be responsive, with navigation links adjusting for mobile views, and interactive elements like hover effects on buttons. The generated code (HTML and Tailwind CSS) allows for publishing the project as a real website, closing the entire creative process.
This exercise demonstrates how Cloud Desktop can be used to create variables, components, and prototypes directly within Figma design files. Although some manual adjustments might be needed in Figma, the integration with Figma Make allows for a complete creative workflow, culminating in a functional, responsive web prototype that can be published.