Welcome, Guest
You have to register before you can post on our site.

Email:
  

Password
  





Search Forums

(Advanced Search)

Forum Statistics
» Members: 23
» Latest member: Todyguts
» Forum threads: 13
» Forum posts: 13

Full Statistics

Online Users
There are currently 7 online users.
» 0 Member(s) | 7 Guest(s)

Latest Threads
What is Figma? A Beginner...
Forum: Figma web design
Last Post: general11
05-20-2025, 03:56 AM
» Replies: 0
» Views: 363
Design Your First Figma P...
Forum: Figma web design
Last Post: general11
05-20-2025, 03:47 AM
» Replies: 0
» Views: 479
Top 10 Figma Plugins Ever...
Forum: Figma web design
Last Post: general11
05-19-2025, 08:24 AM
» Replies: 0
» Views: 512
How to find the facbook p...
Forum: Social media platform or communities
Last Post: general11
04-23-2025, 01:41 AM
» Replies: 0
» Views: 634
How to avoid mybb user's ...
Forum: MyBB
Last Post: general11
04-22-2025, 05:45 AM
» Replies: 0
» Views: 250
DNS Look up tool
Forum: Website tools
Last Post: general11
04-17-2025, 10:00 AM
» Replies: 0
» Views: 241
To avoid and disable the ...
Forum: MyBB
Last Post: general11
04-16-2025, 10:03 AM
» Replies: 0
» Views: 241
Why Mybb displayed differ...
Forum: MyBB
Last Post: general11
04-16-2025, 07:31 AM
» Replies: 0
» Views: 226
How to make dimension in ...
Forum: AutoCAD
Last Post: mcad001
01-23-2025, 06:20 AM
» Replies: 0
» Views: 476
Introduction to Figma's u...
Forum: Figma web design
Last Post: general11
01-04-2025, 07:26 PM
» Replies: 0
» Views: 1,472

 
Lightbulb What is Figma? A Beginner’s Guide to Using Figma in 2025
Posted by: general11 - 05-20-2025, 03:56 AM - Forum: Figma web design - No Replies

If you're just getting started with UI/UX design or looking for a powerful, free tool that supports real-time collaboration, Figma might be exactly what you need. In this beginner-friendly guide, we’ll walk you through everything you need to know about Figma — from what it is and how it works, to why it's so popular among designers worldwide.

What is Figma?
Figma is a browser-based design tool used primarily for creating user interfaces (UI), user experiences (UX), wireframes, prototypes, and more. Unlike traditional design software like Adobe Photoshop or Sketch, Figma runs entirely in the browser, which means no downloads or installations are required.

Founded in 2012 by Dylan Field and Evan Wallace, Figma quickly gained traction as a modern alternative to desktop-based design tools. It was acquired by Adobe in 2022, but remains an independent product with continued innovation and growth.

Key Features of Figma
Here are some of the standout features that make Figma one of the most popular design tools today:

  •  Real-Time Collaboration: Multiple users can work on the same file simultaneously.
  •  Browser-Based: Works directly in your web browser — no heavy downloads or updates.
  •  Design Systems: Create reusable components and styles to maintain consistency.
  •  Prototyping Tools: Turn static designs into interactive prototypes.
  •  Plugins & Integrations: Extend functionality with thousands of plugins and integrations.
  •  Free Forever Plan: Perfect for students, freelancers, and small teams.

Why Use Figma?
Whether you're a solo designer or part of a large team, Figma offers several advantages over other design tools:

1. It’s Free
  • Figma offers a free plan that includes:
  • Up to 3 projects
  • 3 editors per team
1GB of cloud storage
This makes it ideal for beginners and hobbyists who want to learn without spending money.

2. No Downloads Needed
Since Figma runs in the browser, you don’t have to worry about installing heavy software or waiting for updates.

3. Collaboration Made Easy
With real-time editing, comments, and version history, Figma simplifies teamwork between designers, developers, and stakeholders.

