hướng dẫn sử dụng figma

Và nếu bạn có một đội/nhóm thiết kế thì Figma có thể coi là công cụ phù hợp hơn cả vì khả năng cộng tác thiết kế đa nền tảng (Windows, Mac, Android, iOS,…) rất tuyệt vời. Với mức lương trung bình là 154 nghìn đô la mỗi năm và tăng trưởng công việc ổn định, bây giờ là thời điểm lý tưởng để học phát triển blockchain. Để tạo và cải tiến công nghệ blockchain, các nhà phát triển blockchain thực hiện các kỹ năng khác nhau, bao gồm mạng máy tính, mật mã, thuật toán và cấu trúc dữ liệu. Lỗi này thường xuất hiện ở các bạn mới học Figma, thông thường các bạn sẽ không dùng đến constraints.

Bạn còn có thể thoải mái sử dụng các công cụ khác như “Pen” hoặc “Pencil” (Shift + P), cũng như công cụ “Text” và “Comment”. Illustrator, mặc dù là một giải pháp thay thế tương đối tốt, đã không có bất kỳ thay đổi nào đối với hệ thống symbol của nó trong nhiều năm. Bài viết này sẽ tiếp tục được cập nhật nhằm mang đến những thông tin bổ ích.

Tất cả thành viên đều có thể truy cập vào file để xem trạng thái thiết kế hiện tại theo thời gian thực. Một khi Figma team library được tạo, các thành viên trong team ngay lập tức có thể truy cập, xem và tái sử dụng các component này trong các dự án khác nhau. Mặc dù Adobe XD đang ngày càng được cải tiến một cách nhanh chóng, nhưng về tổng thể thì nó vẫn còn chưa mượt mà để làm việc trên đó. Rất nhiều công cụ còn chưa hoàn thiện và thiếu nhiều tính năng.

E Paste Ảnh Trực Tiếp Vào Shape

Hiện tại chức năng này của Figma có hạn chế cho người dùng miễn phí. Bạn chỉ có thể xem lại lịch sử sửa file trong 30 ngày gần nhất. Tuy nhiên nó cũng giúp ích dù ít dù nhiều cho công việc design của bạn.

Nếu Photoshop chỉ được cho phép phong cách thiết kế trên một khung hình thì Figma lại được cho phép phong cách thiết kế nhiều màn hình hiển thị trên một khung hình. Nghĩa là, trên cùng một khung hình, bạn hoàn toàn có thể phong cách thiết kế nhiều Layout cho một mẫu sản phẩm . Figma hỗ trợ xuất bản theo các định dạng PNG, JPG, SVG và PDF.

Khi sử dụng Figma trên trình duyệt, việc xuất khẩu sẽ tự động được lưu trữ vào thư mục Download mặc định. Bạn có thể sử dụng ứng dụng Figma trên desktop để có thể lựa chọn thư mục lưu trữ. Các thực thể (thể hiện của component), chính là các bản sao của component được chúng ta sử dụng thực tế trong thiết kế. Các thực thể được liên kết tới Component chính, do đó bất kỳ thay đổi nào ở Component chính sẽ được áp vào cho thực thể. Chỉ mới vài tuần kể từ ngày đầu tiên tôi đến Flo, mặc dù có cảm giác như tôi đã ở đây một thời gian rồi!

Đó là hãy sử dụng từng page riêng khi muốn sửa đổi file design. Mỗi khi muốn xem lại version bất kỳ, chuyển sang trang thích hơp và mọi thứ đã sẵn sàng. Mặc dù không thể tiện lợi bằng file versioning, nhưng cũng đã giảm thiêu việc thất thoát version trong quá trình design.

