Empathy Map Figma Template (English + Arabic, Light + Dark)
by Laith Aljunaidy
$0+
You have interview notes and a stakeholder asking for a persona. Between those two sits the step everyone skips: writing down what the user actually said, separately from what you decided it means.
The full guide, every block explained in English and Arabic: laithjunaidy.com/store/empathy-map
What is on the board
The centre card. The persona name, role, age and city, and under it the one situation this map covers. One map, one situation. Do not average two.
01 Says and 02 Thinks. Two quadrants. Says takes her words out loud, lifted from the interviews. Thinks takes what she does not say out loud. Four lines each in the example.
03 Does and 04 Feels. Does is observed actions in the order they happened, with the times attached. Feels is one emotion word and the trigger that caused it, never a feeling on its own.
05 Pains. A full width row. What blocks her, pulled from the four quadrants above it. One line each, so you can count them.
06 Gains. A full width row. What a good outcome looks like to her, written so it can be measured later.
Before and after
Before: Notes and interpretation in the same paragraph.
After: Says and Thinks in two separate cells.
Before: "The user is frustrated."
After: One word, and the trigger that caused it.
Before: Feelings guessed at a whiteboard.
After: Lines lifted straight out of a transcript.
Before: Pains that are really feature requests.
After: Pains pulled from the four quadrants above them.
Before: Gains nobody could ever measure.
After: A gains row written to be measured.
Before: Arabic pasted into an English board.
After: Levantine text on a board built right to left.
What lands in the download
FIG The template. One Figma file, four pages: English light, English dark, Arabic light, Arabic dark, all on one variable collection. Auto layout throughout, so every cell grows as you type.
PDF The guide. 8 pages: the four boards, a five step how to use, and a glossary of every field with its Arabic label beside it.
PDF, MD Pro. Five Claude prompts: fill it from my notes, critique it, Arabic edition, turn it into insights, push it to Figma.
PDF Pro. The facilitation guide. A thirty minute session: what to ask, in what order, and how to close it.
FIG Pro. A second worked example in a second market, as its own Figma file, so you can read the method instead of guessing at it.
FOLDER Pro. The Claude Code skill. Point it at your notes folder and it fills the board, then writes it into your own Figma file by layer name.
Who it is for, and when to run it
For designers and founders who have raw interview notes and need a shared picture before a persona. Run it once per situation, straight after the interviews, with the transcript open beside you.
Two editions. Free: the Figma file and the PDF. Pro, 10 dollars: adds the five prompts, the facilitation guide, the second worked example and the Claude Code skill.
Shipping a product to Arabic users? Share your screen and I take one flow apart with you in 60 minutes, then you get a fix list ranked by impact: Arabic UX Teardown.
عندك ملاحظات مقابلات وحدا بيطلب منك بيرسونا. بينهم في خطوة الكل بيتخطاها: تكتب شو قال اليوزر فعلاً، منفصل عن شو انت قررت إنه بيعني.
الشرح الكامل لكل بلوك بالعربي والإنجليزي: laithjunaidy.com/ar/store/empathy-map
شو في على اللوحة
كرت المنتصف. اسم البيرسونا ودورها وعمرها ومدينتها، وتحته الموقف الوحيد اللي هالخريطة بتغطيه. خريطة وحدة، موقف واحد. ما تجمع موقفين.
01 بتقول و 02 بتفكر. مربّعين. "بتقول" فيه كلامها بصوت عالي، مأخوذ من المقابلات. "بتفكر" فيه اللي ما بتقوله. أربع أسطر بكل وحدة بالمثال.
03 بتعمل و 04 بتحس. "بتعمل" أفعال ملاحَظة بالترتيب اللي صارت فيه مع الأوقات. "بتحس" كلمة شعور وسببها، مش شعور لحاله.
05 نقاط الألم. سطر عريض. شو بيعطّلها، مأخوذ من الأربع مربعات اللي فوقه. سطر لكل نقطة عشان تقدر تعدّهم.
06 المكاسب. سطر عريض. شو شكل النتيجة المنيحة بالنسبة إلها، مكتوبة بشكل بتقدر تقيسه بعدين.
قبل وبعد
قبل: ملاحظات وتفسير بنفس الفقرة.
بعد: "بتقول" و"بتفكر" بخانتين منفصلات.
قبل: "اليوزر متضايق."
بعد: كلمة وحدة، والسبب اللي عملها.
قبل: مشاعر بتخمّنها عالوايت بورد.
بعد: أسطر مأخوذة من نص المقابلة.
قبل: آلام هي بالأصل طلبات ميزات.
بعد: آلام مسحوبة من المربعات الأربعة فوقها.
قبل: مكاسب ما حدا بيقدر يقيسها.
بعد: سطر مكاسب مكتوب عشان ينقاس.
قبل: عربي ملزوق بلوحة إنجليزية.
بعد: نص باللهجة على لوحة من اليمين لليسار.
شو بينزل معك
FIG القالب. ملف فيجما واحد بأربع صفحات: إنجليزي فاتح، إنجليزي غامق، عربي فاتح، عربي غامق، كلهم على مجموعة متغيرات وحدة. Auto layout بكل مكان، فكل خانة بتكبر مع الكتابة.
PDF الدليل. 8 صفحات: اللوحات الأربع، طريقة الاستخدام بخمس خطوات، وقائمة بكل خانة مع تسميتها العربية جنبها.
PDF, MD Pro. خمس برومبتات لكلود: عبّيها من ملاحظاتي، انتقدها، النسخة العربية، حوّلها لاستنتاجات، ادفعها لفيجما.
PDF Pro. دليل الجلسة. نص ساعة: شو تسأل، بأي ترتيب، وكيف تسكّرها.
FIG Pro. مثال ثاني كامل بسوق تاني، بملف فيجما لحاله، عشان تقرا الطريقة مش تخمّنها.
FOLDER Pro. سكيل Claude Code. وجّهه على مجلد ملاحظاتك فبيعبّي اللوحة، وبعدين بيكتبها بملف فيجما تبعك حسب اسم الطبقة.
لمين، وإيمتى تشغّلها
لمصممين ومؤسسين معهم ملاحظات مقابلات وبدهم صورة مشتركة قبل البيرسونا. شغّلها مرة لكل موقف، بعد المقابلات على طول، ونص المقابلة مفتوح جنبك.
نسختين. مجاني: ملف فيجما و PDF. Pro بعشر دولار: بيضيف البرومبتات الخمسة ودليل الجلسة والمثال الثاني وسكيل Claude Code.
بتطلق منتج ليوزرز عرب؟ بتشارك شاشتك وبفكك فلو واحد قدامك بساعة، وبعدها بتوصلك قائمة تصليحات مرتبة حسب الأثر: Arabic UX Teardown.