{"id":250668,"date":"2025-09-18T12:08:31","date_gmt":"2025-09-18T04:08:31","guid":{"rendered":"https:\/\/www.grab.com\/sg\/?post_type=editorial&p=250668"},"modified":"2025-12-13T00:17:22","modified_gmt":"2025-12-12T16:17:22","slug":"a-grab-engineer-built-this-design-tool-for-his-team-now-were-improving-it-for-everyone","status":"publish","type":"editorial","link":"https:\/\/www.grab.com\/sg\/inside-grab\/stories\/a-grab-engineer-built-this-design-tool-for-his-team-now-were-improving-it-for-everyone\/","title":{"rendered":"A Grab engineer built this design tool for his team. Now, we\u2019re improving it for everyone"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Every great idea starts with spotting a problem. Sonny Lazuardi, a UX engineer at Grab Design\u2014Grab\u2019s internal design organisation\u2014saw his colleagues burdened by endless, repetitive tasks. Especially on Figma, a platform used by designers to create digital interfaces or prototypes. Sonny observed that designers often updated text manually across multiple screens, manually resized components, organised layers, and so on.<\/p>

He wanted to automate some of these tedious workflows, so that designers could focus on what they do best\u2014creative, user-centered work. This vision also aligns perfectly with our team\u2019s commitment to efficiency and innovation.<\/p>

The birth of Talk To Figma MCP<\/h5>

Sonny saw a solution in Cursor, an AI-powered tool that\u2019s particularly good at writing code based on natural language input.\u00a0<\/p>

Many Grabbers, including the design team, had started using Cursor for various tasks, and this laid the groundwork for integrating AI more deeply into our design processes.<\/p>

Sonny created an integration between Cursor and Figma, which he called Cursor Talk To Figma (CTTF) MCP<\/em><\/a>. This tool allows designers to execute tasks in Figma, or extract information about Figma designs, by entering simple instructions via a custom plug-in powered by Cursor.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Via this plugin, designers can, for example:<\/p>

  • Read Figma designs programmatically: Extract detailed information about layers, styles, components, and layouts<\/li>
  • Modify designs through natural language: Create, update, and manipulate Figma elements using AI commands<\/li>
  • Automate design workflows: From text replacement to component swapping, prototype visualization to annotation management<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
    Using the Talk to Figma plugin, designers can swiftly generate annotations about the design\u2019s context and flow, enabling a clear handover to the engineers<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    Significant time-saver<\/h5>

    Talk to Figma MCP<\/span><\/i> is a breakthrough integration that bridges the gap between AI-powered development tools and design platforms. It saves designers significant time and effort.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
    Sometimes, designers need to apply a new design system to a number of screens. This task was previously done manually and takes effort: You have to extract the texts and copy them one by one. Talk to Figma MPC uses AI to automate that workflow.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    MCP stands for Model Context Protocol: It\u2019s an open protocol that standardises how applications provide context to large language models (LLMs). It enables you to build all kinds of agents and complex workflows on top of LLMs and connect them with other platforms.<\/p>

    In our context, we used MCP to create a tool that lets Cursor and Figma interact effectively.<\/p>

    Evolving the idea<\/h5>

    In order to evolve the idea, Sonny published it on GitHub, a platform where developers build software and collaborate, sharing it to inspire and engage with the broader community, while also gathering feedback to assess product\u2013market fit.\u00a0<\/p>

    As an experimental project exploring future opportunities, the insights from the community shaped the current version of Talk to Figma MCP and highlighted the tool\u2019s relevance, allowing us to refine its vision and focus on what truly matters.\u00a0<\/p>

    What began as a simple initiative quickly gained traction, earning over 5,000 GitHub stars.<\/p>

    Contributing to the community<\/h5>

    At Grab, every individual is empowered to build ambitious, forward-looking products that shape the future of tech and design. Surrounded by brilliant minds tackling real, large-scale challenges, we\u2019re given the freedom to explore bold ideas and turn them into reality.<\/p>

    When our work reaches meaningful impact, our culture of giving back kicks in: we open source it, maintain it, and continue to grow it in the public space, because innovation is better when it\u2019s shared.<\/p>

    Talk to Figma MCP has now reached a quality level that makes it ready for a wider impact.<\/p>

    So, to ensure its future and broader use, Talk to Figma MCP will officially move to a Grab-owned repository, but it will stay an open-source project. This move highlights Grab’s commitment to supporting internal innovation while sharing valuable tools with the global design and development community. By bringing it under Grab’s wing and maintaining its open-source status, we’re ensuring its continued growth and contribution, making it a vital asset for designers everywhere.<\/p>

    At Grab, we’re not just creating tools; we’re redefining how AI and human creativity work together. Our aim is to empower designers, taking care of the mundane so they can focus on the magical. We\u2019re proud to be building this future, one meaningful step at a time, as part of the Grab Design team.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"parent":180237,"menu_order":0,"template":"grab21-default","acf":[],"_links":{"self":[{"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/editorial\/250668"}],"collection":[{"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/editorial"}],"about":[{"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/types\/editorial"}],"version-history":[{"count":44,"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/editorial\/250668\/revisions"}],"predecessor-version":[{"id":255538,"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/editorial\/250668\/revisions\/255538"}],"up":[{"embeddable":true,"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/editorial\/180237"}],"wp:attachment":[{"href":"https:\/\/www.grab.com\/sg\/wp-json\/wp\/v2\/media?parent=250668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}