В наборе must-have MCP-серверов для разработки прибыло!
Имя этому чуду
"Cursor Talk to Figma MCP". Как вы понимаете, нужен он для взаимодействия из Cursor (или любого другого клиента, поддерживающего MCP) напрямую с Figma.
Схема его работы схожа с той, что была у
MCP Browsertools. Есть сервер, который необходимо запустить перед работой. К нему подключается с одной стороны Cursor с командами, а с другой – плагин Figma (вместо расширения браузера у Browsertools).
Инструкции по установке достаточно подробно описаны
на странице репозитория.
Есть лишь несколько моментов, которые можно отдельно добавить:
1. После установки bun, перед следующим шагом, обязательно проверьте, что bun работает без прописывания полного пути. Если нет, то надо перезапустить терминал.
2. Чтобы в Figma установить новый плагин, обязательно нужно быть администратором проекта. Иначе чуда не получится.
3. Само собой, работаем мы именно с приложением Figma. С браузерной версией работать не будет, так как плагину обязателен доступ к остальным элементам MCP локально.
Запуск после первичной установки происходит следующим образом:
1. Запускаем Websocket server в терминале.
2. Заходим в нужный Figma-макет, запускаем плагин и нажимаем Connect.
3. Выбираем нужный компонент, копируем ссылку на него через "Copy link to selection".
4. Заходим в Cursor, вставляем ссылку в чат и просим создать выделенный блок.
5. Также в чат лучше передать Channel ID, который предоставляет Figma plugin после коннекта к серверу. Так как без него Cursor может слегка заплутать.
А, да. Так-то это ещё и инструмент для дизайнеров. Позволяющий создавать макеты в Figma непосредственно из Cursor (или другого клиента с поддержкой MCP).
Вот полный список доступных для MCP инструментов: get_document_info, get_selection, get_node_info, get_nodes_info, create_rectangle, create_frame, create_text, set_fill_color, set_stroke_color, move_node, clone_node, resize_node, delete_node, get_styles, get_local_components, create_component_instance, export_node_as_image, set_corner_radius, set_text_content, join_channel.
Нюансы и недостатки, которые я выявил при работе с "Cursor Talk to Figma MCP":
1. В случае с Cursor не получится сразу сделать большую страницу за одну команду. На каком-то этапе он попробует из MCP получить все элементы внутри макета, переполнит контекст, Cursor предложит сделать саммари чата, открыв новый... В общем, процедура может продолжаться бесконечно без каких-либо результатов.
2. Он не умеет выгружать из Figma медиа-файлы. И если с иконками он честно пытается сделать "похожие" SVG (получается плохо), то картинки лучше делать сперва заглушками, а потом выгружать руками (надеюсь, что этот инструмент автор позже добавит).
3. Могут быть небольшие несоответствия макету. Но они заметны только в случае, если вам действительно требуется "Pixel-perfect". Да и до него всё равно можно достаточно легко добить после того, как с помощью MCP и Cursor собрали "приблизительно-похожую" страницу.
4. Также несоответствия макету может быть в случае, если блок у вас сложный, а вы решили его не разбивать на "простые" элементы. Тогда AI может сильно "упростить" элементы макета.
В медиа для вас записал, как я себе в Figma собрал макет личного блога (мама, я дизайнер!), а потом сделал его вёрстку. И всё это с помощью "Cursor Talk to Figma MCP".