Pensil Ajaib

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.

How might we

bring guideline aligned copy directly into Figma without tool‑switching?

How might we

respect product and audience differences automatically so designers don't need to memorize rules?

How might we

give content designers cleaner starting points instead of fixing messy placeholders?

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.

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.

Screenshot of a GitHub repository file browser showing the ‘pensil-ajaib-data’ project, with the ‘murid-tribe’ folder open and files such as glossary.md, icon.svg, and tribe.md listed. — Foldering structures for our markdown files

Screenshot of a GitHub page displaying a markdown document titled ‘Full Glossary Ruang Murid Reference,’ listing categorized features and types of learning materials with bullet points and icons. — Assign IDs to the references

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.

Dark-themed code editor screenshot showing JavaScript functions for component detection and guideline retrieval, including logic for analyzing layers, assigning confidence levels, and composing documentation from multiple guideline files.

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.

Two onboarding screens for the ‘Pensil Ajaib’ tool: the first asks users to select their tribe, with ‘Murid’ selected, and the second asks who the writing is for, with ‘Guru’ selected and other role options listed.

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.

Illustration of a yellow pencil mascot shown in three poses: raising one finger as if giving an idea, smiling and flashing a peace sign while walking, and standing thoughtfully with a hand on its cheek.

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

Three illustrations of a pencil mascot in energetic action poses: jumping forward with a raised finger, running while holding a briefcase and flag, and standing confidently while holding a magnifying glass.

Impact

Workflow Change

Instead of a six-step cross‑tool workflow, designers now work in three steps:

Click a layer (or frame)
Open Pensil Ajaib, review three suggestions
Apply the one that fits best

This makes it realistic for designers to use guideline-aligned copy even in early, fast-paced exploration moments, not only at the end of the process.

Better Use of Content Designers

Because designs now start with better placeholders:

Content designers spend less time cleaning up inherited text
They can focus on narrative, structure, and clarity across flows
Product discussions in reviews can move from “change this word” to “does this flow serve the user?”
Cataloged UI components (button, label, toast, empty state, etc.) with clear specs and examples

In public service projects, this also helps stakeholders understand intent earlier and reduces misalignment that can ripple into policy or operational decisions.

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:

Which guidelines are non‑negotiable (e.g. legal wording)?

Which can flex based on audience or component?

How much rationale is enough to build trust without slowing the designer down?

Screenshot of an online meeting interface showing a shared whiteboard or design canvas with multiple slides and UI mockups, participant tiles listed on the right, and meeting controls along the bottom. — Multiple rounds of testing and iteration were needed to get that balance right.

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.