افزونه گوگل کروم برای طراحان سایت

22+ بهترین افزونه گوگل کروم برای طراحان سایت

آخرین بروزرسانی در تاریخ : 29 آبان 1402
باید لاگین کنید!

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

دقت کنید که تمامی پلاگین های معرفی شده در این مقاله کاملا رایگان هستند و لینک هر کدام از آن‌ها در انتهای بخش قرار گرفته است و برای نصب آن کافیست به لینک مورد نظر رفته و روی گزینه “Add to Chrome” یا به فارسی افزودن به گوگل کروم کلیک کنید و کمی صبر کنید تا پلاگین مورد نظر به مرورگر گوگل کروم اضافه شود.

بهترین افزونه های گوگل کروم برای طراحان سایت

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

افزونه تشخیص رنگ کروم ColorZilla

افزونه گوگل کروم ColorZilla
بهترین افزونه های گوگل کروم – ColorZilla

آیا می‌خواهید از هر صفحه‌ای بدون جستجو یک کد رنگی انتخاب کنید؟ ColorZilla ابزار شماست! این ابزار شامل یک Color Picker، Eye Dropper، Gradient Generator، و بسیاری از ویژگی‌های رنگ پیشرفته دیگر است.

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

وب سایت: ColorZilla


پلاگین کروم Dark Reader

پلاگین کروم Dark Reader
پلاگین کروم Dark Reader

آیا با صفحه نمایش روشن نمی‌توانید به خوبی کار کنید؟ افزونه گوگل کروم مراقبت از چشم، یا همان Dark Reader تم تاریک به صفحات وب اضافه می‌کند. Dark Reader رنگ‌های روشن را معکوس می‌کند و باعث می‌شود کنتراست بالایی داشته باشند و خواندن و کار در شب آسان باشد. شما می‌توانید روشنایی، کنتراست، حالت تاریک و تنظیمات فونت را بر اساس نیاز خود تنظیم کنید.

وب سایت: Dark Reader


بهترین افزونه های گوگل کروم SVG Grabber

افزونه کروم SVG Grabber - بهترین افزونه های گوگل کروم
بهترین افزونه های گوگل کروم – SVG Grabber

آیا فقط می‌خواهید SVG ها را از وب سایت های مختلف دانلود کنید؟ Svg Grabber ابزاری برای پیش نمایش، دانلود و کپی سریع کد تمام نمادها و تصاویر SVG در یک وب‌سایت تنها با یک کلیک یک دکمه است.

وب سایت: SVG Grabber


پلاگین Window Resizer

پلاگین Window Resizer
بهترین افزونه های گوگل کروم Window Resizer

اندازه پنجره مرورگر را برای شبیه سازی وضوح‌های مختلف صفحه تغییر دهید. این Resizer به ویژه برای طراحان وب مفید است تا طرح‌بندی‌های خود را روی وضوح‌های مختلف مرورگر آزمایش کنند. لیست رزولوشن‌ها کاملاً قابل تنظیم است (افزودن/حذف/تجدید سفارش). شما می‌توانید عرض/ارتفاع پنجره، موقعیت پنجره، نماد از پیش تعیین شده (تلفن، تبلت، لپ‌تاپ، دسکتاپ) و حتی گزینه اعمال ابعاد جدید را در کل پنجره یا فقط در نمای پنجره تنظیم کنید.

وب سایت: Window Resizer


افزونه گوگل کروم ColorPicker

افزونه گوگل کروم ColorPicker
افزونه گوگل کروم ColorPicker

اگر به دنبال یک قطره‌چکان رنگی سریع و آسان با پیش‌نمایش قابل کشیدن زوم برای تنظیم دقیق هستید، ColorPicker ممکن است چیزی باشد که به دنبال آن هستید. ColorPicker حاوی ویژگی‌های بزرگنمایی/زوم صفحه وب است. ویژگی بزرگنمایی آن ممکن است به شما کمک کند تا در طول هر گونه تنظیمات طراحی وب، دقت تراز کامل پیکسلی را مشاهده کنید.

وب سایت: ColorPicker


