دیگر در Figma طراحی نکنید
Figma ابزار درستی برای عصر «اول طراحی، بعد تحویل» بود. آن عصر تمام شد. سریع‌ترین و باکیفیت‌ترین محیط طراحی در ۲۰۲۶ خود کدبیس است، از راه v0 و Cursor و Lovable و Vercel UI. استدلال له طراحی کدمحور، پاسخ صادقانه به مخالفان، و یک آزمون پنج‌سؤالی.
فایل Figma شما عکس ثابتی از محصولی است که وجود ندارد. تا وقتی مهندس آن را شیپ کند، دیگر غلط است. فونت‌ها متفاوت رندر می‌شوند، breakpointهایی که نادیده گرفتید سر باز می‌کنند، empty state فراموش‌شده ظاهر می‌شود، و hoverای که به‌صورت یک کامنت کشیده بودید را کسی تفسیر می‌کند که شما نیستید. راه‌حل پلاگین‌های بهتر Figma نیست. راه‌حل این است که Figma را به‌عنوان ابزار طراحی کنار بگذارید و از کدبیس استفاده کنید.
این حمله به Figma نیست. Figma هنوز در کار سیستم‌ها، کاوش برند و دیاگرام‌کشی با FigJam برنده است. ادعا محدودتر و سخت‌تر است. در ۲۰۲۶، طراحی محصول در کد اتفاق می‌افتد. v0 و Cursor و Lovable و رجیستری Vercel UI جای آرتبورد را به‌عنوان محلِ واقعیِ طراحی سطوح محصول گرفته‌اند. طراحانی که هنوز فریم‌های پیکسل‌پرفکت Figma تحویل می‌دهند تا مهندسان «پیاده‌سازی» کنند، دو کار را با نصف سرعت انجام می‌دهند.
واقعاً چه چیزی عوض شد
Figma برای عصری ساخته شد که تولید گلوگاه بود. در ۲۰۱۸ ساخت یک کامپوننت React کارآمد سه روز از یک مهندس می‌گرفت و طراح در همان بازه بیست فریم hi-fi درمی‌آورد. تحویل آرتبوردهای تخت منطقی بود. آرتبورد سریع‌ترین بخش خط تولید بود.
این حساب در ۲۰۲۶ وارونه شد. v0 یک جمله را در سی ثانیه به کامپوننت کارآمد تبدیل می‌کند. Cursor یک ریپوی واقعی را با diff واقعی ویرایش می‌کند. Lovable از یک prompt یک اپ قابل دیپلوی بالا می‌آورد. آرتبورد حالا کندترین بخش خط تولید است، نه سریع‌ترین، و این فاصله هر فصل بیشتر می‌شود. تحلیل عمیق‌تر این تغییر در سطح خروجی در مرگ ماکاپ آمده است. این مطلب درباره ابزاری است که آن خروجی را تولید می‌کند.
فریم تخت بدتر نشد. میز کار بهتر شد.
جایی که Figma هنوز نانش را درمی‌آورد
صادق باشیم. Figma در چهار کار عالی است، و وانمود به غیر از این باعث می‌شود بقیه استدلال کنار گذاشته شود.
Figma هنوز در کاوش هویت برند برنده است، جایی که لوگوها، مطالعات تایپ و سیستم‌های رنگ پیش از وجود هر کدبیسی شکل می‌گیرند. در فهرست‌برداری سیستم طراحی برنده است، همان یک فایلی که هر توکن و variant و state را با مدل چندکاربره‌ای فهرست می‌کند که هیچ چیز دیگری تکرارش نمی‌کند. در دیاگرام‌کشی FigJam و همسوسازی تیم برنده است، یعنی وایت‌بردینگ و نقشه سفر که خود سطح همان گفتگوست. و هنوز برای طراحی که واقعاً نمی‌تواند کد بخواند برنده است، نقشی که در ۲۰۲۶ کمیاب‌تر از چیزی است که صنعت وانمود می‌کند اما هنوز واقعی است.
هر چیز دیگر، هر سطح محصولی که به دست کاربر واقعی می‌رسد، متعلق به کد است.
پنج تفاوت
طراحی در Figma و طراحی در کد یک کار با دو سرعت متفاوت نیستند. کارهایی متفاوت‌اند.
وفاداری. فریم Figma تایپ را تقریب می‌زند، hover را نادیده می‌گیرد، اسکرول را جعل می‌کند و فونت‌هایی رندر می‌کند که مرورگر به همان شکل لود نمی‌کند. سطح کدی از فونت واقعی، کامپوننت دکمه واقعی، breakpoint واقعی و focus ring واقعی استفاده می‌کند. فاصله بین تقریب و واقعیت قبلاً قابل‌قبول بود. در محصولی که حالت‌های loading و empty و محتوای طولانی نصف طراحی‌اند، دیگر نیست.
سرعت. چرخه Figma این است: ویرایش فریم، کامنت برای مهندس، انتظار، بازبینی بیلد، کامنت دوباره، انتظار دوباره. چرخه کد این است: ویرایش، ریلود، دیدن. اولی در روزها اجرا می‌شود، دومی در ثانیه‌ها. سرعت تکرار تعیین می‌کند تیم پیش از لانچ چند ایده را می‌تواند تست کند.
مدل همکاری. کامنت‌های Figma و کامنت‌های PR دو سطح متفاوت‌اند. کامنت‌های Figma طراح‌به‌ذی‌نفع و طراح‌به‌مهندس‌به‌عنوان‌مشخصات‌اند. کامنت‌های PR طراح و مهندس به‌عنوان همتا روی یک خروجی واحدند. مدل دوم همانی است که تیم‌های مهندسی طراحی اجرا می‌کنند و ساختاراً سریع‌تر است.
تحویل ناپدید می‌شود. تحویل گران‌ترین لحظه خط تولید سنتی است. طراحی در کد آن را حذف می‌کند. مرحله ترجمه‌ای وجود ندارد چون طراحی همان پیاده‌سازی است.
حالت‌های لبه فوراً خود را نشان می‌دهند. خالی، در حال بارگذاری، محتوای طولانی، موبایل، خطا، شبکه کند. در Figma اینها فقط وقتی هستند که طراح یادش بوده باشد بکشد. در کد، چه طراح یادش بوده باشد چه نه، وجود دارند، چون کامپوننت برای رندر شدن باید از پسشان بربیاید. کد مجبورتان می‌کند صادق باشید.
v0 و Cursor و Lovable و Vercel UI سطح طراحی جدیدند
محیط طراحی جدید یک ابزار نیست، یک استک است که همزمان به جرم بحرانی رسیده. هر کدام لایه‌ای از کاری را برعهده می‌گیرد که Figma تنهایی انجام می‌داد.
v0 از Vercel یک prompt را در حدود سی ثانیه به کامپوننت کارآمد React و Tailwind تبدیل می‌کند. نتیجه را fork کنید، با prompt یا دستی تکرار کنید، و در کدبیس شیپ کنید. مدل fork و تکرار جای duplicate و دستکاری در Figma را می‌گیرد، با این فرق که نسخه تکراری کد واقعی است.
Cursor سطح طراحی برای طراحان محصول است که می‌توانند کد بخوانند. ریپوی واقعی را باز کنید، رندر واقعی را ببینید، کامپوننت را با prompt یا دستی ویرایش کنید و همان دقیقه تغییر را در مرورگر تماشا کنید.
Lovable سطح بنیان‌گذار و طراح تکنفره است. یک prompt تا یک اپ وب کارآمد، بعد تکرار روی چیزی که در حال اجراست. سریع‌ترین مسیر از قصد تا یک URL زنده، بدون نیاز به فایل Figma.
Vercel UI و رجیستری shadcn قفسه کامپوننت‌اند. یک کامپوننت واقعی بردارید، داخل کدبیس سفارشی‌اش کنید، شیپ کنید. shadcn کامپوننت‌ها را به‌شکل کدی که مال خودتان است ارائه می‌دهد، یعنی سیستم طراحی در همان سطحی قابل ویرایش است که طراحی.
شکل ابزارها فرق دارد اما ایده یکی است. سطح در حال اجرا همان خروجی است. آرتبورد یک پیش‌نویس است، اگر اصلاً وجود داشته باشد. برای الگوی عمیق‌تر کاربران حرفه‌ای، وایب کدینگ برای طراحان و Claude Code برای طراحان را ببینید.
Linear و Stripe و Anthropic واقعاً چطور کار می‌کنند
تیم‌هایی که در ۲۰۲۶ بهترین UI محصول را شیپ می‌کنند شکل مشابهی از گردش‌کار دارند، و هیچ‌کدام Figma را به‌عنوان خروجی نهایی تحویل نمی‌دهند.
Linear کدبیس را منبع حقیقت می‌داند. تیم مهندسی طراحی‌اش طراحی‌ها را به‌شکل pull request روی اپ در حال اجرا می‌نشاند، نه فریم Figma. سیستم طراحی Stripe از کد ساخته و شیپ می‌شود. Figma به‌عنوان مستندات پایین‌دست کد وجود دارد، نه منبع بالادست. ویرایش سیستم یعنی ویرایش کد. Anthropic سطوح محصول Claude را درون‌خطی، در کامپوننت‌های React و artifactهای Claude طراحی می‌کند، و طراحان در هر ریلیز اپ واقعی را می‌خوانند و ویرایش می‌کنند.
این الگو در هر تیم محصولی که با سرعت ممتاز شیپ می‌کند تکرار می‌شود. توکن‌ها در بالادست، کد به‌جای بوم، هوش مصنوعی به‌عنوان لایه تولید، طراحان در diff. خط تولید فریم تخت روش هیچ‌کدامشان نیست، و حساب‌وکتاب به بقیه صنعت هم رسیده است.
پنج سؤال پیش از طراحی در کد
هر طراحی نباید فردا Figma را رها کند. آزمون صادقانه پنج سؤال است. اگر سه پاسخ یا بیشتر «بله» بود، طراحی در کد سطح درست برای پروژه بعدی است.
- آیا کار را شیپ می‌کنید یا تحویل می‌دهید؟ اگر شیپ می‌کنید، کد برنده است. اگر تحویل می‌دهید، باز هم کد برنده است، اما شکاف فرهنگی بزرگ‌تر است.
- آیا می‌توانید کدبیس را بخوانید؟ نه اینکه React تولیدی را از صفر بنویسید، فقط کامپوننت‌ها را بخوانید، props را بفهمید، توکن طراحی را تشخیص دهید و مقادیر را بدون خراب کردن بیلد ویرایش کنید.
- آیا طراحی یک مشخصات ثابت است یا یک سطح تعاملی؟ مشخصات ثابت جایش Figma است. سطحی با hover و focus و اسکرول و موشن و حالت‌های لبه جایش کد است.
- آیا تیم سیستم طراحی برای گسترش دارد؟ یک کتابخانه کامپوننت واقعی، حتی پایه shadcn، طراحی کدمحور را دو مرتبه بزرگی سریع‌تر از Figma می‌کند.
- آیا سرعت تکرار گلوگاه شماست؟ اگر اسپرینت‌ها را به چرخه تحویل می‌بازید، کدمحور گلوگاه را می‌کشد. اگر اسپرینت‌ها را به استراتژی برند می‌بازید، کدمحور هیچ کاری نمی‌کند. مسئله درست را حل کنید.
تیمی که چهار از پنج بزند در کد زندگی می‌کند. تیمی که دو از پنج بزند هنوز باید کار را بین Figma و کد تقسیم کند، با سوگیری اندکی به سمت کد در هر پروژه جدید.
ضدالگوهایی که باید کنار بگذارید
چهار الگو بیش از هر انتخاب ابزاری UI محصول شیپ‌شده را می‌کشند. اگر تیمی هر کدام را انجام می‌دهد، تغییر ابزار کمتر از تغییر گردش‌کار اهمیت دارد.
توهم Dev Mode به‌جای تحویل. طراح فایل Figma پر از خط قرمز می‌فرستد. مهندس با «Dev Mode» ترجمه می‌کند. هر دو وانمود می‌کنند ترجمه وفادار است. هرگز نیست. Dev Mode مفید است، اما همان توهم تحویل در بسته‌بندی جدید است. راه‌حل واقعی این است که مهندس و طراح یک خروجی واحد را ویرایش کنند، که سطوح کدی ممکنش می‌کنند. برای لایه اتصال، راهنمای Figma MCP را ببینید.
ماکاپ پیکسل‌پرفکتی که فونت‌ها و breakpointهای واقعی را نادیده می‌گیرد. فریمی در ۱۴۴۰ پیکسل با Lorem Ipsum و فونتی که اپ تولیدی لود نمی‌کند. ماکاپ پیکسل‌پرفکت به نظر می‌رسد، محصول شیپ‌شده هیچ شباهتی به آن ندارد، و همه زیر این دروغ را امضا کرده‌اند.
سیستم طراحی‌ای که در Figma زندگی می‌کند و بی‌صدا از کد فاصله می‌گیرد. کتابخانه Figma می‌گوید دکمه ۱۲ پیکسل padding دارد. کد می‌گوید ۱۴. هیچ‌کس هیچ‌کدام را به‌روز نکرده. بعد از شش ماه فایل Figma داستان است. یک منبع حقیقت، در کد، و Figma به‌عنوان رندر پایین‌دست.
بازطراحی شش‌ماهه‌ای که به‌شکل PDF شیپ می‌شود. بازطراحی شاخص که به‌صورت خروجی صدصفحه‌ای Figma تحویل می‌شود، برای مدیران ارشد ارائه می‌شود و برای «فاز دو» به مهندسی داده می‌شود. فاز دو اتفاق نمی‌افتد چون تا مهندسی دامنه بازسازی را برآورد کند، شرکت دو بار استراتژی عوض کرده است. بازطراحی‌ای که شیپ نشود وجود نداشته است.
ممیزی طراحی کدمحور
پیش از شروع پروژه بعدی، ممیزی را اجرا کنید. هفت سؤال، ده دقیقه، پاسخ‌های تیز.
- خروجی چیست، یک فریم یا یک سطح شیپ‌شده؟ اگر شیپ‌شده، خروجی کد است. وانمود نکنید فریم همان محصول است.
- صاحب اپ در حال اجرا کیست، و آیا طراح در diff است؟ اگر طراح در diff نیست، پیش از تغییر ابزار آن را درست کنید.
- توکن‌ها کجا زندگی می‌کنند؟ اگر پاسخ Figma است، جابه‌جایشان کنید. فایل توکن باید منبع حقیقتی باشد که Figma از آن می‌خواند، نه برعکس. تحلیل گردش‌کار طراحی با هوش مصنوعی مسیر ارتقا را پوشش می‌دهد.
- چرخه تکرار چند ساعت است؟ اگر از ویرایش تا تغییر شیپ‌شده بیش از چهار ساعت است، مشکل گردش‌کار است، نه طراحی.
- کدام سطوح هنوز در آرتبوردهای تخت طراحی می‌شوند و کدام به کد رفته‌اند؟ تقسیم را نقشه کنید. این تقسیم باید در هر ابتکار جدید به سمت کد متمایل باشد.
- تیم به چه پلاگین‌هایی تکیه می‌کند تا وفاداری تحویل را جعل کند؟ اگر پاسخ «زیاد» است، پلاگین‌های Figma که ارزش نگه‌داشتن دارند را ببینید و بقیه را حذف کنید.
- تیم فصل بعد چه چیزی شیپ می‌کند که ثابت کند گردش‌کار کار می‌کند؟ نه یک اسلاید، یک سطح دیپلوی‌شده. اگر پاسخ مبهم است، گردش‌کار هنوز واقعاً عوض نشده است.
گردش‌کاری که از ممیزی جان سالم به در ببرد محصول شیپ می‌کند. گردش‌کاری که رد شود دک شیپ می‌کند. این تفاوت هر فصل انباشته می‌شود، و وقتی هر متغیر دیگر تقریباً برابر است، سرعت همان برند است.
سؤالات متداول
آیا Figma مرده است؟
نه. Figma نمرده و ادعا هم «Figma مرده است» نیست. Figma برای کار هویت برند، فهرست‌برداری سیستم طراحی، دیاگرام‌کشی FigJam و ارائه به ذی‌نفعان عالی است. ادعا محدودتر است. Figma دیگر جایی نیست که طراحی محصول در آن اتفاق می‌افتد، چون کدبیس سریع‌تر و باکیفیت‌تر است و همان خروجی‌ای را شیپ می‌کند که کاربر لمس می‌کند.
طراحانی که نمی‌توانند کد بخوانند چه؟
آن طراح باید خواندن کد را یاد بگیرد، نه نوشتن آن را. خواندن کامپوننت‌ها، تشخیص توکن‌ها، ویرایش مقادیر و بازبینی یک diff مهارتی یک‌هفته‌ای است، نه تغییر شغل. در ۲۰۲۶ هوش مصنوعی بار سنگین کد تولیدی را برمی‌دارد. طراح ترکیب‌بندی، قضاوت و سلیقه را به سطح در حال اجرا می‌آورد، که وقتی لایه تولید ارزان است باارزش‌تر می‌شود، نه کم‌ارزش‌تر.
آیا یک تیم کوچک واقعاً باید Figma را کاملاً کنار بگذارد؟
کاملاً نه. تیم کوچک هنوز باید از Figma برای کاوش برند، فهرست‌برداری سیستم‌ها و همسوسازی تیم استفاده کند. تغییر روی سطوح محصول است، جایی که v0 یا Cursor یا Lovable یا رجیستری shadcn در هر معیاری از آرتبورد بهتر عمل می‌کنند. تقسیم صادقانه این است: برند و سیستم‌ها در Figma، سطوح محصول در کد، و در ابتکارهای جدید سوگیری به سمت کد است.
سمت درست گردش‌کار باشید
عصر Figma به‌عنوان ابزار طراحی پانزده سال درست بود و تمام شد. کدبیس در ۲۰۲۶ محیط طراحی است، و تیم‌هایی که UI محصول را در کد شیپ می‌کنند قیمت بیشتری می‌گیرند، سریع‌تر یاد می‌گیرند و بریف‌هایی را می‌برند که استودیوهای دکِ Figma قبلاً صاحبشان بودند.
اگر UI محصولی می‌خواهید که در کد شیپ شود و طراحان در diff باشند، نه یک دک Figma که از دیوار پرت شده، Brainy را استخدام کنید. Brainy برند، مهندسی محصول و گردش‌کار هوش مصنوعی را یک پروژه می‌کند، نه سه پروژه. استودیوهایی که هنوز فایل Figma را خروجی نهایی قیمت‌گذاری می‌کنند فصل بعد در بریف نخواهند بود. شما در بریف باشید.
Want a product UI shipped in code with designers in the diff instead of a Figma deck thrown over the wall? Brainy ships the workflow end to end.
Get Started
