User Flow Figma Template (English + Arabic, Light + Dark)
by Laith Aljunaidy
$0+
The flow lives in a chat thread. Engineering builds the happy path, and the first question in QA is what happens when she is not signed in.
The full guide, every block explained in English and Arabic: laithjunaidy.com/store/user-flow
What is on the board
Start and end. Two black pills that close the flow at both ends, so there is never an argument about where it begins or what counts as finished.
Screen cards. A bold screen title and a note line under it saying what is actually on that screen. A component, so renaming one does not mean redrawing it.
Decision diamonds. A question with a yes path and a no path off it. The no branch drops below the main line, does its work, and returns, so no two arrows cross.
Labelled paths. Every path carries its own label, green for yes and red for no. Hide the label on paths that do not need one.
The legend. A row naming the four pieces: start or end, screen, decision, path when yes, path when no. Every colour is a variable, so dark mode is one switch.
Before and after
Before: A flow described in a chat thread.
After: A board with a start and an end.
Before: The happy path only.
After: A no branch off every decision.
Before: Boxes redrawn by hand each time.
After: Screens and decisions as components.
Before: Colours hard coded into the shapes.
After: Every colour a variable, dark in one switch.
Before: Arrows crossing each other.
After: The no branch drops below and returns.
Before: An Arabic flow mirrored from the English one.
After: A flow that starts on the right and ends on the 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 the handover between design and engineering, and for the moment before it when you still have to decide what happens on the unhappy path. Draw it before the screens, not after them.
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/user-flow
شو في على اللوحة
بداية ونهاية. حبتين سودا بيسكّروا المسار من الطرفين، فما بيصير نقاش وين بيبلش ولا شو بيعتبر خلص.
كروت الشاشات. عنوان شاشة عريض وسطر تحته بيقول شو موجود فعلاً على هالشاشة. كومبوننت، فتغيير الاسم ما بيعني إعادة رسم.
معينات القرار. سؤال وطالع منه مسار نعم ومسار لا. فرع "لا" بينزل تحت الخط الرئيسي، بيعمل شغله، وبيرجع، فما بيتقاطع سهمين.
مسارات مسمّاة. كل مسار عليه لافتته، أخضر لنعم وأحمر للا. خبّي اللافتة على المسارات اللي ما بتحتاجها.
المفتاح. سطر بيسمّي القطع: بداية أو نهاية، شاشة، قرار، المسار لما الجواب نعم، المسار لما الجواب لا. كل لون متغير، فالوضع الغامق بضغطة.
قبل وبعد
قبل: مسار موصوف بمحادثة.
بعد: لوحة إلها بداية ونهاية.
قبل: المسار المثالي بس.
بعد: فرع "لا" من كل قرار.
قبل: مربعات بترسمها بإيدك كل مرة.
بعد: شاشات وقرارات ككومبوننتس.
قبل: ألوان مكتوبة جوا الأشكال.
بعد: كل لون متغير، والغامق بضغطة.
قبل: أسهم بتتقاطع فوق بعضها.
بعد: فرع "لا" بينزل تحت وبيرجع.
قبل: مسار عربي مقلوب عن الإنجليزي.
بعد: مسار بيبلش من اليمين وبيخلص عاليسار.
شو بينزل معك
FIG القالب. ملف فيجما واحد بأربع صفحات: إنجليزي فاتح، إنجليزي غامق، عربي فاتح، عربي غامق، كلهم على مجموعة متغيرات وحدة. Auto layout بكل مكان، فكل خانة بتكبر مع الكتابة.
PDF الدليل. 8 صفحات: اللوحات الأربع، طريقة الاستخدام بخمس خطوات، وقائمة بكل خانة مع تسميتها العربية جنبها.
PDF, MD Pro. خمس برومبتات لكلود: عبّيها من ملاحظاتي، انتقدها، النسخة العربية، حوّلها لاستنتاجات، ادفعها لفيجما.
PDF Pro. دليل الجلسة. نص ساعة: شو تسأل، بأي ترتيب، وكيف تسكّرها.
FIG Pro. مثال ثاني كامل بسوق تاني، بملف فيجما لحاله، عشان تقرا الطريقة مش تخمّنها.
FOLDER Pro. سكيل Claude Code. وجّهه على مجلد ملاحظاتك فبيعبّي اللوحة، وبعدين بيكتبها بملف فيجما تبعك حسب اسم الطبقة.
لمين، وإيمتى تشغّلها
لتسليم الشغل من التصميم للتطوير، وللحظة اللي قبلها لما لسا لازم تقرر شو بيصير بالمسار المش مثالي. ارسمه قبل الشاشات مش بعدها.
نسختين. مجاني: ملف فيجما و PDF. Pro بعشر دولار: بيضيف البرومبتات الخمسة ودليل الجلسة والمثال الثاني وسكيل Claude Code.
بتطلق منتج ليوزرز عرب؟ بتشارك شاشتك وبفكك فلو واحد قدامك بساعة، وبعدها بتوصلك قائمة تصليحات مرتبة حسب الأثر: Arabic UX Teardown.