4. Cross-Platform Compatibility
Figma works on Windows, macOS, Linux, and even Chromebooks.

5. Great for Design Systems

Figma vs Other Design Tools
Let’s compare Figma with some of its top competitors:

   

Arrow All things considered, Figma stands out for being free, collaborative, and feature-rich, making it a top choice for both individuals and teams.

Getting Started with Figma: Step-by-Step
Ready to dive in? Here’s how to start using Figma today:

Step 1: Sign Up
Go to figma.com and click “Get Started” . You can sign up with Google, or email.

   

Step 2: Start a New Project
After logging in:
  • Click “New File”
  • Choose a template or start from scratch
  • Rename your file

   

   

Step 3: Explore the Interface
The main areas of the Figma interface include:
  • Toolbar – Contains tools for drawing, selecting, etc.
  • Canvas – Where you create your designs
  • Layers Panel – Shows all elements in your project
  • Design Panel – Adjust colors, strokes, constraints, etc.

   

Step 4: Design Your First Project
Try designing a simple mobile app screen or website layout. Use frames, shapes, text, and auto-layouts to bring your ideas to life.
Arrow Link to a common first project practice (A simple first task)

Step 5: Share and Collaborate
Click the Share button at the top right to invite others to view or edit your file. You can also generate a shareable link.

Step 6: Export Your Work
Once you’re done, use the Export option to download your design in PNG, SVG, PDF, or JPG format.

Common Use Cases for Figma
Figma is incredibly versatile. Here are some of the most common ways people use it:
  • UI/UX Design: Create beautiful interfaces for websites and apps.
  • Mobile App Design: Build responsive layouts for iOS and Android.
  • Wireframing: Quickly sketch out ideas before diving into high-fidelity design.
  • Prototyping: Add interactions and transitions to simulate real user flows.
  • Design Systems: Maintain consistency across products with reusable components.

Tips for Beginners
Here are a few tips to help you get the most out of Figma:
  • Learn basic keyboard shortcuts (e.g., R for rectangle, T for text)
  • Use Auto Layout to create flexible, responsive designs
  • Take advantage of Community Files and templates
  • Join the Figma Community to find plugins, fonts, and assets
  • Follow Figma creators on YouTube and Twitter for tutorials