بهترین افزونه های گوگل کروم Whatfont

پلاگین کروم Whatfont
پلاگین کروم Whatfont

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

وب سایت: Whatfont


افزونه CSS Peeper

افزونه CSS Peeper
بهترین افزونه های گوگل کروم – CSS Peeper

آیا تابه‌حال به این فکر کرده‌اید که اندازه دکمه، فونت، سبک در یک صفحه وب چیست؟ آیا هنوز آنها را از المان اصلی بازرسی می‌کنید؟ CSS Peeper یک نمایشگر CSS است که برای طراحان طراحی شده است. این افزونه گوگل کروم به شما یک نمای فوری از سبک مخفی CSS از اشیاء، رنگ‌ها و دارایی‌ها در وب می‌دهد.

وب سایت: CSS Peeper


پلاگین گوگل کروم Eagle

پلاگین گوگل کروم Eagle - بهترین افزونه های گوگل کروم
پلاگین گوگل کروم Eagle

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

مهم‌ترین بخش این است که در هنگام ذخیره تصاویر، Eagle به شما کمک می‌کند URL را نیز ذخیره کنید، بنابراین زمانی که می‌خواهید ناگهان به صفحه وب مراجعه کنید، می‌دانید کجا باید بروید! برای استفاده کامل از این عملکرد افزونه، باید نرم افزار Eagle App را دانلود کنید.

وب سایت: Eagle


پلاگین Mobile Simulator

پلاگین Mobile Simulator
بهترین افزونه های گوگل کروم – Mobile Simulator

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

وب سایت: Mobile Simulator


افزونه کروم Page Ruler Redux

افزونه کروم Page Ruler Redux
بهترین افزونه های گوگل کروم – Page Ruler Redux

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

وب سایت: Page Ruler Redux


پلاگین کروم Image Downloader

پلاگین کروم Image Downloader
پلاگین کروم Image Downloader

آیا می‌خواهید تصاویر را از یک صفحه وب دانلود کنید؟ مانند Eagle، در حالی که هر الهامات و تصاویری را که دوست دارید به‌صورت آنلاین مرور می‌کنید، فقط با یک کلیک می‌توانید آنها را به دلخواه دانلود کنید! دانلودر تصویر همچنین می‌تواند تصویر را بر اساس عرض، ارتفاع یا URL و موارد دیگر فیلتر کند!

وب سایت: Image Downloader


افزونه Fonts Ninja

افزونه Fonts Ninja
بهترین افزونه های گوگل کروم – Fonts Ninja

Fonts Ninja یکی دیگر از ابزارهای عالی برای کمک به شناسایی فونت‌ها، ویژگی‌های CSS و ارائه اطلاعات در مورد فونت‌ها با بررسی سبک‌های موجود است! این پلاگین گوگل کروم می‌تواند به شما در سرعت بخشیدن به گردش کار طراحی کمک کند! حتی می‌توانید فونت‌هایی را که در وب‌سایت پیدا کرده‌اید، درست داخل خود این پلاگین نشانک‌گذاری کنید.

اگر می‌خواهید فونتی را که در وب‌سایت پیدا کرده‌اید امتحان کنید، می‌توانید برنامه macOS/Windows این پلاگین را برای همگام‌سازی دانلود کنید و آنها را در هر نرم‌افزاری مانند Illustrator، Photoshop، Figma امتحان کنید.

وب سایت: Fonts Ninja


افزونه HTML to Figma

افزونه HTML to Figma - بهترین افزونه های گوگل کروم
افزونه HTML to Figma

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

وب سایت: HTML to Figma


پلاگین PerfectPixel

پلاگین PerfectPixel
پلاگین PerfectPixel

با استفاده از این پلاگین گوگل کروم، فرانت‌اند کارها می توانند یک تصویر نیمه شفاف را روی HTML DOM قرار دهند تا طراحی را با طرح بندی CSS مقایسه کنند.

وب سایت: PerfectPixel


افزونه گوگل کروم CSS SCAN

افزونه گوگل کروم CSS SCAN
افزونه گوگل کروم CSS SCAN

