�?bài viết này, chúng ta cùng tìm hiểu v�?các loại Component properties mà Figma có th�?tạo ra nhé! 

Ứng dụng Component properties trong thiết k�?giao diện

Gi�?s�?bạn có một frame sản phẩm muốn tái s�?dụng �?nhiều nơi khác trong d�?án và bạn muốn thay một đoạn text đ�?phù hợp theo tên của từng sản phẩm, bạn có th�?áp dụng Component properties cho đoạn text đó.

Bước 1: Biến Frame thành Component (Ctrl + alt +K) sau đó tạo cho Frame 1 Variant (biến th�?. 

Bước 2: Chọn vào đoạn text muốn thay đổi và chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm t�?hợp phím Ctrl + alt + A đ�?chọn tất c�?các biến th�?của text đó.

Bước 3: Chọn Create text property, sau đó tùy chỉnh Name (tên của component property) và Value (giá tr�?text) rồi lưu lại. 

Sau đó bạn có th�?d�?dàng thay đổi tên của các sản phẩm tại các Instance (biến th�? khác ch�?với 1 nút bấm.

Tiếp theo bạn muốn nút Pre Order ch�?xuất hiện �?những sản phẩm nhất định. Vậy thì bạn có th�?áp dụng Component property boolean.

Bước 1: Chọn vào nút PreOrder rồi chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm t�?hợp phím Ctral + alt + A đ�?chọn tất c�?các biến th�?của nút đó.

Bước 2: Chọn Create boolean property rồi thay đổi Name tương ứng.

Sau đó bạn có th�?d�?dàng cho ẩn/hiện trạng thái của nút Pre Order bằng Component property boolean cho các biến Instance (biến th�? mong muốn.

Cuối cùng, muốn thay đổi các icon cho phù hợp với từng sản phẩm, bạn th�?áp dụng Component properties Instance swap. 

Bước 1: Biến các icon muốn thay đổi thành các component (Ctrl + Alt +K). Sau đó chọn  các icon đó rồi nhấn t�?hợp phím Ctrl + R đ�?đổi tên cho nhóm icon đó và thêm thuộc tính Current name �?bên dưới đ�?có th�?phân loại icon theo tên. 

Bước 2: Sau khi thêm icon vào v�?trí phù hợp, chúng ta chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm t�?hợp phím Ctrl + alt + A đ�?chọn tất c�?các biến th�?của icon đó.

Cuối cùng chọn create instance swap property và đặt tên cho property đó.

Trên đây là những hướng dẫn v�?Component Properties với 3 cách ứng dụng khác nhau. T�?đây bạn có th�?thỏa thích thay đổi icon cho các Instance (biến th�? khác một cách d�?dàng. Chúc các bạn thành công!

B�?môn Công ngh�?thông tin
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?Hà Nội

The post Component Properties – Khái niệm và ứng dụng trong Figma appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.

Đây là một s�?kiện quan trọng và cần thiết cho sinh viên ngành phát triển phần mềm, đặc biệt là những sinh viên đang theo học môn “Nhập môn K�?thuật phần mềm” và các môn học liên quan đến nền tảng Website. Được biết, Figma là một ứng dụng đ�?thiết k�?giao diện người dùng (UI) và trải nghiệm người dùng (UX) trực tuyến được s�?dụng đ�?làm việc trên các d�?án thiết k�?giao diện web, ứng dụng di động….

Figma cung cấp môi trường làm việc đám mây cho các nhóm thiết k�? cho phép h�?hợp tác và chia s�?d�?án d�?dàng. Việc nắm được cách s�?dụng Figma đ�?thiết k�?giao diện theo chuẩn UI/UX là điều cần thiết cho mỗi sinh viên Công ngh�?thông tin.

Buổi Workshop hơn 2 tiếng nhưng sinh viên vẫn chăm chú lắng nghe đến phút cuối cùng đã chứng kiến s�?tham gia nhiệt tình và đam mê vô cùng của các bạn. Diễn gi�?đã chia s�?kiến thức một cách d�?hiểu và thú v�? giúp cho các bạn có được cái nhìn tổng quan v�?cách s�?dụng Figma đ�?tạo ra giao diện thân thiện và trải nghiệm người dùng ưu việt hơn.

Bên cạnh đó, sinh viên được hướng dẫn cơ bản v�?cách tạo khung (frames), thêm các phần t�?giao diện, sắp xếp layers và s�?dụng components đã được trình bày chi tiết. Ngoài ra, các diễn gi�?cũng minh họa bằng ví d�?thực t�?và chia s�?các lời khuyên hữu ích đ�?thiết k�?theo chuẩn UI/UX.

Cô L�?Chi vốn có nhiều kinh nghiệm thực t�?trong việc s�?dụng Figma, đây là cơ hội tốt cho sinh viên chuyên ngành đưa ra những thắc mắc, khó khăn mình gặp phải khi bắt đầu làm quen với Figma. Không ch�?dừng lại những lý thuyết trên lớp, mà thông qua workshop này b�?môn tin tưởng đã mang lại cho các bạn sinh viên những bài học nâng cao và trải nghiệm thực t�?hơn.

Ch�?đ�?của buổi Workshop đã nhận được phản hồi vô cùng tích cực t�?các bạn sinh viên, th�?hiện s�?quan tâm và tinh thần học hỏi mong muốn nâng cao k�?năng của mình trong lĩnh vực này, đồng thời góp phần làm cho buổi Workshop tr�?thành một trải nghiệm thú v�?và đáng nh�?

Góp phần thành công cho s�?kiện này là cách truyền đạt chuyên nghiệp của khách mời và s�?tham tương tác, đặt câu hỏi tích cực của sinh viên. Những hình ảnh ghi lại những khoảnh khắc tươi vui và s�?tương tác hăng say của các bạn trong quá trình học tập s�?luôn là niềm động viên và khích l�?cho các buổi Workshop tiếp theo.

B�?môn Công ngh�?thông tin FPT M?ng c�� c??c b��ng ?�� Cần Thơ

The post Sinh viên học được gì qua workshop “S�?dụng Figma cơ bản đ�?thiết k�?giao diện theo chuẩn UI/UX”? appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.

Figma gồm nhiều công c�?thiết k�?mạnh m�?trên nền tảng website. Với Figma, bạn có th�?sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết k�?tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều d�?án thiết k�?khác.

Figma là một phần mềm trên nền tảng website và có th�?truy cập và s�?dụng trên hầu hết các h�?điều hành ph�?biến hiện nay như Windows, MacOS,…Chính vì vậy s�?dụng Figma đ�?thiết k�?giao diện người dùng có nhiều ưu điểm dành cho các lập trình viên:

• Kh�?năng tương thích cao với nhiều h�?điều hành, các phiên bản ứng dụng trên máy tính và điện thoại
• Tính cộng tác cao: Figma cho phép làm việc nhóm t�?xa khi làm d�?án chung.
• Trang b�?nhiều công c�?plugin mạnh m�?với kho plugin khổng l�?
• Thiết k�?nhiều layout trong một sản phẩm
• Xuất đa dạng file ảnh cực sắc nét
• Figma h�?tr�?lưu tr�?đám mây

Chính vì những ưu điểm trên nên Figma là nền tảng hữu ích dành cho các UI/UX Designer. Đ�?s�?dụng thành thạo phần mềm này thì sau đây là những phím tắt thông dụng đi kèm với hình ảnh minh họa đ�?giúp bạn d�?hiểu hơn:

Frame (F): tạo frame.

Slice (S): tạo vùng đ�?export nhanh.

Move (V): Di chuyển đối tượng

Scale (K): Phóng to thu nh�?t�?do một đối tượng

Pen (P):  v�?vector

Pencil (Shift-P): v�?t�?do (kết qu�?vẫn là đường vector)

Rectangle (R): v�?hình vuông

Line (L): V�?đường thẳng

Arrow (Shift + L): v�?mũi tên

Ellipse (O): V�?hình ê-líp, hình tròn (gi�?shift)

Place Image (Ctrl+Shift+K): Chèn hình ảnh nhanh t�?máy tính

Text (T): Tạo ch�?/span>

Hand tool (H): di chuyển vùng nhìn

Shift + I: m�?components libraries 

Ctrl + chuột trái: deep select (chọn sâu 1 đối tượng)

Alt + bấm gi�?chuột trái: copy nhanh một đối tượng 

Ctrl + /: search

Ctrl + \:  tắt/m�?giao diện làm việc

Shift + A: tạo auto layout cho 1 đối tượng được chọn 

Ctrl + Alt + K: tạo components cho 1 đối tượng được chọn

Trên đây là một s�?phím tắt có th�?giúp các bạn thuận tiện hơn trong quá trình học tập và làm việc khi s�?dụng Figma. Việc nắm vững các phím tắt này s�?giúp các d�?dàng thao tác, tăng hiệu suất làm việc của mình. Hy vọng bài viết này s�?giúp ích cho các bạn trong quá trình s�?dụng Figma

B�?môn Công ngh�?thông tin
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?Hà Nội

The post Figma và những phím tắt hữu ích bạn nên biết appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.

Figma là gì?

Figma là một công c�?thiết k�?giao diện người dùng (UI) và trải nghiệm người dùng (UX) dựa trên web. Nó cho phép các nhà thiết k�?tạo, chỉnh sửa và chia s�?các bản v�?và prototype trong môi trường đám mây. Figma được phát triển đ�?làm việc đơn giản và hiệu qu�?trong các d�?án thiết k�?đa người dùng, cho phép nhiều người cùng làm việc trên cùng một bản v�?và thấy các thay đổi ngay lập tức.

Figma cung cấp một loạt các công c�?và tính năng đ�?tạo ra các giao diện và trải nghiệm người dùng chất lượng cao. Nó bao gồm các công c�?v�? ch�?đ�?xem, quản lý Layers, tích hợp thư viện và Components, và kh�?năng tương tác prototype. Ngoài ra, Figma cũng h�?tr�?tính năng chia s�?và phản hồi, giúp các nhà thiết k�?làm việc cùng nhau và thu thập ý kiến t�?đồng đội và khách hàng.

Figma là một ứng dụng web, cho phép bạn truy cập và làm việc trực tiếp trong trình duyệt web mà không cần cài đặt phần mềm riêng. Điều này giúp cho việc làm việc t�?xa và phối hợp d�?dàng hơn. Figma cũng có các ứng dụng dành cho h�?điều hành macOS và Windows đ�?bạn có th�?làm việc ngoại tuyến và có trải nghiệm tốt hơn trên máy tính cá nhân.

Tại sao lập trình viên cần biết thiết k�?UI/UX và s�?dụng Figma?

Trong thời điểm hiện tại, một lập trình viên không đơn thuần ch�?cần biết s�?dụng các ngôn ng�?lập trình mà còn cần phải có kh�?năng biết thiết k�?UI/UX vì lập trình viên cần:

• Hiểu rõ yêu cầu và mục tiêu: Biết thiết k�?UI/UX giúp lập trình viên hiểu rõ hơn v�?yêu cầu và mục tiêu của sản phẩm. Điều này giúp h�?xây dựng sản phẩm phù hợp với nhu cầu người dùng và đáp ứng được mục tiêu kinh doanh.
• Tăng kh�?năng tương tác với người dùng: Thiết k�?UI/UX tốt giúp cải thiện trải nghiệm người dùng. Lập trình viên nắm vững các nguyên tắc thiết k�?và quy trình làm việc của nhà thiết k�?UI/UX s�?giúp h�?tạo ra giao diện tương tác tốt hơn, d�?s�?dụng và thu hút người dùng.

• Tăng tính thẩm m�?và trực quan: Thiết k�?UI/UX đảm bảo giao diện của sản phẩm có tính thẩm m�?cao và trực quan. Lập trình viên biết thiết k�?UI/UX s�?giúp h�?tạo ra giao diện hấp dẫn, có cấu trúc tốt và d�?hiểu, t�?đó tạo được ấn tượng tốt đối với người dùng.
• Tối ưu hóa trải nghiệm người dùng: Lập trình viên có kiến thức v�?thiết k�?UI/UX s�?có kh�?năng đưa ra các cải tiến trong giao diện người dùng đ�?cải thiện trải nghiệm người dùng. H�?có th�?xác định các vấn đ�?v�?trải nghiệm người dùng, tối ưu hóa luồng làm việc và tăng tính tương tác của ứng dụng.
• Phối hợp tốt với nhóm thiết k�? Biết thiết k�?UI/UX giúp lập trình viên phối hợp tốt với nhóm thiết k�? H�?có th�?hiểu rõ hơn v�?ý định thiết k�? thảo luận và trao đổi ý kiến với nhóm thiết k�?đ�?tạo ra sản phẩm tốt nhất.
• Tăng kh�?năng thịnh hành: Lập trình viên có kiến thức thiết k�?UI/UX s�?tăng kh�?năng thịnh hành trong ngành phát triển phần mềm. Có kh�?năng thiết k�?giao diện đẹp và trải nghiệm người dùng tốt s�?là một lợi th�?cạnh tranh cao với những người trong ngh�?khác.

Tóm lại, lập trình viên cần biết s�?dụng Figma đ�?hiểu rõ yêu cầu thiết k�? tăng cường phối hợp với nhóm thiết k�? tối ưu hóa quá trình phát triển, kiểm tra và tối ưu trải nghiệm người dung�?/p>

Cách s�?dụng Figma hiệu qu�?/strong>

Đ�?giúp quá trình thiết k�?tr�?nên d�?dàng Figma có h�?tr�?việc s�?dụng các plugin đ�?m�?rộng tính năng và tăng cường trải nghiệm thiết k�? Dưới đây là một s�?plugin hữu ích trên Figma mà các bạn có th�?khám phá:

1. Stark

Đây là một plugin giúp kiểm tra đ�?truy cập và tuân th�?đối với quy ước màu sắc và tương phản trong giao diện người dùng. Plugin Stark giúp bạn đảm bảo rằng thiết k�?của bạn đáp ứng các tiêu chuẩn v�?kh�?năng tiếp cận và trực quan.

Stark là một plugin cho Figma, cung cấp công c�?h�?tr�?kiểm tra và đảm bảo tính truy cập và tuân th�?tiêu chuẩn thiết k�?cho các d�?án UI/UX.

Tác dụng chính của plugin Stark trong Figma là giúp đảm bảo rằng thiết k�?của bạn đáp ứng các tiêu chuẩn truy cập và tuân th�?nguyên tắc thiết k�?chung. Đây là một công c�?hữu ích cho việc đảm bảo s�?truy cập và h�?tr�?đối với người dùng có kh�?năng hạn ch�? như người dùng mù màu hoặc người dùng có khó khăn v�?th�?giác.

Xem thông tin chi tiết tại đây

2. Content Reel

Content Reel là một plugin của Figma cho phép bạn d�?dàng tạo ra d�?liệu gi�?cho thiết k�?của bạn. Nó cung cấp một loạt các loại d�?liệu, bao gồm tên, công ty, địa ch�? s�?điện thoại, địa ch�?email và nhiều hơn nữa.

Ngoài ra, nó cũng cho phép bạn tùy chỉnh d�?liệu đ�?phù hợp với nhu cầu c�?th�?của bạn, chẳng hạn như tạo ra d�?liệu cho một quốc gia hay khu vực c�?th�?

Plugin này giúp bạn tạo ra nhanh chóng các nội dung mẫu như hình ảnh, văn bản hay d�?liệu gi�? Content Reel cung cấp thư viện các tài nguyên đa dạng đ�?giúp bạn nhanh chóng tạo mẫu và th�?nghiệm các trải nghiệm người dùng.

Xem thông tin chi tiết tại đây

3. Unsplash

Unsplash là một dịch v�?chia s�?ảnh miễn phí và có bản quyền mà bạn có th�?s�?dụng đ�?lấy ảnh chất lượng cao cho các d�?án thiết k�?của mình. Trên Figma, có một plugin gọi là Unsplash, cho phép bạn truy cập và tìm kiếm ảnh t�?Unsplash ngay trong giao diện Figma.

Bạn có th�?nhanh chóng tạo ra các b�?cục hình ảnh, điền vào nội dung d�?án, hoặc ch�?đơn giản là s�?dụng ảnh tạm thời đ�?định v�?các v�?trí trong thiết k�? Điều này giúp bạn d�?dàng thấy được hình dung toàn cảnh của d�?án và tạo ra trải nghiệm xem trước tốt hơn.

Với plugin Unsplash, bạn có th�?truy cập và tìm kiếm hàng ngàn hình ảnh miễn phí t�?Unsplash trực tiếp trong Figma. Điều này giúp bạn tìm và thêm hình ảnh vào thiết k�?của mình một cách d�?dàng và nhanh chóng.

Xem thông tin chi tiết tại đây

4. Auto Layout

Auto Layout là một plugin quan trọng và hữu ích trong Figma, giúp tạo ra các b�?cục linh hoạt và t�?động điều chỉnh khi thay đổi kích thước phần t�?trong thiết k�?

Tác dụng chính của plugin Auto Layout trong Figma là giúp bạn d�?dàng xây dựng các b�?cục linh hoạt, đáp ứng và thay đổi kích thước theo nhu cầu. Bạn có th�?áp dụng Auto Layout cho các nhóm, khung, hay c�?b�?cục tổng th�?của trang.

Khi s�?dụng Auto Layout, bạn có th�?chọn các thuộc tính và quy tắc t�?động điều chỉnh như: căn chỉnh, khoảng cách, căn giữa, t�?l�? và t�?động thay đổi kích thước phần t�?con bên trong. Khi kích thước hoặc nội dung bên trong thay đổi, các phần t�?s�?t�?động thích ứng đ�?duy trì b�?cục chính xác.

Plugin Auto Layout giúp tiết kiệm thời gian và công sức trong việc xây dựng và chỉnh sửa b�?cục trong thiết k�?của bạn. Nó cũng giúp đảm bảo tính nhất quán và đồng nhất trong toàn b�?giao diện người dùng.

Xem thông tin chi tiết tại đây

5. Google Sheets Sync

Plugin này giúp bạn liên kết và đồng b�?hóa d�?liệu t�?Google Sheets vào thiết k�?Figma. Bạn có th�?cập nhật d�?liệu trong Google Sheets và d�?dàng cập nhật lại trong Figma mà không cần phải sao chép và dán th�?công.

Xem thông tin chi tiết tại đây

Đây ch�?là một s�?ví d�?v�?các plugin hữu ích trên Figma. Figma có một cộng đồng plugin phong phú, nên hãy khám phá thêm đ�?tìm các plugin phù hợp với nhu cầu thiết k�?của bạn.

B�?môn CNTT
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?Hà Nội

The post Figma – công c�?h�?tr�?thiết k�?UI/UX mà lập trình viên nào cũng cần biết appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.

]]>