بداية سريعة
يغطي هذا الدليل جميع ميزات برنامج Framer:
- ابدء — Create your account and set up a new project
- كيفية استخدام تحسين محركات البحث الآلي — Sitemaps, meta tags, and clean markup handled for you
- كيفية استخدام التصميم — Frames, layers, and components on one canvas
- كيفية استخدام التحليلات المتقدمة — Traffic and behavior insights built into the editor
- كيفية استخدام Collaborate — Real-time editing with your whole team
- كيفية استخدام نظام إدارة المحتوى — Manage repeating content from one collection
- كيفية استخدام الرسوم المتحركة — Scroll effects and hover states without code
- كيفية استخدام أداة الذكاء الاصطناعي — Full landing pages from a text prompt
- كيفية استخدام نطاق مخصص — Your own web address with SSL handled
- How to Use Site & Page Metadata — Control how every page looks in search
- How to Use Automatic Sitemap — A live index of every page you publish
الوقت اللازم: خمس دقائق لكل فقرة
يتضمن هذا الدليل أيضًا ما يلي: نصائح احترافية | الأخطاء الشائعة | استكشاف الأخطاء وإصلاحها | التسعير | البدائل
لماذا تثق بهذا الدليل؟
I have shipped client work in Framer for two years and tested every feature covered here. This tutorial comes from real hands-on work — not marketing copy or vendor screenshots.
Framer is a powerful, browser-based tool for designing, prototyping, and publishing responsive websites without coding.
Most people only scratch the surface of it.
They build one page from scratch, publish, and never touch the CMS or the animations panel again.
يوضح لك هذا الدليل كيفية استخدام كل ميزة رئيسية، خطوة بخطوة.
شرح برنامج Framer
Learning how to use Framer means one shift in thinking: away from static design files, toward component-based, responsive web development. The basics below get you there.
مؤطر
Design, prototype, and publish a real website from one browser tab. Framer removes the handoff to developers — what you draw on the canvas is what goes live. Start free, upgrade when you need a custom domain.
البدء باستخدام برنامج Framer
Complete this one-time setup before touching any feature.
Here is what my own first week with the editor looked like:
والآن دعونا نستعرض كل خطوة على حدة.
الخطوة الأولى: إنشاء حسابك
Go to the Framer website and click Sign Up.
Enter your email and set a password.
✓ نقطة تفتيش: تحقق من صندوق الوارد for the confirmation email.
الخطوة الثانية: افتح المحرر
Framer runs in the browser, so Windows and ماك both work with no install.
Log in and the canvas loads immediately.
Here is what you get out of the box:
✓ نقطة تفتيش: You should see the main dashboard with your project list.
الخطوة 3: بدء مشروع جديد
Click New Project. Choose a blank canvas to build from scratch, or open an example template and change it.
You can also import a Figma file, which Framer converts into clean, responsive HTML.
✅ تم: Your Framer project is open and ready for any feature below.
كيفية استخدام تحسين محركات البحث الآلي من Framer
آلي تحسين محركات البحث — Automated SEO handles sitemaps, meta tags, and clean markup so your site ranks without extra tools.
Step 1: Open Site Settings
Open site settings from the top-left menu of your Framer project.
Framer builds an automatic sitemap the moment you publish.
Step 2: Write Page Metadata
Manually update a unique meta title and description for every page.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: Each page shows its own title in the metadata list.
Step 3: Fix Your Heading Tags
Open the Accessibility panel and assign correct HTML tags to each text layer.
Every page needs exactly one H1 containing its primary keyword.
✅ النتيجة: Your site ships with semantic structure and search-ready metadata.
💡 نصيحة احترافية: Enable the Lazy loading setting for media below the fold. Images outside the first viewport load later and your page speed improves.
How to Use Framer Designer
تصميم — Design gives you frames, layers, and pre-made components on a single canvas.
Step 1: Create a Frame
Go to Frame > New Frame. Frames are the building blocks of your Framer design.
Step 2: Add Your Elements
Add a text layer, images, or a button inside the frame.
Select any element and drag the resizing handles to adjust its size.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: Your frame holds every element you added, in order.
Step 3: Switch to Stacks
Use Stacks to manage spacing and alignment automatically instead of absolute positioning.
✅ النتيجة: A clean layout that holds together instead of drifting apart.
💡 نصيحة احترافية: Give section frames top and bottom padding. Add left and right padding to the containers inside them for consistent spacing.
كيفية استخدام التحليلات المتقدمة في Framer
التحليلات المتقدمة — Advanced Analytics reports traffic and behavior insights without a third-party script.
الخطوة 1: افتح علامة تبويب التحليلات
Click Analytics in the top bar of your project.
Step 2: Choose a Date Range
Pick a window and compare it against the previous period.
Weekly ranges show trends; daily ranges only show noise.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: You see visitors, page views, and your top pages.
Step 3: Act on What You See
Find pages with high exit rates and edit that content first.
One weak headline can cost more traffic than a whole redesign wins back.
✅ النتيجة: Real numbers telling you which page to change next.
💡 نصيحة احترافية: Watch referrer بيانات every week. It shows which sites connect back to you and which posts earn links on their own.
How to Use Framer Collaborator
التعاون — Collaborate lets designers work on the same site in real time.
Step 1: Send an Invitation
Click Share, then invite a collaborator by email.
Step 2: Set Their Role
Choose Editor for people who build, or Viewer for people who only watch and leave feedback.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: هُم الصورة الرمزية appears on the canvas once they accept the invitation.
Step 3: Work at the Same Time
Edit one canvas together. Every change syncs live for everyone.
✅ النتيجة: One shared project instead of five conflicting copies.
💡 نصيحة احترافية: Organize and rename layers before you invite anyone. Clear names save your team hours of hunting through the layer list.
كيفية استخدام نظام إدارة المحتوى Framer
نظام إدارة المحتوى — CMS turns repeating content into a collection you manage from one place.
الخطوة 1: إنشاء مجموعة
Open the CMS panel and add a new collection.
One collection per content type: blog posts, case studies, team members.
Step 2: Add Your Fields
Set a field for each piece of content: title, image, body, and slug.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: Your collection lists every entry in a simple table.
Step 3: Connect It to the Design
Select a component on the canvas and bind each layer to a CMS field.
Build the card once and every entry inherits that design.
✅ النتيجة: New entries publish automatically using the same layout.
💡 نصيحة احترافية: Drop a search icon entry point for site search into your header. That icon entry point for site search helps readers find older posts fast.
كيفية استخدام الرسوم المتحركة في برنامج Framer
الرسوم المتحركة — Animations bring your ideas to life with scroll effects, hover states, and transitions.
الخطوة 1: تحديد عنصر
Pick the element you want to animate on the canvas.
Step 2: Open the Animation Menu
Go to Animation > New Animation and choose a trigger.
Scroll, hover, and click cover most real interactions you need.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: A preview plays the moment you release the trigger.
Step 3: Adjust the Curve
Change the easing and duration until the motion feels natural.
✅ النتيجة: Interactions that feel designed, not bolted on afterwards.
💡 نصيحة احترافية: Keep entrance animations under 400ms. Anything longer makes a fast site feel slow, and visitors read that as a broken page.
How to Use Framer AI Tools
أداة الذكاء الاصطناعي — Framer AI generates complete, responsive, styled landing pages from simple text prompts.
Step 1: Start a New Project
Create a new project and click the AI option instead of a blank canvas.
الخطوة الثانية: اكتب موضوعك
Describe the site you want in plain language. Name your audience and tone.
هذا ما يبدو عليه الأمر:
✓ نقطة تفتيش: A full page appears on your canvas within seconds.
Step 3: Edit the Result
Treat the output as a draft. Change copy, swap images, adjust spacing.
✅ النتيجة: A working first draft instead of a blank screen.
💡 نصيحة احترافية: Generate two or three versions from similar prompts. Copy the best section out of each one and build your real page from those.
How to Use Framer Custom Domain
نطاق مخصص — Custom Domain points your own web address at the site you just built.
الخطوة 1: افتح إعدادات النطاق
Go to site settings and select Domains.
الخطوة الثانية: أضف نطاقك
Type your domain, then copy the DNS records Framer shows you.
You need one A record and one CNAME in most cases.
✓ نقطة تفتيش: Framer shows a pending status until DNS resolves.
Step 3: Paste the Records
Add those records at your registrar. Most updates finish within an hour.
✅ النتيجة: Your project loads on your own domain with SSL handled for you.
💡 نصيحة احترافية: Connect the domain before you publish anything public. Doing it later means cleaning up redirects and losing مبكر التصنيفات.
How to Use Framer Site & Page Metadata
Site & Page Metadata — Site and page metadata control how each page looks in search results and shared links.
Step 1: Open a Page
Select a page in the left panel and open its settings.
Step 2: Write the Title and Description
Keep titles under 60 characters and descriptions close to 155.
Write them for a person deciding whether to click, not for a crawler.
✓ نقطة تفتيش: The preview card updates as you type.
Step 3: Add a Social Image
Upload an open graph image so links look right when people share them.
✅ النتيجة: Every page carries its own title, description, and share card.
💡 نصيحة احترافية: Never ship the default title on more than one page. Duplicate titles make search engines choose which page to bury.
How to Use Framer Automatic Sitemap
Automatic Sitemap — Automatic Sitemap keeps a live index of every page you publish.
Step 1: Publish the Site
Framer writes the sitemap on publish. No plugin, no code.
Step 2: Check the File
Open yoursite.com/sitemap.xml in a browser window.
✓ نقطة تفتيش: You see every published page listed there.
Step 3: Submit It
Add that sitemap URL to Google Search Console.
Resubmit after any large batch of new pages.
✅ النتيجة: Search engines find new pages in days instead of weeks.
💡 نصيحة احترافية: Hide staging pages from the sitemap in page settings. Only pages you want indexed belong in that file.
نصائح واختصارات احترافية لبرنامج Framer
After two years of daily use, these are the tips I give every new designer on my team.
اختصارات لوحة المفاتيح
| فعل | اختصار |
|---|---|
| Insert a frame | F |
| Insert a text layer | T |
| Duplicate selection | Cmd / Ctrl + D |
| Open live preview | Cmd / Ctrl + P |
ميزات خفية يغفل عنها معظم الناس
- Master Component Library: Keep every component in one central file so updates and version control stay simple across a growing site.
- Plugin manager: Open it from the toolbar to add new tools to the editor without touching code.
- Prototype testing: Go to Prototype > Test Prototype to click through high-fidelity interactions before you publish.
Best Places to Learn Framer
- Framer University: Over 100 practical video lessons taught by an official Framer mentor.
- Official documentation: Covers every part of the tool, with tutorials and guides for each panel.
- يوتيوب channel: Watch a deep pile of video tutorials and real case studies from the team.
- Community forum: The best place to connect with other designers and get answers fast.
- Udemy and Skillshare: Pick a structured course if you want the basics in a fixed order.
- GitHub: Source code and open resources, useful if developers are in the loop.
أخطاء شائعة يجب تجنبها في مجال تأطير المباني
Mistake #1: Positioning everything by hand
❌ خطأ: Dragging every element into place with absolute positioning, then watching the layout break on a smaller screen.
✅ يمين: Use Stacks so spacing and alignment update on their own when content changes.
Mistake #2: Designing only for desktop
❌ خطأ: Publishing a site without ever opening the tablet or phone breakpoint.
✅ يمين: Check each breakpoint and adjust text sizes and padding before you publish.
Mistake #3: Editing instances instead of components
❌ خطأ: Changing one instance and expecting the rest to follow.
✅ يمين: Edit the component itself. Instances inherit structure, layout, and shared styles, while a variable lets each instance override just the intended fields without affecting the others.
استكشاف أخطاء برنامج Framer وإصلاحها
Problem: Text overflows on the phone breakpoint
سبب: Font sizes are locked to fixed pixel values, so they never scale down.
يصلح: Use REM units for font sizes. Type then scales properly across every breakpoint.
Problem: The published site looks different from the canvas
سبب: Unpublished changes, or your browser is serving a cached copy.
يصلح: Publish again, then hard-refresh the page. Confirm you are viewing the right domain.
Problem: A collaborator cannot edit anything
سبب: They were invited as a Viewer rather than an Editor.
يصلح: Open Share, change their role to Editor, and send a fresh invitation.
📌 ملحوظة: إذا لم يحل أي من هذه الحلول مشكلتك، فاتصل بدعم Framer.
ما هو برنامج Framer؟
مؤطر is a website builder where you create layouts on a canvas using frames, layers, and pre-made components — or generate a whole site from a text prompt.
Think of it as a design tool and a web host sharing one window.
شاهد هذه النظرة العامة السريعة:
يتضمن هذا المنتج الميزات الرئيسية التالية:
- تحسين محركات البحث الآلي: Sitemaps, meta tags, and clean markup handled for you
- تصميم: Frames, layers, and components on one canvas
- التحليلات المتقدمة: Traffic and behavior insights built into the editor
- التعاون: Real-time editing with your whole team
- نظام إدارة المحتوى: Manage repeating content from one collection
- الرسوم المتحركة: Scroll effects and hover states without code
- أداة الذكاء الاصطناعي: Full landing pages from a text prompt
- نطاق مخصص: Your own web address with SSL handled
- Site & Page Metadata: Control how every page looks in search
- خريطة الموقع التلقائية: A live index of every page you publish
It also handles high-fidelity prototypes, real-time collaboration, and reusable symbols, so one project carries an idea from sketch to live site.
For a full breakdown, see our مراجعة Framer.
That single window replaces the usual design-file-then-developer round trip.
أسعار تأطير الصور
Here is what Framer costs in 2026:
| يخطط | سعر | الأفضل لـ |
|---|---|---|
| أساسي | $10 | Personal sites and portfolios |
| محترف | $30 | المستقلون and growing business sites |
| حجم | $100 | Agencies and high-traffic content sites |
تجربة مجانية: Yes — a free plan lets you build and publish on a Framer subdomain.
ضمان استرداد الأموال: Not advertised. You can downgrade or cancel at any time.
💰 أفضل قيمة: Pro — it covers a custom domain, CMS content, and analytics on one plan.
مقارنة بين Framer والبدائل
How does Framer compare? Here is the landscape:
| أداة | الأفضل لـ | سعر | تصنيف |
|---|---|---|---|
| مؤطر | Design control and animations | 10 دولارات شهرياً | ⭐ 4.5 |
| جاما | Decks and quick one-pagers | 10 دولارات شهرياً | ⭐ 4.6 |
| متين | Instant small-business sites | 12 دولارًا شهريًا | ⭐ 4.4 |
| 10Web | AI-built WordPress sites | 10 دولارات شهرياً | ⭐ 4.4 |
| دوريك | Simple no-code عمل الموقع | 18 دولارًا شهريًا | ⭐ 4.5 |
| تايبدريم | إنشاء الصفحات بأسلوب Notion | 15 دولارًا شهريًا | ⭐ 4.3 |
| فيتامين ب12 | Done-for-you service sites | 42 دولارًا شهريًا | ⭐ 4.2 |
| جيمدو | Tiny shops and local pages | 9 دولارات شهرياً | ⭐ 4.1 |
اختيارات سريعة:
- الأفضل إجمالاً: Framer — design freedom plus real publishing in one tool.
- أفضل ميزانية: Jimdo — cheapest way to get a small page online.
- الأفضل للمبتدئين: Durable — answers a few questions and builds the site for you.
- Best for content sites: 10Web — WordPress underneath, so plugins stay available.
🎯 Framer Alternatives
هل تبحث عن بدائل لبرنامج Framer؟ إليك أفضل الخيارات:
- 🚀 جاما: Turns a prompt into decks, docs, and simple sites in minutes.
- ⚡ متين: Builds a working small-business site in about thirty seconds.
- 💰 الجوز الأمريكي: Free AI site مولد aimed at first-time founders.
- 🧠 تصميم الكود: AI layouts you can refine visually, then export.
- 🎨 الموقع: Visual builder for designers who want fine control.
- 🔧 10Web: AI website building on top of managed WordPress hosting.
- 👶 صانع الأناناس: Guided setup with copy and images written for you.
- 💼 دوريك: Clean no-code builder with a generous free tier.
- 📊 تايبدريم: Notion-style editing for people who hate design tools.
- 🌟 جيمدو: Budget builder with local business and shop templates.
- 🏢 فيتامين ب12: Done-for-you sites for law, finance, and consulting firms.
- 🔥 فطيرة آبي: Site and app building bundled in one no-code platform.
للاطلاع على القائمة الكاملة، راجع بدائل برنامج Framer مرشد.
⚔️ مقارنة بين الإطارات
Here is how Framer stacks up against each one:
- Framer vs Gamma: Gamma wins on speed for decks. Framer wins on any site you plan to keep.
- إطار خشبي مقابل متين: Durable is faster to launch. Framer gives you real design control afterwards.
- مقارنة بين مزارع الأشجار وجوزة الزبدة: Butternut is free and simple. Framer scales past the first landing page.
- مقارنة بين Framer و CodeDesign: CodeDesign exports code. Framer hosts and publishes for you instead.
- إطار العمل مقابل موقع الويب: Siter feels similar on the canvas. Framer has stronger CMS and animations.
- مقارنة بين Framer و 10Web: 10Web keeps WordPress plugins. Framer skips plugins and the maintenance they bring.
- مُؤطِّر الهياكل الخشبية مقابل مُنشئ الأناناس: Pineapple Builder holds your hand more. Framer rewards you for learning it.
- فرامر ضد دوريك: Dorik is cheaper at the low end. Framer handles complex interactions far better.
- Framer مقابل Typedream: Typedream is quicker to write in. Framer is quicker to design in.
- فرامر ضد جيمدو: Jimdo suits tiny local pages. Framer suits brands that care how things look.
- مقارنة بين Framer و B12: B12 does the work for you. Framer keeps the work in your hands.
- Framer مقابل Appy Pie: Appy Pie also builds apps. Framer stays focused on websites and does them better.
ابدأ باستخدام Framer الآن
لقد تعلمت كيفية استخدام جميع الميزات الرئيسية لبرنامج Framer:
- ✅ تحسين محركات البحث الآلي
- ✅ تصميم
- ✅ تحليلات متقدمة
- ✅ التعاون
- ✅ نظام إدارة المحتوى
- ✅ الرسوم المتحركة
- ✅ أداة الذكاء الاصطناعي
- ✅ نطاق مخصص
- ✅ Site & Page Metadata
- ✅ Automatic Sitemap
الخطوة التالية: open a new project and try one feature today.
Most people start with Design, because frames make everything else click.
It takes less than five minutes.
الأسئلة الشائعة
ما هي استخدامات برنامج Framer؟
Framer is used to design, prototype, and publish responsive websites in one browser tab. Designers build on a canvas with frames and components, then publish live without a developer handoff.
هل برنامج Framer مجاني لإنشاء موقع ويب؟
Yes. A free plan lets you build and publish a site on a Framer subdomain. Paid plans start at $10 and add a custom domain, CMS content, and more pages.
هل برنامج Framer أفضل من برنامج Figma؟
They do different jobs. Figma is better for static design files and team libraries. Framer is better when you want that design to become a real, published website.
هل يمكنني إنشاء موقع ويب باستخدام برنامج Framer؟
Yes. Framer handles design, CMS content, animations, metadata, and hosting. You publish directly from the editor, so no separate developer or hosting setup is needed.
كم تبلغ تكلفة برنامج Framer شهرياً؟
Framer pricing runs $10 per month for Basic, $30 for Pro, and $100 for Scale. A free tier is available if you only need a subdomain site.
English 
Spanish 
Chinese 
German 
French 
Arabic 
Russian 
Portuguese 
Japanese 
Korean 
Italian 
Turkish 
Dutch 
Polish 
Indonesian 
Thai 
Vietnamese 