Overview

Pensil Ajaib is an internal Figma plugin that helps designers generate guideline‑aligned placeholder copy in just a few clicks, without leaving their design file. It was created to support public service products at INA Digital Edu where copy strongly influences how non‑technical stakeholders interpret flows and decisions.

The plugin connects three things: the current design context in Figma, our structured communication guidelines stored in GitHub, and our internal GPT‑based writing assistant. Designers select the product and audience, choose the scope of improvement, and receive three on‑guideline suggestions with short rationales that can be applied directly to layers—turning placeholder copy from a liability into a reliable part of the design process.

Problem

Placeholder copy drives product conversations. When it drifted from our guidelines, stakeholders fixated on wording instead of UX or flows—especially in public services where many stakeholders are non‑technical.

We had Ketik GPT (internal GPT) for better copy, but designers had to screenshot mockups, describe context externally, refine output, then paste back into Figma. Six steps. Too much friction.

Solution

Pensil Ajaib connects Figma, our GitHub guidelines, and our internal GPT. Designers choose product and audience, select scope, and get three aligned suggestions with rationale. No copy‑pasting

Content System

Our guidelines (tone, glossary, audience rules, component patterns) were written for humans, not machines. We restructured everything into modular Markdown files in GitHub with IDs, audience‑specific rules, and component catalogues.

We tried multiple folder structures before finding one that works for both humans and AI.

Plugin Logic

The plugin reads selected layers, infers component type, combines that with product + audience input, retrieves matching rules from GitHub, and generates three options that follow those guidelines.

The hard part: deciding what must always be enforced versus what can flex. Took multiple rounds to balance consistency with context‑awareness.

Plugin Experience

Lock Screen

Simple access control for internal use.

Setup Product & Audience

Designers first select which product and which audience they're designing for. This tells the plugin which guidelines to use.

Scope Selection

Choose single layer, multiple layers, or full frame. Optional context field for extra details.

Three Variations + Rationale

Plugin generates three aligned options, each with a short rationale explaining why (e.g. "uses official term X", "simplified for low‑literacy"). Designers can Apply one, Regenerate for new options, or Apply All.

llustration

We started with AI exploration using Nano Banana Pro to sketch mascot concepts quickly.

Then worked with illustrator Adriansyah Mursalin to hand-draw the final version. We loved the cheeky expression and relaxed vibe.

The mascot appears on lock screen, onboarding, and success states—keeping core screens clean while giving Pensil Ajaib a distinct personality.

Impact

Reflection

Looking back, the hardest part was not generating text but encoding instinctive human judgment into rules and structures a system could use consistently. Questions that guided refinement:

Pensil Ajaib wasn’t built to be impressive as “a plugin” on its own; it was built to quietly remove friction in everyday design work. Any team with clear guidelines and a real copy problem in their design process can adopt a similar approach using modular documentation, decision logic, and a lightweight plugin surface.