Best Resources to Learn Figma
Want to level up your skills? Check out these resources:
  • Figma Plugins:
    • Component repeater
    • Unsplash Plugin
    • Stark (Accessibility Checker)
  • Courses: (Search the figma related courses in below platform, for example, "Figma", “Figma Masterclass”, and “UI/UX Design", etc.)
    • Coursera: “UI/UX Design Specialization”
    • Udemy: “Figma Masterclass”

Conclusion
Figma is a powerful, free, and collaborative design tool that has changed the way designers work. Whether you're a beginner or a seasoned pro, Figma offers something for everyone. With its intuitive interface, robust features, and growing community, it's no wonder it’s become the go-to tool for UI/UX designers around the world.

Want to Learn More?
Join our forum to connect with people, ask questions, and share your Figma creations. Got a tip or trick to add? Drop it in the comments below!

Related Articles

Print this item

Rainbow Design Your First Figma Project
Posted by: general11 - 05-20-2025, 03:47 AM - Forum: Figma web design - No Replies

Here's step-by-step tutorial to design a simple hero section for a modern personal portfolio website (a common first project).

Tools You’ll Use in Figma

  • Frame tool
  • Rectangle tool
  • Text tool
  • Auto Layout

Step 1: Create the Page

1. Open your Figma file.
2. Click the “+” icon at the top-left to create a new page.
3. Name it something like "Portfolio Webpage".

   

   

Step 2: Set Up the Main Frame

1. Press F on your keyboard or click the Frame tool in the toolbar.
2. In the right panel, select Desktop, Draw the frame on your canvas.
3. Type 1920 width and 1000 height manually.

This will be the container for your website layout.

   

   

Step 3: Add a Background Color

1. Select your main frame.
2. On the right panel under "Fill", choose a light background, e.g., #FAFAFA or white.

   

Step 4: Create a Navbar

1. Press R or use the Rectangle tool .
2. Draw a rectangle at the top of the frame – about 100px high and full width (1920).
3. Fill it with a contrasting color like #1E1E1E.
4. Add some Text : Type “MyPortfolio” using the T tool (Press T).
5. Style the text:
  • Size: 20
  • Color: White
  • Align: Left side inside navbar

   

   

   

Step 5: Add a Hero Section
The hero section is usually the main landing area of a website.

A. Add a Title
1. Use the T key to add a headline like:

"I'm Jane Doe 
Frontend Developer & Designer"

2. Font:
  • Font: Inter (default in Figma)
  • Size: 64 for the first line, 48 for the second
  • Weight: Bold
  • Color: #1E1E1E

   

B. Add a Subtitle
1. Below the title, add a smaller paragraph:

"Crafting beautiful user experiences one pixel at a time."

2. Font size: 20, color: #555555

   

C. Add Buttons (Call-to-Action)
1. Press R -> draw a rectangle ~`160x50`.
2. Apply corner radius (use the corners slider).
3. Fill: #1E1E1E

   

4. Add text: “See My Work”, and Text color: white

   

5. Select both button and text -> Right-click -> "Add auto layout" or click "Use Auto Layout" at right panel

   

6. Duplicate the button (ctrl + V) and change to “Contact Me”

   

7. Select both two buttons -> Use Auto Layout to align buttons neatly
8. Adjust spacing between them using the right panel

   

   

Step 6: Add an Image Placeholder
1. Use R to create a rectangle (e.g., 400x400) to the right of your text.
2. Fill it with a light gray (like #EEEEEE)
3. Optional: Add text inside: "Your Photo"
4. You can later replace this with a real image.

   

   

5. Select both rectangle (Image Placeholder) and text -> Position -> Alignment  -> Click "Horizontal Center" and "Vertical Center"
6. Select both rectangle (Image Placeholder) and text -> Right-click -> "Add auto layout" or click "Use Auto Layout" at right panel
7. Use Auto Layout to align Image Placeholder neatly 

   

Step 7: Arrange Everything with Auto Layout (Optional)
Group related elements like the title + subtitle + buttons together:
1. Select all three elements.
2. Right-click -> Create Auto Layout
3. Use padding and spacing settings to space them nicely.

   

   

Final Touches
  • Make sure everything is aligned properly using the blue alignment guides.
  • Use consistent spacing and font sizes.
  • for the further development, you can add shadows or icons (import from Figma Community or use LottieFiles plugins).

Print this item

Lightbulb Top 10 Figma Plugins Every Designer Should Know
Posted by: general11 - 05-19-2025, 08:24 AM - Forum: Figma web design - No Replies

Figma has become one of the most popular design tools for UI/UX designers due to its collaborative features, intuitive interface, and robust plugin ecosystem. Plugins can significantly enhance your workflow by automating repetitive tasks, adding new functionalities, and streamlining your design process.

Here in this article, we’ll explore the Top 10 Figma Plugins Every Designer Should Know in 2025. Whether you're a seasoned professional or just starting out, these plugins will help you work smarter and faster.

1. Magician
Magician brings AI-powered shortcuts right into your Figma workspace. From generating placeholder text and images to auto-adjusting colors, this plugin speeds up the early stages of design significantly. It's especially helpful during the wireframing phase when you need to populate mockups fast.
Go to the plugin

     

2. Component Collector
Get top Figma components in one click" is a tool designed to help UI designers quickly access and add high-quality Figma components to their projects with just one click. This plugin aims to streamline the design process by offering ready-to-use components that are flexible and customizable, enabling faster product and UI/UX design workflows.
Go to the plugin

     

3. Autoflow
Navigating complex user flows can be tricky, but Autoflow simplifies the process by automatically creating flow diagrams with just one click. This is a must-have for UX designers who need to clearly visualize navigation paths and communicate them to stakeholders.
Go to the plugin

   

4. Batch Styler
When working with large design files or comprehensive design systems, manually updating styles can be tedious. Batch Styler lets you apply changes across multiple elements at once—whether it’s typography, fills, or effects—ensuring consistency and saving valuable time.
Go to the plugin

   

5. Blush
Blush is a vector illustration generator that allows you to mix and match customizable characters, scenes, and visual elements directly inside Figma. It’s perfect for adding engaging visuals to your designs without having to switch to another illustration tool.
Go to the plugin

   

6. LottieFiles
With LottieFiles, you can import and animate Lottie animations straight into your Figma files. This plugin bridges the gap between static design and motion graphics, helping you present more dynamic and interactive prototypes.
Go to the plugin

   

7. SmoothShadow
Adding depth and realism to your design elements is easy with SmoothShadow. Instead of adjusting shadow settings manually, this plugin gives you intuitive controls to apply natural-looking shadows in seconds. It’s a small detail that can make a big difference in your design quality.
Go to the plugin

   

8. Icons8
Icons8 offers instant access to thousands of high-quality icons across multiple styles and sizes. Easily searchable within Figma, this plugin ensures your interfaces stay consistent and visually polished.
Go to the plugin

   

9. Instance Finder
Managing large component libraries can get overwhelming. Instance Finder helps you locate every instance of a selected component across your file, making it easier to maintain and update your design system efficiently.
Go to the plugin

   

10. RemoveBG
Need to remove image backgrounds quickly? RemoveBG does exactly that—inside Figma. Say goodbye to external editing tools and speed up your asset preparation for presentations or marketing materials.
Go to the plugin

   

Why Use These Plugins?
These top Figma plugins are more than just convenience tools—they empower designers to focus on what matters most: creativity and problem-solving. Each plugin serves a unique purpose, from speeding up workflows to enhancing collaboration and presentation quality.

Quick Tips:
Always keep your plugins updated to ensure compatibility and performance.
Explore Figma Community for free plugins and templates.
Customize your plugin shortcuts for faster access.

Final Thoughts
Whether you're designing digital products, mobile apps, or websites, integrating these Figma plugins into your workflow can dramatically improve your efficiency and output. The Top 10 Figma Plugins listed above are trusted by professionals around the world and have proven to enhance both individual and team productivity.

Ready to level up your design game? Start installing these essential plugins today and experience a smoother, smarter, and more creative design process!

Print this item

Lightbulb How to find the facbook profile URL?
Posted by: general11 - 04-23-2025, 01:41 AM - Forum: Social media platform or communities - No Replies

Two ways (Web Browser and Mobile) to find the facbook profile URL (or link):

On Desktop (Web Browser):

1. go to the left top side area under the search bar, click your “name with profile icon”
   
or
2. go to the right top side, click the "account" icon and then click “your name with profile icon”
   

3. Look at the address bar in your browser – the profile URL will be something like:
https://www.facebook.com/username (if you have a custom username)
https://www.facebook.com/profile.php?id=123456789 (if you don’t have a username)


On Mobile (Facebook App):

1. Tap on the "three horizontal bars icon (☰)" on the right top side
   

2. Tab profile icon, and then Tap the "three dots (⋮)" or "More" on your profile.
   

   

3. Select "Copy link" to get their URL.
   

Done.  Smile

Print this item

Big Grin How to avoid mybb user's profile be searched and indexed by search engine?
Posted by: general11 - 04-22-2025, 05:45 AM - Forum: MyBB - No Replies

To prevent search engine bots from accessing user profiles, you need to modify the guest group permissions in the Admin Control Panel. Follow these steps:

1.Click “Users & Group” tab

2.Under "Manage User Groups", go for "Guests", click “Options” for "Edit Group"
   

3.Click "Forums and Posts" tab, disable "Can view user profiles?"
   

4.Finally "Save User Group"

By disabling user's profile viewing for guests, you'll automatically block bots from accessing them as well.

Done. Smile

Print this item

Thumbs Up DNS Look up tool
Posted by: general11 - 04-17-2025, 10:00 AM - Forum: Website tools - No Replies

SmileUse the tool here: whatsmydns.net,  enables users to know the propagation status instantly, which will check the DNS record details in real time almost.
   

1. Enter the domain name
2. Select the "NS"
3. Click the "Search" button
Done!

Remark:
DNS (Domain Name System) is the internet's system that translates human-readable domain names (like example.com) into machine-readable IP addresses (like 93.184.216.34). It acts as a global directory, ensuring devices can locate websites and services efficiently.

Print this item

Lightbulb To avoid and disable the Registered User and Moderators to switch the theme in their
Posted by: general11 - 04-16-2025, 10:03 AM - Forum: MyBB - No Replies

1. Click the "option" of the theme you want to disable to all user
   

2. Go to "Edit Theme Properties", and only Select "Administrators"
   

3. Finally click "Save Theme Properties"
   

Done. Cool

Print this item

Lightbulb Why Mybb displayed different theme after admin or user login?
Posted by: general11 - 04-16-2025, 07:31 AM - Forum: MyBB - No Replies

To fix this issue:

1.Login Admin account

2.Go to "User CP" (User Control Panel)

3.Go to "Your Profile", click "Edit Option"
   

4.Go to "Other Option", look for "Board Style", and Select "Use Default"
   

Done, follow the steps above will fix the issue.

Print this item

Rainbow How to make dimension in Autocad?
Posted by: mcad001 - 01-23-2025, 06:20 AM - Forum: AutoCAD - No Replies

Here's the step by step:
1. Open a layout plan
   
2. Follow the sequence, to click Annotate -> Dimension -> Linear
3. Click the small arrow (Bottom right corner) for dimension style.
   
4. Choose "ISO-25", click "New" in Dimension style manager
   
5. Input the new style name, and click continue
   
6. Important here, input the text size first (the typical text size in your drawing), in order to avoid some confused in coming setting and preview.
       
7. Set “Precision” to 0 in the Primary Units
       
8. For the “Extend beyond dim lines”, input 70 (roughly 50% of text height); and “Offset from origin”, input 70 (roughly 50% of text height)
       
9. Set Arrowheads symbol and arrow size 100 (nearly the text size)
And then finally click okay.
       
10. Click close.
   
11. Make Dimension in drawing
a)Select the style “New ISO-25”
b)Select “linear” to draw a dimension 4300
   
c)After the first dimension 2420 completed, then to click “Continue”, draw a dimension continued from the previous dimension:
   

Done Wink

Print this item

  Introduction to Figma's user interface (file browser interface)
Posted by: general11 - 01-04-2025, 07:26 PM - Forum: Figma web design - No Replies

A file browser interface will appear after you successfully log into your Figma account using a web browser.
The file browser interface for the most recent version of Figma is divided into two sections:
1. Side bar on the left
2. Files section
   

Left side bar:

  • User name icon:
  • This shows the current user's name. Clicking on it allows you to modify the user interface theme, settings, download the Figma desktop app, create a community profile, add or switch registered accounts, and log out of your account.
  • The bell icon:
  • Notifications about everything that occurs on your account will show up here.
  • Search for anything box
  • Recents
  • XXX's team
  • Drafts
  • All projects
  • Trash
  • Starred/Team project
  • Explore Community

Files section
in this section, all your files (list of files) will be displayed. The files could show as Grid or list.
   

There are buttons to add files above the list of files:
  • New design file
  • You can create your own Figma designs
  • New FigJamboard
  • Digital whiteboards are utilized for online workshops and meetings, ......
  • New slide deck
  • And Import
   

Print this item