تبدیل فیگما به وردپرس به 2 روش

تبدیل فیگما به وردپرس به دو صورت انجام می شود:😍 هم با ساختن کدها از ابتدا یا با استفاده از یک افزونه تبدیل فیگما به وردپرس. در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از هر دوی این روش ها، طرح های خود را به طور موثر تبدیل کنید.

آیا می خواهید طرح های فیگما خود را به یک وب سایت وردپرس خیره کننده تبدیل کنید؟ پس جای درستی هستید !

Figma و WordPress هر دو پلتفرم های قدرتمندی برای ساخت وب سایت های حرفه ای هستند، از وبلاگ های ساده گرفته تا فروشگاه های پیچیده تجارت الکترونیک. بسته به تجربه خود، می توانید سایت خود را از ابتدا با کدهای HTML بسازید یا از افزونه Figma برای انتقال طرح خود به وردپرس استفاده کنید.

در این مقاله، این دو روش مختلف را مورد بحث قرار خواهیم داد و خواهیم دید که کدام یک برای شما بهترین کارایی را دارد

 

گزینه اول :تبدیل فیگما به وردپرس به روش کدنویسی

کدنویسی یک طرح از ابتدا، تا حد زیادی، دقیق ترین راه برای تبدیل طرح Figma شما به وردپرس است.

اما نکته منفی اینجاست – این رویکرد به زمان زیادی برای توسعه و مهارت های کدنویسی نیاز دارد. اگر ضرب‌الاجل‌های محدود یا تجربه محدودی در برنامه‌نویسی دارید، ممکن است عملی‌ترین گزینه نباشد.

در اینجا نحوه انجام آن را به شما توضیح میدهیم :

 

1- طرح ها را از Figma خارج کنید

طرح خود را در فیگما باز کنید و روی عنصری که می خواهید خارج کنید کلیک کنید. همچنین می‌توانید با نگه داشتن کلید Shift روی صفحه‌کلید، چندین عنصر را همزمان انتخاب کنید.

 

 

توجه داشته باشید که برای این آموزش، ما یک قالب رایگان CSS ایجاد کرده ایم.

اکنون، روی  “Export” در پنل سمت راست کلیک کنید و فرمت صحیح را برای طرح های خود انتخاب کنید. برای تصاویر می توانید از فرمت هایی مانند PNG یا JPG استفاده کنید. با این حال، PNG برای طرح هایی با شفافیت ارجح است. برای نمادها و وکتورها، فرمت SVG ایده آل است زیرا کیفیت را در هر مقیاسی حفظ می کند و اندازه فایل های کوچکتری را ارائه می دهد.

 

 

همچنین باید رزولوشن مناسب را برای طرح های خود انتخاب کنید. به طور معمول، 1x یا 2x باید برای استفاده در وب به اندازه کافی خوب باشد.

سپس، فایل های خود را نام گذاری کنید. توجه داشته باشید که فیگما به شما امکان می دهد پسوندهایی را به نام فایل ها بر اساس وضوح اضافه کنید (به عنوان مثال، “e.g., ‘@2x’ ” برای فایل های با وضوح بالا).

در نهایت، روی «Export [Asset Name]» کلیک کنید.

به یاد داشته باشید، کیفیت و قالب طراحی های export شده شما به طور مستقیم بر ظاهر و عملکرد وب سایت شما تأثیر می گذارد. اطمینان حاصل کنید که تمام طرح های شما به درستی export شده است.

 

2- یک قالب وردپرس ایجاد کنید

قالب وردپرس مجموعه ای از فایل هایی است که ظاهر و عملکرد سایت شما را کنترل می کند. اینها می تواند شامل کد PHP، شیوه نامه های CSS و فایل های جاوا اسکریپت باشد.

برای تبدیل طرح Figma خود، باید یک قالب وردپرس سفارشی ایجاد کنید. با ایجاد یک پوشه جدید در پوشه /wp-content/themes/ نصب وردپرس خود شروع کنید. نام این پوشه را به نام تم خود نام گذاری کنید

 

 

توجه: راه های زیادی برای دسترسی به فایل های تم در وردپرس وجود دارد. ممکن است بخواهید برای کسب اطلاعات بیشتر، آموزش جداگانه ما را در مورد نحوه نصب تم در وردپرس بررسی کنید.