Mọi thứ có thể thay đổi trong vài năm tới, nhưng hiện tại Sketch và Figma vẫn là tiêu chuẩn vàng cho việc thiết kế giao diện người dùng. Figma prototype làm việc tương tự như các công cụ khác, kết nối frame này với frame khác tạo ra prototyp hoàn chỉnh cho design của bạn.Figma protoype có thể được chia sẻ như file design. Những người có link file Figma prototype đã được share có thể xem và trực tiếp comment, feedback được lưu lại trong panel và có thể track thông qua Slack. Developer cũng có thể xem workflow, gửi tin nhắn trực tiếp cho designer. Giống như hầu hết các công cụ chuyên dùng để thiết kế UI/UX, Figma là một phần mềm dễ học.

  • Giao diện đơn giản, thân thiện, cùng hàng loạt chức năng cũng một phần nào đó giúp bạn nhanh chóng nắm bắt và ứng dụng vào công việc.
  • Lỗi này thường xuất hiện ở các bạn mới học Figma, thông thường các bạn sẽ không dùng đến constraints.
  • Đó là những vấn đề mà bất kỳ một công ty nào cũng cần quan tâm, bài viết này sẽ cung cấp những thông tin chi tiết nhất.
  • Constraints cho phép gắn các thành phần trong thiết kế theo các cạnh của Frame cha chứa nó.
  • Với biểu tượng cỏ bốn lá hình vuông, Component đó là thành phần chính và bạn có thể nhân bản chúng thành nhiều phiên bản (với biểu tượng hình vuông rỗng).

Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn. Figma prototype làm việc tương tự như các công cụ khác, kết nối frame này với frame khác tạo ra prototype hoàn chỉnh cho design của bạn. App Figma không quá đòi hỏi cấu hình máy tính khoẻ, do đó đối với các bạn mới bắt đầu học hay các bạn Marketer sẽ dễ dàng chọn cho mình một thiết bị làm việc với chi phí phù hợp. Nó hỗ trợ lưu trữ dữ liệu đám mây rất dễ dàng, không cần sử dụng nhiều tài nguyên trên máy. Cho phép chế độ Feedback, Comment ngay trên chính từng dự án, từ đó giúp người thiết kế UI dễ dàng tìm thấy các gợi ý từ Project Manager, User,… giúp tiết kiệm nhiều thời gian và nhanh chóng. Ngoài ra bạn có thể khám phá kho tài nguyên thiết kế trên Community của Figma do cộng đồng đưa lên.

Chức năng này rất tiện khi bạn muốn biết ai đang làm việc trên file. Sau đó, bạn tạo Component theo hướng dẫn ở trên (Ctrl + Alt + K). Lúc này bạn sẽ thấy, các thành phần như Rectangle và Text được hợp lại thành 1 đối tượng duy nhất có tên “Component 1”. Với biểu tượng cỏ bốn lá hình vuông, Component đó là thành phần chính và bạn có thể nhân bản chúng thành nhiều phiên bản (với biểu tượng hình vuông rỗng).

J Chức Năng Figma Dành Cho Team Thuận Lợi Cho Việc Tạo Design System

Ví dụ thay vì chỉ có thể thực hiện 1 tương tác với một đối tượng, giờ đây bạn có thể thực hiện nhiều tương tác hơn. Cùng một hình ảnh, khi bạn quẹt sang phải màn hình sẽ tương tác khác, quẹt sang trái màn hình sẽ tương tác khác. Người viết bài cũng thấy rất bất ngờ với chức năng này và tự hỏi Figma có đang quá “tham” chức năng hay không khi mọi thứ một designer tưởng tượng ra đều được Figma lần lượt mang vào sản phẩm của mình.

Bên cạnh đó, bạn chỉ có thể áp dụng lưới bố cục cho 1 khung. Tạo ra giá trị cho cả doanh nghiệp và cho khách hàng của chúng tôi thông qua thiết kế. Bạn sẽ luôn có sẵn một thư viện hữu ích cho công việc thiết kế của mình. Lưu tên của tôi, email, và trang web trong trình duyệt này cho lần bình luận kế tiếp của tôi.

hướng dẫn sử dụng figma

Click vào biểu tượng “+” và bạn sẽ được hỏi cung cấp tên cho Style. Tạo các frame có kích thước định trước, ví dụ như kích thước iPhone X, bằng việc chọn trong thanh công cụ Properties ở bên góc phải. Đăng ký nhận bản tin Chia sẻ tài khoản, tài nguyên số premium Miễn phí & Cập nhật các chương trình đăng ký ưu đãi. Mình sẽ dùng Crop để cắt hình cho phù hợp với khung màu xanh. Nếu bạn muốn hình vừa khít vào hình chữ nhật màu xanh thì chỉ cần di chuyển hình vào khung là được. Figma cung cấp đầy đủ tính năng ở menu bên tay phải để bạn chỉnh sửa chữ.

XD ra mắt ngày 18 tháng 10 năm 2017, là một công cụ design UI/UX chạy trên nền tảng macOS và Windows. XD có phiên bản dành cho iOS và Android dùng để preview design trực tiếp trên thiết bị di động. Cũng giống như Sketch và Figma, XD có giao diện thân thiện, đơn giản và dễ sử dụng. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Thay vì sử dụng các công cụ của bên thứ ba, developer có thể inspect đối tượng ngay trên file trong lúc xem thiết kế.

