Ten years ago, I started with Photoshop, struggling with dozens of huge PSD files for just a single interface. Every time a customer asks to fix a button, beads of sweat fall. Now, with just one Figma link, the whole team from designer, dev to boss can view, comment and work at the same time. If you want to step into the UI/UX design world but don't know where to start, then believe me, Figma is the best passport.
This Figma tutorial from scratch is not a bunch of dry theory. This is a free course that I summarize from the "real battle" process, helping you from zero to confidently creating your first design.
What is Figma that makes designers, even veteran ones like me, have to "move house" en masse?
Figma is a web-based user interface (UI) and user experience (UX) design tool, featuring real-time teamwork capabilities.
Surely when walking around groups, you have heard many people wondering what Figma is. Unlike traditional software that must be downloaded to your computer and requires "huge configuration", Figma allows you to design right on Chrome or Safari browsers. This completely solves the hardware problem for those who are self-studying basic Figma. At Pham Hai, we always advise interns to start with Figma because it is extremely light, smooth and intuitive.
Figma is more than just a tool, it's a revolution
The introduction of Figma has completely changed the way product development teams interact, turning personal design into an open and transparent collaborative space.
In the past, when I finished making a screen, I had to export the image file, send it via email, wait for a response, and then work hard to fix it. Now everything fits on the cloud storage platform. You edit a curve using Vector Network, and your colleague sitting halfway around the world also sees the drawing move immediately. This is truly the new UI/UX Design industry standard. If you are a programmer looking to get into this field to improve your skills, learning Learn UI/UX Design for developers is a great stepping stone to grasp design thinking before diving into tools.
Reasons why you want to "move" to Figma immediately
Extremely fast processing speed, diverse features from drawing wireframes to making vivid prototypes, and excellent synchronization capabilities are the plus points that retain Figma's users.
You want to design website interface with Figma? Or are you cherishing the idea of designing a mobile app using Figma? This platform does it all. The friendly interface makes the process of learning Figma free easier than ever. In particular, according to the latest updates until 2026, Figma has optimized performance to the point that you will no longer have to worry about the software crashing and losing files, because the system automatically saves data every second.
Is Figma free? The answer makes beginners breathe a sigh of relief
Figma is completely free for individual users through the Starter package, providing almost all the most essential features for you to study and work.
A lot of people text me and ask: "IsFigma free?". The good news is YES. Figma Free Plan allows you to create unlimited files in your personal Drafts folder and up to 3 files in your Team project. With a Figma course for beginners, that much space is more than enough for you to dabble, come up with ideas and perfect your first portfolio without spending a dime.
Get to work: Get your first design in 5 minutes, do you believe it?
With just a few quick registration steps and getting familiar with the basic interface, you can start drawing your first shapes, officially opening your own design journey.
Don't hesitate or be afraid anymore, how to use Figma for beginners is actually much easier than you think. We will go through each specific step together, from creating an account until drawing the first interface lines.
Instructions for registering Figma and tips to get a free Education account
The Figma registration process takes place in the blink of an eye via a Google account, especially students can authenticate to use the Professional version completely free of charge.
First, visit the Figma.com homepage and click the "Get started" button. My Figma registration instructions are actually just one click: select "Continue with Google". That's it!
Tuy nhiên, có một mẹo nhỏ. Nếu bạn đang sở hữu email có đuôi .edu của trường đại học, hãy đăng ký ngay chương trình Figma Education miễn phí. Bạn sẽ được hệ thống nâng cấp lên gói Professional với đầy đủ các tính năng cao cấp (như Dev Mode nâng cao, không giới hạn Team files) mà không phải đóng phí duy trì hàng tháng. Kinh nghiệm của Phạm Hải là hãy tận dụng tối đa đặc quyền này khi các bạn còn ngồi trên ghế nhà trường.
Get acquainted with the "front" of Figma: Dashboard, Toolbar, Layers and Properties Panel
Figma's working interface is divided into 4 main areas: File management Dashboard, Toolbar above, Layers Panel on the left and Properties Panel on the right.
When you first create a file and open it, don't be alarmed by a blank canvas space. Look at the top edge, which is the Toolbar containing the most basic drawing commands. Looking to the left is the Layers Panel, which manages object layers exactly like Photoshop but is more neatly arranged. On the right is the Properties Panel, where you can tweak colors, sizes, shadows or effects. And the Figma Dashboard on the outermost screen is where your entire project is stored. Mastering these 4 "front" areas means you have mastered 50% of basic operations in Figma.
Practice now: Draw your first wireframe with Frame, Shape and Text
Using Frame to create standard screen frames, Shape to outline geometric blocks and Text to insert text content are the 3 fundamental steps to form an interface.
Now roll up your sleeves and practice. Below is the most basic keyboard shortcuts you need to remember:
| Shortcuts | Tools | Practical application |
|---|---|---|
| F | Frame | Create screen frames (iPhone 14, Desktop, Tablet) |
| R | Rectangle | Draw rectangles and squares as buttons and images |
| T | Text | Type text, insert title and text content |
Bạn bấm phím F, nhìn sang Properties Panel bên phải và chọn kích thước "iPhone 14". Một khung trắng sẽ hiện ra. Tiếp theo, dùng phím R để vẽ một hình chữ nhật lớn đại diện cho hình ảnh, và phím T để gõ dòng chữ "Xin chào thế giới". Chúc mừng, bạn vừa biết vẽ wireframe bằng Figma rồi đấy! Wireframe (bản vẽ khung xương) chính là bước phác thảo không thể thiếu của mọi nhà thiết kế trước khi bắt đầu đắp màu sắc và chi tiết.
Master the "inseparable" tools to design like a pro
To increase working speed and ensure accuracy, you must be proficient in Auto Layout, Components and know how to exploit the huge Plugin store of the Figma community.
Once you're familiar with Figma's basic tools, it's time to take your skills to the next level. Below are the "heavy weapons" to help you rise from a novice to a designer who works systematically and thinks scientifically.
Frame, Group, Section: Where is the "home" for design objects?
Group is used to group simple objects, Frame acts as an independent screen with its own properties, and Section helps divide large logical areas on the canvas.
Beginners often confuse Group and Frame. My advice is: Get into the habit of using Frame in 90% of cases. Frame not only groups, but also allows you to crop overflow content (clip content), or apply extremely professional grid systems. Recently, Figma launched the Section feature. It's extremely useful for you to zone off large design flows (e.g. Login area, Home area), keeping your workspace organized.
Auto Layout – "Magic" helps you forget about manual alignment
Auto Layout is a feature that automatically arranges and scales internal elements according to actual content, helping designs display flexibly on many different screen sizes.
If there's a feature that makes me fall in love with Figma and can't let go, it's definitely Auto Layout. Imagine you create a button. When you type more text, the button automatically lengthens while maintaining the same margin distance on both sides. Or when you delete a product tag from the list, the tags below will automatically fill in the empty space. Learning how to master Auto Layout is a must in the Figma from scratch roadmap. It helps optimize the process, saving you dozens of hours of manually dragging and dropping and aligning each pixel.
Components – Create once, use forever and the secret to synchronization
Components help you create original design components (Main Component), when you change the original, all copies (Instances) on other screens will automatically update.
Imagine you're designing an application with 50 screens, and they all share the same navigation menu bar at the bottom. Suddenly, the customer asked to change the color of that menu bar from green to red. If you don't use Components, you will have to fix it manually 50 times. But with Components, you only need to change the color exactly once in the original. This is the core thinking to build consistent and professional design systems in the future.
Plugins - "Squad" of indispensable assistants
Plugins are software extensions developed by third parties that help automate repetitive tasks, insert fake data or create quick effects right in Figma.
Never do everything yourself from scratch if someone has already done it for you. Visit Figma Community and search for useful Figma Plugins. Do you need to insert random user avatar images? Use the Unsplash plugin now. Need to find beautiful icons? Turn on the Iconify plugin. Need to attach your flat design to a cool 3D phone to show off on Behance? Find Mockup plugins now. The global community of Figma users is extremely creative, and they have built a huge treasure trove to serve you.
Elevate design: From static drawings to vivid prototypes
The Prototype feature in Figma turns lifeless static frames into a stream of realistic interactive experiences, allowing users to click, swipe, and scroll just like a programmed product.
A website design or mobile application, no matter how beautiful it is, is just a static picture if it cannot be interactive. creating prototypes in Figma helps you present your ideas to customers, bosses or a team of programmers in the most intuitive and convincing way.
Create prototypes in Figma: Link screens and add motion effects
By switching to the Prototype tab in the Properties panel, you can drag arrows connecting elements to the target screen, and set up trigger actions such as Click, Hover or Drag.
To get started, select the Prototype tab on the Properties Panel. Click on any button on the screen, you will see a small round dot appear on the right edge of that button. Click and drag that point to the next screen. You can easily set up a slide in effect to simulate page turning. A well-made Prototype will help the development team detect experience flow (UX) bottlenecks early before wasting time writing code.
Smart Animate – Bring your interface to life
Smart Animate automatically detects layers with the same name between two screens and calculates them to create smooth animations for changes in position, size or color.
This is the real "magic" that makes Figma score absolute points. Instead of choosing traditional rigid transition effects, choose Smart Animate. Figma will automatically interpolate and create extremely smooth movements. For example, a small icon that zooms into the middle of the screen, or a list that swipes up smoothly. The feeling is so realistic that you will think you are holding a fully programmed application in your hand.
Teamwork on Figma: The power of collaboration
Figma breaks all geographical space barriers, allowing many people to simultaneously access, edit and discuss directly on a single design file in real time.
As I emphasized at the beginning of the article, Figma's collaboration feature is a complete game changer in the design industry. Teamwork on Figma goes extremely smoothly. You can clearly see your colleague's mouse cursor moving on the screen without feeling any lag, even when the team has dozens of people online.
Share files and invite teammates to "have fun"
The blue Share button in the upper right corner of the screen allows you to create a file sharing link for anyone, with permission to only view (View) or allow direct editing (Edit).
To invite others to view the file, just click the "Share" button, copy the link and send it via Zalo, Telegram or Slack. You can grant "Can view" permission to management or customers so they can monitor work progress, and "Can edit" permission to other designers in the team. Collaboration and teamwork have never been so transparent and easy.
Leave a comment, get feedback directly on the design
The Comment tool (shortcut key C) helps members pin comments and suggestions directly on every small detail on the interface, extremely convenient for the design review and editing process.
Thay vì phải chụp màn hình, khoanh đỏ chỗ cần sửa rồi gửi qua lại các ứng dụng chat rất mất thời gian, giờ đây mọi người chỉ cần nhấn phím C. Sau đó click thẳng vào chỗ cần sửa trên canvas Figma để gõ bình luận (Comment). Bạn cũng có thể tag tên đồng nghiệp bằng cú pháp @tên_người_dùng để họ nhận được thông báo. Tính năng này giúp luồng thông tin trao đổi được tập trung tại một nơi, tránh tình trạng trôi tin nhắn hay hiểu lầm ý nhau.
Version History: Time machine saves you in times of accident
Version History is a feature that automatically stores design versions according to timelines, allowing you to review or restore all old data if you accidentally delete it by mistake.
Đã bao giờ bạn lỡ tay xóa sạch một màn hình quan trọng, lưu file lại rồi tắt máy chưa? Cảm giác lúc đó chắc chắn là hoảng loạn tột độ. Nhưng với Figma, bạn cứ bình tĩnh. Nền tảng này liên tục lưu lại các mốc thời gian. Bạn chỉ cần vào menu File > Show version history là có thể kích hoạt "cỗ máy thời gian", quay ngược về quá khứ và khôi phục lại nguyên vẹn bản thiết kế của ngày hôm qua. Tính năng này thực sự là "vị cứu tinh" vĩ đại trong quá trình làm nghề của tụi mình.
You see, getting started with Figma isn't as complicated or scary as it sounds. It's intuitive, powerful, and importantly, has a huge community that's always ready to support each other. Don't see learning Figma as a burden to overcome, see it as equipping yourself with a new superpower. With the Figma instructions for use from scratch that I just shared, you have absolutely enough background knowledge and confidence to start the path of designing your own interface. The core problem is not in the tools, but in your creative ideas and perseverance in practicing.
What are you waiting for? Open your browser, go to Figma and try creating a simple button, wireframe or profile screen today. If you have any questions during the process, join the design communities on Facebook, you will be surprised by everyone's enthusiasm!
Lưu ý: Thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