اکنون، این فایل های مهم و اساسی را در پوشه تم خود اضافه کنید:

• index.php: این فایل PHP اصلی وب سایت شما است. اغلب به عنوان صفحه اصلی یا فایل مرکزی که محتوای سایت شما را بارگیری می کند استفاده می شود.
• header.php: این فایل PHP معمولاً حاوی کد HTML بخش هدر، از جمله منوهای ناوبری و نام تجاری سایت است.
• footer.php: اینجاست که کد HTML بخش فوتر سایت شما شامل اطلاعات حق چاپ و لینک ها اضافه می شود.
• functions.php: این فایل پی اچ پی شامل توابعی است که ویژگی هایی را اضافه کرده یا رفتار وب سایت شما را تغییر می دهد.

به عنوان یک توسعه دهنده، بسته به نیاز خود، می توانید فایل های قالب بیشتری را سفارشی کنید و به پوشه تم خود اضافه کنید. سپس وردپرس صفحه را بر اساس این سلسله مراتب قالب نمایش می دهد. در حال حاضر، می توانید این فایل ها را خالی بگذارید و کدها را بعدا اضافه کنید.

سپس، صفحه CSS stylesheet تم خود را تنظیم کنید. در همان پوشه، یک فایل جدید ایجاد کنید و نام آن را «style.css» بگذارید. اینجا جایی است که سبک‌هایی را برای فونت‌ها، رنگ‌ها،حاشیه‌ها و سایر جنبه‌های بصری وب‌سایت خود اضافه می‌کنید.

فایل ‘style.css’ خود را با یک نام هدر که شامل انتخاب موضوع، نام نویسنده، توضیحات، نسخه و سایر جزئیات است، شروع کنید. انجام این کار به وردپرس کمک می کند تا تم شما را تشخیص دهد، مانند مثال زیر:

 

فراموش نکنید که یک تصویر اضافه کنید تا به صورت بصری موضوع جدید خود را در فهرست قالب وردپرس نشان دهد. اندازه تصویر می تواند متفاوت باشد، اما ما به شدت اندازه 800×600 پیکسل را توصیه می کنیم. باید با فرمت PNG باشد. نام تصویر را screenshot.png بگذارید و آن را به پوشه تم اضافه کنید.

اکنون پوشه تم شما باید به این شکل باشد.

 

اکنون داشبورد مدیریت وردپرس خود را باز کنید و به Appearance > Themes بروید. اکنون باید طرح زمینه سفارشی شما در اینجا نمایش داده شود. روی آن کلیک کنید تا فعال شود.

 

در حال حاضر، صفحه اصلی شما خالی خواهد بود زیرا ما هنوز هیچ کدی اضافه نکرده ایم، که در مراحل بعدی انجام خواهیم داد.

 

3- یک پوشه Assets ایجاد کنید

در پوشه تم خود، یک پوشه جدید ایجاد کنید و نام آن را Assets بگذارید. تمام طراحی های export شده خود را از فیگما در اینجا کپی کنید.

نکته: اگر طراحی پیچیده ای دارید، به طور کلی روش خوبی است که طراحی های خود را در زیر پوشه های مختلف سازماندهی کنید، مانند شکل زیر.

 

 

 

4) HTML، CSS و JavaScript را به فایل‌های تم اضافه کنید

با تنظیم قالب وردپرس خود، اکنون می توانید مدل های فیگما خود را به کد تبدیل کنید. برای این قسمت به یک ویرایشگر کد نیاز دارید.

با تنظیم ساختار HTML خود با عناصری مانند سرصفحه ها، پاورقی ها، نوارهای ناوبری و بخش ها شروع کنید. به طور معمول، اینجا جایی است که باید فایل های PHP (index.php، header.php و footer.php) را با کدها پر کنید.

در مرحله بعد، از CSS برای استایل دادن به عناصر HTML خود استفاده کنید. در فایل «style.css» رنگ‌ها، فونت‌ها، اندازه‌ها و سایر جنبه‌های طراحی را تنظیم کنید. برای استایل بهتر، می توانید از یکی از این موارد استفاده کنید:

 

• CSS preprocessors like SASS or LESS
• Frameworks such as Bootstrap or Tailwind
• A WordPress starter theme

 