Bạn có thể thay đổi các yếu tố ở Main Component và điều này sẽ làm các Instance của chúng thay đổi theo. Tuy nhiên, việc thay đổi bất kỳ Instance nào thì sẽ không ảnh hưởng đến Main Component. Giờ chúng ta sẽ thử chọn thiết kế giao diện cho iPhone 11 Pro Max nhé! Để di chuyển, bạn có thể chọn “Move”, hoặc nhanh gọn hơn, nhấn phím “V”! Bạn có thể tạo nhiều Frame cùng một lúc và di chuyển sang các vị trí thích hợp.

Lịch Sử Thiết Kế: Những Khoảnh Khắc Quan Trọng Bạn Nên Biết

Vì so với 1-2 năm trước, các tool trên cũng đã có những thay đổi đang kể, nếu không cập nhật thường xuyên, bạn sẽ dễ bỏ sót các chức năng mới. Khác với các công cụ trước đây, Figma là một công cụ design trên nền tảng đám mây (cloud-based). Figma có tính năng tương tự như Sketch, tuy nhiên hỗ trợ làm việc nhóm tốt hơn (vì là cloud-based).

  • Chúng tôi có 16 triệu người dùng hầu hết hài lòng với sản phẩm của chúng tôi, nhưng một số không hài lòng vì quá trình đăng ký của chúng tôi.
  • Cách đơn giản nhất là bấm phím ⌘ trong khi thay đổi kích thước của frame.
  • Đó là hãy sử dụng từng page riêng khi muốn sửa đổi file design.
  • Người viết bài cũng thấy rất bất ngờ với chức năng này và tự hỏi Figma có đang quá “tham” chức năng hay không khi mọi thứ một designer tưởng tượng ra đều được Figma lần lượt mang vào sản phẩm của mình.

Chính vì vậy, bạn có thể làm việc trên máy tính khác, mọi lúc mọi nơi mà không cần phải mang theo File Design. Tạo frame từ các thành phần đang có bằng cách chọn các thành phần đang có rồi nhấn chuột phải và chọn vào Frame Selection trên menu chuột phải. Blog chia sẻ kiến thức công nghệ và trải nghiệm tài nguyên số. Nếu bạn cần, hãy nhanh tay đăng ký trước khi link đăng ký ưu đãi miễn phí hết hạn bạn nhé. Ngoài ra bên góc phải, bạn cũng có thể điều chỉnh 3 thông số mình tô màu vàng để ra được hình bạn mong muốn.

Bạn Có Đang Sử Dụng Figma Sai Cách?

Cách đơn giản nhất là bấm phím ⌘ trong khi thay đổi kích thước của frame. Components cho phép tái sử dụng lại các phần đã tồn tại trong thiết kế, giúp giảm thời gian ở những thiết kế và công việc lặp lại. Các components tạo ra thực thể mới thay vì tạo ra bản sao, điều này cho phép ghi đè các thuộc tính trực tiếp trên canvas. Có một tip nhỏ nếu bạn không thích sử dụng tính năng này nhưng vẫn muốn lưu lại nhiều version cho file design.

Do đó người viết vẫn tạm thời vẫn trung thành với các chuyển động căn bản trong Figma. Dưới đây mình sẽ cập nhật và chia sẻ đăng ký miễn phí sử dụng các khóa học hay về Figma. Sau khi đăng ký bạn có thể truy cập sử dụng khóa học này vĩnh viễn.

  • Mình sẽ hướng dẫn các bạn thiết kế 1 banner đơn giản cho dịp Giáng Sinh nha.
  • File version có thể được lưu thủ công hoặc tự độngCác file version được lưu lại có thể được khôi phục dựa theo ý muôn của designer và không ảnh hướng đến file gốc.
  • Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích.
  • Tạo frame từ các thành phần đang có bằng cách chọn các thành phần đang có rồi nhấn chuột phải và chọn vào Frame Selection trên menu chuột phải.
  • Ví dụ với các design system lấy 8px làm khoảng cách chuẩn, bạn có thể set Big nudge thành 8 để khoảng cách giữa các đối tượng luôn là bội của 8, tăng tính đồng bộ cho thiết kế.

Tuy nhiên, sử dụng Figma trên trình duyệt sẽ thuận tiện hơn khá nhiều so với dùng trên App. Trước khi bạn và đồng đội bắt tay vào việc thiết kế bất kỳ sản phẩm nào, bạn sẽ cần dùng đến FigJam. Xây dựng, giao tiếp và biểu đạt là những phương tiện mà Nhân loại đã phát triển để tiến hóa và phát triển với tư cách cá nhân và sau này là xã hội. Bằng cách nhìn vào lịch sử thiết kế, chúng tôi biết nó đã được thực hiện như thế nào.