با اسکن CSS، می‌توانید سبک‌های CSS هر عنصری را در HTML DOM بررسی، کپی و ویرایش کنید. با “Inspect Element” خداحافظی کنید، فقط ماوس را روی عناصر نگه دارید و با یک کلیک استایل ها و قوانین CSS را کپی کنید.

وب‌ سایت: CSS Scan


افزونه Site Palette

افزونه Site Palette
بهترین افزونه های گوگل کروم – Site Palette

همه ما نمونه هایی از وب سایت هایی با استفاده عالی از رنگ را دیدیم! پالت سایت یک افزونه کروم است که رنگ های اصلی وب سایت فعلی را استخراج می کند. با استفاده از این ابزار می توانید پالت های رنگی مورد علاقه خود را تولید و به اشتراک بگذارید. همچنین، می توانید یک الگوی Sketch را دانلود کنید یا از پشتیبانی Adobe Swatch استفاده کنید!

وب‌ سایت: Site Palette


پلاگین کروم CSS Peeper

پلاگین کروم CSS Peeper
پلاگین کروم CSS Peeper

CSS Peeper یک نمایشگر CSS است که برای طراحان طراحی شده است. عناصر را فوراً با ویژگی‌های مفید برای استفاده در اسکچ یا فتوشاپ بررسی کنید و کل پالت رنگ وب را به روشی بصری جذاب فهرست کنید. بررسی سبک ها را به روشی ساده، منظم و زیبا با CSS Peeper شروع کنید.

وب‌ سایت: CSS Peeper


The Great Suspender Original

The Great Suspender Original
The Great Suspender Original

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

وب‌ سایت: The Great Suspender Original


افزونه کروم Hex Color Picker

افزونه کروم Hex Color Picker
افزونه کروم Hex Color Picker

این افزونه به شما امکان می دهد رنگ ها را از صفحات وب مورد علاقه خود انتخاب کنید. Hex Color Picker نه تنها اطلاعات رنگ را از سبک های CSS استخراج می کند، بلکه می تواند مقادیر RGB را نیز از تصاویر استخراج کند.

وب‌ سایت: Hex Color Picker


بهترین افزونه های گوگل کروم Hoverify

افزونه کروم Hoverify - بهترین افزونه های گوگل کروم
افزونه کروم Hoverify

Hoverify یک افزونه مرورگر است که تجربه توسعه وب شما را با ارائه ابزارهایی برای سرعت بخشیدن به گردش کار شما، مانند بازرسان CSS و HTML، نسخه زنده CSS، صادرات به Codepen، بازرسی پرس و جوهای رسانه ای، یافتن فونت ها، استخراج رنگ ها، تغییر وضعیت مشاهده عناصر و …

وب‌ سایت: Hoverify


افزونه اسکرین شات و ضبط ویدیو Nimbus

افزونه اسکرین شات و ضبط ویدیو Nimbus

این افزونه کروم به شما اجازه می دهد تا از صفحه کامل صفحه وب یا هر قسمت از سایت عکس بگیرید و اسکرین شات ها را ویرایش کنید، تصاویر را برش دهید و ویدیو را به گیف یا mp4 تبدیل کنید.

وب‌ سایت: Nimbus


بهترین افزونه های گوگل کروم Evernote Web Clipper

افزونه Evernote Web Clipper - بهترین افزونه های گوگل کروم
افزونه Evernote Web Clipper

از علایق گرفته تا تحقیقات، هر چیزی را که به صورت آنلاین می بینید – از جمله متن، پیوندها و تصاویر – با یک کلیک در حساب Evernote خود ذخیره کنید. با یک کلیک، می‌توانید بخشی یا تمام صفحه‌های وب، از جمله متن، تصاویر و پیوندها را کلیپ کنید. هر چیزی را که به شما الهام می بخشد را به صورت آنلاین جمع آوری کنید.

وب‌ سایت: Evernote Web Clipper


جمع بندی

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

حالا نوبت شماست!

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

3.4/5 - (8 امتیاز)

دیدگاه و پرسش

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!