Codia
أكثر من 150,000 مستخدم · أكثر من 2,300 إعجاب على Figma Community

تحويل Figma إلى كود: صدّر تصاميمك إلى React وHTML وFlutter والمزيد

اختر إطارًا في Figma وشغّل إضافة Codia المجانية، أو ارفع لقطة شاشة أو ملف PDF أو ملف Figma من المتصفح. احصل على كود React أو Vue أو HTML أو Flutter أو SwiftUI أو Android لمعاينته ونسخه وتنزيله.

جرّبه مجاناًاحصل على إضافة Figma المجانية

10 أرصدة مجانية كل شهر · دون بطاقة ائتمان · يعمل مع خطة Figma المجانية

1import { CheckIcon } from 'lucide-react'
2
3export function PricingCard() {
4  return (
5    <div className="rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
6      <h3 className="text-sm font-medium text-zinc-500">Pro</h3>
7      <div className="mt-3 flex items-baseline gap-1">
8        <span className="text-4xl font-semibold tracking-tight">$29</span>
9        <span className="text-zinc-500">/mo</span>
10      </div>
11      <p className="mt-3 text-sm text-zinc-600">
12        Everything you need to ship production UIs, faster.
13      </p>
14      <button className="mt-6 w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white hover:bg-zinc-800">
15        Start free trial
16      </button>
17      <ul className="mt-6 space-y-2 text-sm text-zinc-700">
18        {['Unlimited projects', '6 framework targets', 'Priority support'].map((f) => (
19          <li key={f} className="flex items-center gap-2">
20            <CheckIcon className="h-4 w-4 text-emerald-500" />
21            {f}
22          </li>
23        ))}
24      </ul>
25    </div>
26  )
27}

من الرفع إلى قاعدة الكود في ثلاث خطوات.

بلا وسم للطبقات، ولا ضبط للإضافة، ولا هندسة للأوامر.

الخطوة الأولى

أحضر تصميمك

اسحب ملف PNG أو JPG أو PDF، أو الصق رابط Figma. تقرأ إضافة Codia تحديدك الحالي مباشرةً داخل Figma أيضاً.

PNG / JPG
PDF
Figma
Sketch

اسحب تصميماً أو الصق رابط Figma

الخطوة الثانية

اختر الهدف

حدد React أو Vue أو HTML أو SwiftUI أو Flutter أو Android — واختر أسلوب التنسيق (Tailwind أو CSS أو styled-components أو Swift styles أو Compose).

React
Vue
HTML
SwiftUI
Flutter
Android
التنسيق:TailwindCSS · styled-components · Modules
الخطوة الثالثة

أطلق الكود

عاين النتيجة، ثم انسخ الكود أو نزّل المشروع وواصل العمل في محررك الخاص.

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
جاهز للنسخ أو التنزيل أو الفتح في المحررتصدير

مصمَّم لكود تدمجه فعلاً.

مكوّنات حقيقية في إطار العمل الذي تستخدمه، لا مجرد صورة مُصدَّرة. نسخة أولى يستطيع مهندسوك مراجعتها وإعادة هيكلتها ودمجها.

مكوّنات نظيفة واحترافية

خصائص مسمّاة، وHTML دلالي، وواجهات مكتوبة بالأنواع، واصطلاحات إطار العمل — لا حساء من divs مسطّحة.

+ interface Props { variant: 'primary' | 'ghost' }
- const div = <div style={{...}} />

تخطيطات مبنية على Auto Layout

تتحول إطارات Auto Layout إلى flexbox وstacks وصفوف في إطار العمل المستهدف، فتنتج الملفات المنظمة تخطيطات تتكيف بدلًا من مواضع ثابتة.

أسلوب التنسيق الذي يستخدمه فريقك

Tailwind أو CSS أو CSS Modules أو styled-components للويب، وتنسيق أصلي في SwiftUI وFlutter وCompose. أثناء المراجعة استبدل الألوان المولّدة برموز السمة لديك.

بأسماء طبقاتك نفسها

تتبع أسماء المكوّنات والفئات أسماء طبقاتك في Figma، لذا يمنحك الملف المرتب ذو الأسماء الواضحة كودًا أسهل في القراءة وإعادة الهيكلة.

داخل Figma أو في المتصفح

شغّل الإضافة على إطار داخل Figma، أو ارفع لقطة شاشة أو ملف PDF أو ملف Figma إلى تطبيق Codia على الويب. في الحالتين تحصل على كود يمكنك معاينته ونسخه وتنزيله.

سرعة تتيح التكرار

تتحول الشاشة النموذجية في ثوانٍ، فيصبح توليد الكود جزءاً من حلقة التصميم.

ماذا يقول مستخدمو Figma

تعليقات منقولة حرفيًا من صفحة الإضافة على Figma Community.

I am very impressed by this tool!! it does 75% of the job. Of course, it needs adjustments and cleanup as individual classes are created for every element and it better to consolidate that. But, it would have taken me hours to get even closer to that 75%. … I will be using this tool a lot! Thanks!
JJorge Tardio Urquidi@jorgetardiourqu ·
I checked out a few code generators for Vue.js in the community, and Codia is hands down the best one I've come across
FFlorin Kissi@florinkissi ·
oh my god, is this perfect plugin. For me, it's the best Android export plug-in in history
박박재웅@1d749f4c_4f86_4 ·
اقرأ جميع التعليقات على Figma Community

الأسعار

أسعار شفافة لكل منتج. ابدأ مجاناً وارتقِ مع نمو أعمالك.

الأسئلة الشائعة حول تحويل Figma إلى كود

إجابات حول تحويل تصاميم Figma إلى كود React وHTML وFlutter وتطبيقات الجوال.

المزيد من إضافات Codia لـ Figma

أطلق شاشتك التالية في دقائق.

10 أرصدة مجانية كل شهر دون بطاقة ائتمان. يعمل مع التصاميم التي لديك بالفعل.

جرّب Codia مجاناًاحصل على إضافة Figma المجانية