Figma Là Gì? Làm Thế Nào Để Cài Đặt Và Sử Dụng Figma?

Bạn có thể nhấp trực tiếp vào công cụ Frame trên Thanh Công cụ, hoặc để tỏ ra nguy hiểm hơn, ấn ngay phím “F”!! Sau khi chọn, danh sách các mẫu kích thước sẽ được hiện ra bên phía phải màn hình. Smart animate tự động bổ sung transition vào các object giống nhau giữa hai frame. Bạn cũng có thể kết hợp Smart animate với các loại transition khác như Push, Move hoặc Slide để tạo nên các animation ấn tượng hơn. Đây là một chức năng hay, nhưng theo cá nhân người viết thấy, chức năng này chỉ thích hợp khi bạn làm các micro interaction, nếu áp dụng vào các trang lớn, bạn sẽ bị rối. Do mỗi interaction đơn giản bạn cũng cần phải làm hai, ba screen.

Figma là ứng dụng chạy trên nền web và có cả phiên bản cài đặt trên MacOs lẫn Windows. Có nghĩa là bạn có thể thiết kế bất cứ đâu bằng bất kỳ thiết bị nào thậm chí không cần cài đặt phần mềm. Nếu đòi hỏi nhiều tính năng cao cấp hơn, bạn có thể đăng kí sử dụng phiên bản trả phí. Đặc biệt với tính năng phân loại các component thành Variant sẽ giúp bạn dễ dàng quản lý và chọn lựa các component khi sử dụng. Nếu bạn muốn cài đặt Figma trên máy để phần mềm hoạt động hiệu quả hơn so với việc chạy trực tiếp trên trình duyệt thì Figma cũng hỗ trợ đầy đủ cho cả Windows lẫn Mac.

Nay có chút thời gian, tôi xin phép chia sẻ lại những kiến thức đó cho mọi người. Khả năng tương thích cao, có thể truy cập Figma trên mọi hệ điều hành, chỉ cần bạn có trình duyệt web là có thể sử dụng Figma. Các Interaction cũng sẽ thay đổi để phù hợp với thiết bị di động, do thao tác trên thiết bị di động chủ yếu là “chạm”. Design system dần trở thành một phần thiết yếu cho nhiều công ty. Design system sử dụng các component (trong Sketch và Illustrator gọi là symbol) được tái sử dụng trong nhiều ngữ cảnh khác nhau. Các component này được tập hợp lại thành một thư viện sử dụng cho cả UI/UX designer và front-end developer.

Mặc dù thế, nếu bạn muốn các thông số phức tạp hơn, bạn vẫn có thể sử dụng Zeplin. Figma là một công cụ để thiết lập giao diện Web / Ứng dụng được sử dụng hoàn toàn trong trình duyệt mà không cần bất kỳ chức năng tải xuống nào. Ngoài ra, Figma cũng có thể lưu trữ dữ liệu trong một hệ thống đám mây rất đơn giản. Đây là một ứng dụng cực kỳ phù hợp cho những ai mới bắt đầu làm UX / UI Designers mà không cần sử dụng thêm bất kỳ phần mềm phức tạp nào. Mọi người vẫn có thể vào xem thiết kế và comment đồng thời với bạn. Với một số cập nhật mới đây (tháng 8/2020) chức năng prototype của Figma lại ngày càng được nâng cao.

Đón chờ những bài viết nâng cao hơn về Figma trong thời gian sắp tới nhé. Xây dựng từ Forem — một mã nguồn mở được ứng dụng cho DEV và các cộng đồng khác. Khi cần nhóm các layer lại với nhau, bạn click chọn những layer cần nhóm và chọn Ctrl + G.

Cho phép nhiều người cùng phong cách thiết kế trên một Project. Khi đó, mỗi người sẽ sử dụng máy tính riêng và cùng join vào Project trên Figma . Đầu tiên cần chọn các thành phần trên thiết kế muốn xuất khẩu.

  • Chỉ mới vài tuần kể từ ngày đầu tiên tôi đến Flo, mặc dù có cảm giác như tôi đã ở đây một thời gian rồi!
  • Bạn có thể sử dụng Figma trên trình duyệt Browser và ứng dụng Figma App.
  • Mẹo này rất thích hợp mỗi khi bạn cần gọi lên một plugin bất kỳ.

Nếu muốn chỉnh sửa kích thước, bạn chỉ cần thay đổi W và H ở góc bên phải. Trước hết mình sẽ tạo thiết kế mới – “New design file” và sau đó sẽ minh họa các thao tác sử dụng cơ bản của Figma. Bạn có thể sử dụng Figma trên trình duyệt Browser và ứng dụng Figma App.

