AI Briefing
KO

A Designer Built Their Own Figma Plugin

·2024.07.09 08:00

Key point

Using ChatGPT and TypeScript, they built a Figma plugin themselves to boost work efficiency.

1 / 2

Details

The Netmarble design team built a Figma plugin themselves to reduce repetitive work. The goal was to sync common design elements without detaching components, and to assist with tedious tasks like multi-language and multiple image size variations.

The first MVP was quickly started using ChatGPT, but the generated code didn't match the latest Figma API documentation, leading to trial and error. In particular, errors occurred from using the nonexistent getStyleById, so they switched to treating generated code as reference only and implementing by cross-checking directly with the documentation.

Afterward, they applied Figma Plugin DS to create a Figma-like UI, and expanded features to fit the plugin's structure. However, some challenges weren't fully resolved cleanly, such as separating scripts inside ui.html, the behavior of loadFontAsync, and the type differences between FontName.style and StyledTextSegment.fontweight.

The core features are as follows.

  • Syncing styles of elements that share the same name as the selected object
  • Preventing malfunctions through input form validation and button activation conditions
  • Enhanced accessibility for feature switching and toggles by applying WAI-ARIA
  • Simple but useful UX that remembers the last menu state and input values
  • Controlling how long input values are retained using clientStorage and date differences

After actual use, even though it ended up being used mainly for certain features, work speed and efficiency improved by about 50% or more compared to before. Ultimately, this experience shows that even non-specialists can realize work automation with the combination of ChatGPT + official documentation + hands-on implementation.

This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.

Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.