توجه داشته باشید که برای طراحی های پیچیده، نیازی نیست همه کدهای CSS خود را در یک فایل قرار دهید. برخی از توسعه دهندگان فایل اصلی ‘style.css’ را خالی نگه می دارند (به جز هدر) و فایل های CSS جداگانه را برای بخش های مختلف در پوشه طراحی ها اضافه می کنند. این کار به‌جای مرتب‌سازی از طریق یک فایل بزرگ CSS، مدیریت و به‌روزرسانی استایل تم را آسان‌تر می‌کند.

در نهایت، برای افزودن جاوا اسکریپت، مشخص کنید که کدام عناصر طراحی باید تعاملی باشند، مانند منوهای کشویی، اسلایدر، یا فرم اعتبارسنجی . استفاده از jQuery را برای ساده‌سازی کارهای پیچیده، مانند تماس‌های AJAX و  DOM، در نظر بگیرید تا فرآیند توسعه خود را روان‌تر و کارآمدتر کنید.

همه شیت ها و اسکریپت های استایل شما باید در فایل “functions.php” قرار بگیرند.

 

 

همانطور که ممکن است متوجه شده باشید، مراحل بالا نیاز به یک دید دقیق برای جزئیات و درک خوب توسعه وب دارد. اگر توسعه‌دهنده باتجربه‌ای نیستید، توصیه می‌کنیم از افزونه Figma استفاده کنید تا کارها کمی آسان‌تر شود. در بخش بعدی بیشتر در این مورد صحبت خواهیم کرد.

 

5- تست و بهینه سازی کنید

اکنون، کار خود را ذخیره کنید و عملکرد، سازگاری و تجربه کاربری کلی سایت خود را بررسی کنید. وب سایت خود را به طور کامل مرور کنید، هر صفحه و ویژگی را بررسی کنید. بر اساس آزمایش خود تنظیمات لازم را انجام دهید.

چند نکته که باید در نظر داشت:

• اطمینان حاصل کنید که وب سایت شما در مرورگرهای مختلف مانند کروم، فایرفاکس، سافاری و اج به طور مداوم  کار می کند.
• از ابزارهای توسعه دهنده مرورگر برای بررسی و مشاهده وب سایت خود در اندازه های مختلف صفحه استفاده کنید.
• از ابزارهایی مانند ShortPixel و Imagify برای بهینه سازی طراحی های خود استفاده کنید.
• برای افزایش سرعت وب سایت خود، کش را پیاده سازی کنید. این را می توان با استفاده از افزونه های کش وردپرس مانند LiteSpeed، WP Rocket و WP Super Cache انجام داد.
• قبل از کش کردن زنده سایت ، مطمئن شوید که یک نسخه پشتیبان کامل از سایت خود دارید.

 

گزینه 2: از پلاگین فیگما استفاده کنید

 

نکته مهم در مورد استفاده از پلاگین فیگما  این است که فرآیند تبدیل طرح ها به کد را ساده می کند. این روش برای مبتدیان و طراحان با تجربه اندک یا بدون تجربه در برنامه نویسی مفید میباشد. حتی توسعه دهندگان پیشرفته نیز ممکن است از استفاده از این افزونه را برای سرعت بخشیدن به روند توسعه خود استفاده کنند.

پلاگین های Figma زیادی وجود دارد که هر کدام ویژگی های خاص خود را دارند.در اینجا ما از UiChemy استفاده می کنیم تا به شما نشان دهیم که چگونه طرح های Figma را به یک سایت وردپرس تبدیل کنید.

 

تبدیل Figma به وردپرس با استفاده از UiChemy

استفاده از UiChemy بسیار ساده است.

ابتدا باید با یک حساب کاربری ثبت نام کنید. می‌توانید یک طرح رایگان بدون نیاز به کارت اعتباری یا یک طرح پولی برای باز کردن قفل ویژگی‌های بیشتر انتخاب کنید.

حالا طرح خود را روی Figma باز کنید. برای شروع فرآیند تبدیل، افزونه UiChemy را از داشبورد فیگما نصب کنید.

 

هنگامی که افزونه را اجرا کردید، از شما خواسته می‌شود که روی دکمه «Let’s Start» کلیک کنید تا حساب خود را تنظیم کنید. همچنین از شما خواسته می شود که کلید سریال UiChemy خود را وارد کنید. این را می توانید در داشبورد حساب POSIMYTH خود پیدا کنید.

 