Khi chuyển sang làm prototype cho trang khác, chỉ cần áp dụng template vừa tạo vào trang đó là xong. Điều kiện đầu tiên để tạo được prototype trên Figma thì tất cả các màn hình bạn muốn tạo prototype để liên kết chúng với nhau phải nằm trên 1 page. Nếu bạn chọn nhiều layer một lúc, bạn cũng có thể đổi tên của chúng một lượt mà không cần phải đổi tên từng layer. Nếu bạn muốn gõ các lệnh trong Figma thay vì click vào menu, bạn có thể search bằng tổ hợp phím ⌘ + /. Mẹo này rất thích hợp mỗi khi bạn cần gọi lên một plugin bất kỳ.

Ví dụ, nếu bạn muốn thay đổi font chữ, bạn có thể chọn tất cả các object có cùng font cũ, sau đó thay đổi sang font mới. Bạn có thể paste ảnh trực tiếp từ clip vào shape một cách dễ dàng. Nếu bạn mở file SVG trong text editor hoặc browser, bạn có thể copy và paste code này trực tiếp vào Figma thay vì download file đó xuống rồi lại upload lên. Nếu bạn tối ưu file SVG trên một số công cụ online như SVGOMG, sẽ có lựa chọn để bạn có thể copy code này vào clipboard. Sắp xếp các block khác nhau theo chiều dọc trên thiết kế mobile. Với thiết kế mobile, mỗi lần chỉnh sửa một block, ta đều phải chỉnh lại khoảng cách theo chiều dọc.

Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt.

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất.

Nếu chưa quen dùng constraints thì sẽ thấy công cụ này chưa thực sự hữu ích. Nhưng đối với các bạn quen dùng sẽ thấy nó thực sự rất hiệu quả. Vì Constraints sẽ set up các layer một các có hệ thống, vị trí của layer sẽ được cố định theo mong muốn của người thiết lập. Với Figma Mirror, bạn có thể xem trực tiếp thiết kế của mình trên điện thoại hay tablet để trải nghiệm thử trong khi thiết kế. Thứ 2 đó là Destination để lựa chọn màn hình hiển thị tiếp theo sau khi con trỏ chuột tác động lên đối tượng đã chọn.

Ví dụ với các design system lấy 8px làm khoảng cách chuẩn, bạn có thể set Big nudge thành 8 để khoảng cách giữa các đối tượng luôn là bội của 8, tăng tính đồng bộ cho thiết kế. Symbol (trên Figma gọi là components) giúp công việc design trở nên đơn giản và nhẹ nhàng hơn. Bạn không còn cần phải chỉnh sửa qua lại hàng tá component giống nhau như trước đây nữa.

Hãy luyện tập thường xuyên để tạo được màu bạn yêu thích nha. Ở trường, ở cơ quan, từ bạn bè và đồng nghiệp, và thậm chí từ ứng dụng đang chạy trên đồng hồ thông minh của bạn cho bạn biết rằng bạn đang làm rất tốt. Với một chút điều chỉnh, bạn có thể hiển thị đúng hình ảnh của mình trong khung hình. Khắc phục được những lỗi trên đây, mình tin rằng các bạn sẽ ngày càng tiến bộ và nâng cao được trình độ của mình khi làm việc với Figma.

Nếu Photoshop chỉ cho phép thiết kế trên một khung hình thì Figma lại cho phép thiết kế nhiều màn hình trên một khung hình. Nghĩa là, trên cùng một khung hình, bạn có thể thiết kế nhiều Layout cho một sản phẩm. Để thêm, xem hoặc trả lời cho comment, bạn sẽ cần vào chế độ Comment bằng việc click vào biểu tượng Comment trên thanh toolbar.

Tạo frame có kích thước tùy chỉnh bằng cách chọn vào biểu tượng frame trên thanh công cụ (hoặc sử dụng phím tắt F) rồi di chuột vẽ vùng tùy ý. Ví dụ cho thấy Figma giúp giảm đáng kể việc sử dụng nhiều phần mềm chuyên dụng và đơn giản quy trình thiết kế. Lúc mới học UX/UI Design tôi thường làm theo kỹ năng vốn có của Graphic Designer, sau đó tôi mới biết mình đã chưa tận dụng được Figma một cách triệt để. Phải thông qua video chỉ dẫn mà tôi vô tình coi được trên youtube mới phát hiện ra được điều này.

Trả lời 0

Your email address will not be published. Required fields are marked *