تبدیل فیگما به المنتور

پس از فعال شدن، فریمی را که می خواهید تبدیل کنید انتخاب کنید. سپس، در پنجره پاپ آپ روی «Convert to Elementor» ( تبدیل فیگما به المنتور ) کلیک کنید. در حال حاضر، UiChemy از تبدیل طرح به Elementor پشتیبانی می کند و برنامه های آینده شامل Bricks و Gutenberg است.

قبل از تبدیل طرح فیگما به المنتور مطمئن شوید که تمام شرایط را خوانده اید. این شامل نصب و فعال سازی افزونه Elementor در وب سایت وردپرس شما می شود.

 

توجه داشته باشید که می‌توانید با وارد کردن URL و کلید رمز سایت، طرح خود را نیز پیش‌نمایش کنید. می‌توانید آموزش UiChemy، Live Preview چیست را بررسی کنید تا یاد بگیرید که چگونه کلید رمز و URL وب‌سایت خود را ایجاد کنید.

ایجاد توکن :

 

نمایش زنده : 

 

خب بریم سراغ بقیه آموزش : 

 

اگر نمی‌خواهید صفحه خود را پیش‌نمایش کنید، می‌توانید مستقیماً روی دکمه «Convert to Elementor» کلیک کنید. انجام این کار بلافاصله طرح شما را تبدیل می کند و آن را به عنوان یک فایل JSON دانلود می کند.

 

اکنون داشبورد مدیریت وردپرس خود را باز کنید و به Templates > Saved Templates بروید. در بالای صفحه، روی دکمه «Import Templates» کلیک کنید تا فایل JSON آپلود شود .

 

اکنون باید طرح خود را در قسمت «Saved Templates» آپلود شده ببینید. اگر می‌خواهید ویرایش‌های بیشتری انجام دهید، آن را در ویرایشگر Elementor باز کنید. و مراحل تبدیل فیگما به المنتور را کامل کنید .

 

وقتی از تغییرات راضی بودید، وقت آن است که آن را در قسمت باز شده مشاهده کنید. بررسی کنید که تصاویر به درستی بارگیری می شوند، دکمه ها همانطور که در نظر گرفته شده کار می کنند و طراحی در دستگاه های مختلف عالی به نظر می رسد.

 

دیگر پلاگین های Figma که شاید بخواهید امتحان کنید

به دنبال گزینه های بیشتری هستید؟ ما در زیر چند جایگزین خوب را بر اساس سهولت استفاده، کیفیت کد و نظرات مثبت آنها فهرست کرده‌ایم:

 

1) Anima

Anima دو راه برای تبدیل نمونه های اولیه به HTML ارائه می دهد: مستقیماً از افزونه Figma یا با استفاده از برنامه وب Anima. از هر روشی که استفاده کنید، این برنامه را ابزاری مناسب برای تبدیل طرح های خود به کد خواهید یافت.

هنگام استفاده از افزونه Figma، می‌توانید اجزای خاصی از طراحی خود را برای خروجی انتخاب کنید، که برای پروژه‌های بزرگ که ممکن است نیازی به تبدیل کل طرح به یکباره نداشته باشید، عالی است. بسته کد خروجی شامل HTML، CSS، تصاویر و فایل‌های فونت است.

یکی از معایبی که در Anima می بینیم این است که سطح سفارشی سازی و کنترل روی کد ممکن است به اندازه کدنویسی دستی سایت نباشد. علاوه بر این، پس از تبدیل طرح خود به HTML، همچنان باید کدها را به صورت دستی بسازید یا از افزونه دیگری برای دریافت آنها به وردپرس استفاده کنید.

2) Yotako

Yotako به شما امکان می دهد طرح ها را از Figma و Adobe XD به وردپرس تبدیل کنید. این انعطاف پذیری برای انواع مختلف پروژه ها عالی است زیرا شما فقط به یک ابزار طراحی محدود نمی شوید.

برخلاف Anima، Yotako به شما امکان می دهد فایل های تبدیل شده خود را مستقیماً به وردپرس وارد کنید. حتی به شما امکان می دهد وضوح صفحه نمایش سفارشی را تنظیم کنید، بنابراین وب سایت های شما در هر دستگاهی عالی به نظر می رسند. این ویژگی تضمین می کند که وب سایت نهایی شما یکپارچگی بصری و پاسخگویی را حفظ می کند، صرف نظر از اینکه از چه اندازه صفحه نمایش استفاده می کنید.

اما درست مانند سایر برنامه ها، Yotako منحنی یادگیری دارد. همچنین، کدی که ایجاد می کند ممکن است گاهی نیاز به اصلاح بیشتری داشته باشد. صرف نظر از این، ما هنوز آن را یکی از ساده‌ترین برنامه‌ها برای ساده‌سازی گردش کار طراحی به وردپرس می‌دانیم.

 

3) Fignel

آیا شما از طرفداران المنتور هستید؟ پس ممکن است بخواهید Fignel را در نظر بگیرید.

ویژگی کلیدی Fignel توانایی آن در تبدیل طرح های Figma به ماژول های Elementor مانند بخش ها، ستون ها، عنوان ها، فیلم ها و تصاویر است. این باعث صرفه جویی در زمان زیادی می شود و به طراحان و توسعه دهندگان این امکان را می دهد تا به جای ساختن همه چیز از پایه، بیشتر بر روی اصلاح جزئیات وب سایت خود تمرکز کنند.

Fignel از ویجت‌های مختلف نیز پشتیبانی می‌کند و قصد دارد موارد بیشتری را به همراه برخی از قالب‌های از پیش ساخته اضافه کند.

اما، مانند سایر برنامه ها، محدودیت هایی نیز دارد. در حال حاضر، برای وب سایت های ساده تر بهتر است زیرا ماژول های آن محدود است. همچنین، از فشرده‌سازی تصویر پشتیبانی نمی‌کند، افزونه وردپرس خود را ندارد و به اندازه UiChemy قالب‌های آماده برای استفاده را ارائه نمی‌دهد.

 

سوالات متداول

 

آیا می توان از طرح های Figma برای وردپرس استفاده کرد؟

بله، می توانید از طرح های Figma برای وردپرس استفاده کنید. همانطور که در این مقاله ذکر شد، می توان آنها را به صورت دستی با کدنویسی یا با استفاده از برنامه هایی مانند UiChemy، Anima، Yotako و Fignel به قالب های وردپرس تبدیل کرد.

 

چگونه فیگما را به المنتور تبدیل کنم؟

برای تبدیل Figma به Elementor، ما در زیگماکد به شدت توصیه می کنیم از برنامه هایی مانند Fignel یا UiChemy استفاده کنید. قبل از تبدیل، مطمئن شوید که طرح شما کامل و آماده خروجی است.

 

آیا امکان تبدیل Figma به HTML وجود دارد؟

بله، و ساده ترین راه استفاده از پلاگین Figma است. برای پروژه‌های غیر وردپرس، ما برنامه‌هایی مانند Anima را به شدت توصیه می‌کنیم، که به طور موثر طرح‌های Figma را به کدهای HTML تمیز تبدیل می‌کند.

 

نتیجه گیری :

انتقال طراحی از Figma به وردپرس ممکن است همیشه به این راحتی نباشد، به خصوص اگر سایت شما پر از جزئیات و ویژگی های پیچیده باشد.

در این راهنما، راه‌های مختلفی را برای انجام آن به شما نشان داده‌ایم.

کدنویسی به صورت دستی به شما کنترل بیشتری می دهد اما زمان و دانش وردپرس بیشتری را می طلبد. پلاگین‌ها سریع‌تر و آسان‌تر هستند، اگرچه ممکن است برای دستیابی به نتایج عالی به کمی تغییر نیاز داشته باشند.

این که آیا به دنبال جزئیات کدنویسی دستی یا سهولت افزونه ها هستید، این به شما بستگی دارد. نکته کلیدی این است که انتخاب کنید چه چیزی برای پروژه و مهارت شما بهترین کارایی را دارد.

اگر این مقاله برای شما کافی بود لطفا با دوستان خود به اشتراک بگذارید و دیدگاه خود را برای ما ارسال کنید . .شاید دوست داشته باشید راهنمای ما راجب وردپرس چیست و چه کاربردی دارد رو هم مطالعه کنید …

امیدواریم این مقاله به شما در یادگیری نحوه تبدیل Figma به وردپرس کمک کرده باشد. 😍😍😍