khi chuyển thông qua doanh nghiệp mới, mình cũng thay luôn công cụ design. Ở Công ty cũ, mình chủ đạo sử dụng các sản phẩm của Adobe. Phác thảo website hay app cũng chỉ quay qua ghi lại Photoshop và Illustrator (thời điểm như thế XD của Adobe vẫn còn thiếu rất nhiều tính năng). Trong một số tác vụ cá nhân, mình cũng có sử dụng Sketch, tuy vậy vẫn chỉ dừng lại ở việc khám phá và thực hành là nhiều, không sử dụng trực tiếp vào công việc thường ngày. Lúc thông qua team thế hệ, bất cứ ai sử dụng Figma và mình cũng chuyển qua sử dụng khí cụ này luôn. Sau khoảng hơn 1 năm sử dụng, mình thấy đây là một quyết định đúng mực.
Mục lục
I. Tại sao mình lại chọn Figma làm công cụ thiết kế UI
Thật ra câu hỏi nên là ngược lại mới đúng. Tại sao lại không sử dụng Figma. Cá nhân mình thấy đây là 1 công cụ dễ học. Nếu you đã quen cùng Sketch hay Illustrator, bạn sẽ chỉ mất khoảng vài ngày để làm quen và khoảng hơn một tuần để thành thục các khí cụ trong này. Lúc đầu, mình chỉ áp dụng Figma cho các công việc trên Công ty, song bởi tính nhanh gọn và dễ chơi, mình cũng triển khai Figma trong 1 số công việc cá nhân khác. Và không những ứng dụng cho UI design, đôi lúc mình còn sử dụng Figma cho việc dàn trang project để đưa lên Behance, tạo nhanh các quảng cáo trên Facebook hay xử lý 1 số icon vector đơn giản…
Khóa học figma của team TELOS. Các kiến thức rất căn bản và nền tảng
II. Review sơ lược về Figma
Figma ra mắt năm 2016, Kỷ niệm đó, Figma đã gây quỹ được khoản tiền 14 triệu USD. Với giao diện thân thiết và dễ áp dụng, Figma nhanh chóng nổi lên như là 1 khí cụ design UI phổ biến trong số đông công nghệ toàn cầu. 1 Số brand lớn thực hiện Figma cho tới khoảnh khắc hiện tại gồm có: Twitter, Microsolf, GitHub và Dropbox.
Khác với các khí cụ trước đây, Figma là 1 khí cụ thiết kế trên nền tảng đám mây (cloud-based). Figma có vai trò gần giống như là Sketch, tuy thế cung cấp làm việc nhóm tốt hơn (vì là cloud-based). Dưới đây mình sẽ điểm thông qua một số tính năng quan trọng của Figma để bất cứ ai có cái nhìn rõ hơn về khí cụ này.
Figma có giao diện giống hệt cùng Sketch, giúp người dùng dễ ợt làm quen và sử dụng một cách mau lẹ
1. Tính tương thích
Figma hoạt động tương thích trên mọi điều các hệ điều hành có trình duyệt web, từ Macs, Windows, Linux đến Chromebooks đều có thể sử dụng Figma. Đây là khí cụ lên ý tưởng duy nhất có thể làm được điều đó. Mỗi người đều có thể chia sẻ, mở và chỉnh sửa 1 file Figma dễ dãi dù đang sử dụng hệ máy nào.
Trong nhiều doanh nghiệp, designer phổ biến Macs khi đó developer lại sử dụng Windows. Figma giúp hai bên có thể hợp tác được dễ ợt hơn. Figma cũng giảm thiểu việc chuyển qua lại các file image hay pdf giữa team thiết kế, account và đối tác. Bây giờ tất cả mọi thứ đều trở nên dễ dàng hơn chỉ với một đường link.
Riêng cùng phiên bản thân mình, trước đây mình đã phải mua thêm máy Mac chỉ để thực hiện Sketch. Và mỗi lúc chuyển file lên ý tưởng, mình phải cân nhắc xem người nhận đang dùng hệ điều hành nào để gửi loại file thích hợp. Giờ khi dùng Figma, mình đã không cần phải lo tới điều ấy.
2. Hỗ trợ tiến hành nhóm kết quả
Figma là một dụng cụ browser-based, chính vì thế bất cứ ai trong team có thể tiến hành cùng nhau gần giống như là làm việc trong Google Docs. Với mỗi thành phần đang xem hoặc chỉnh sửa file, Figma đại diện bằng 1 avatar tròn trên thanh khí cụ với tên riêng. Click vào avatar này you sẽ được thấy thành phần như thế đang nhìn phần nào trên design. Vai trò này rất tiện lúc you muốn biết ai đang thi công trên file.
Click vào avatar để biết đồng nghiệp của you đang nhìn phần nào trên page
tiến hành nhóm loại thời điểm thực như vậy giúp phác thảo leader nhanh chóng nắm bắt được tình hình dự án và đưa ra những quyết định sửa đổi nếu có sai sót. Người dùng của Sketch không thể có những hỗ trợ gấp rút do vậy.
một số designer nhiều lúc sẽ không quen cùng kiểu tiến hành khi nào cũng bị người khác “nhòm ngó” như vậy.. Thế nhưng hầu hết sẽ quen sau một thời gian sử dụng thử và được giải thích các lợi ích từ. Một số dị kì không thích thấy trỏ chuột của designer khác trên màn hình làm việc của mình, Figma cũng có 1 giải pháp cho chuyện này. You có thể vào View -> Show Multiplayer Cursors, con trỏ chuột của người khác sẽ ẩn đi khi có nhiều hơn 1 người đang xem file.
3. Đưa ra file đơn giản
một lúc bạn chia sẻ file Figma qua việc gửi link cho người khác, người nhận link sẽ có khả năng truy cập vào file như thế. Nếu bạn lựa chọn Link lớn selected frame người nhận sẽ nhìn thấy đúng mực frame you đang chọn khi nói file. Mình rất lôi cuốn sử dụng vai trò tiện dụng này lúc nói một file phức hợp, có quá nhiều frame nằm trong 1 page.
Figma nói project, file, page và frame với tất cả mọi người có quyền truy cập vào qua link
4. Hỗ trợ feedback dễ ợt
Figma hỗ trợ bình luận ngay trong app, cả trong chế độ design và prototyping. Ngoài điều đó comment còn có thể được theo dõi thông qua Slack hoặc email. Nếu bạn đã từng áp dụng các dụng cụ như Sketch kết hợp cùng Invision, Marvel, bạn sẽ thấy việc update lên ý tưởng sau mỗi đợt feedback cũng ngốn của you không ít thời điểm. Cùng chức năng comment ngay trong file phác thảo, Figma đã giải quyết được vấn đề trên một cách nhẹ nhàng.
Người dùng có thể vừa xem file, vừa nhận xét ngay trong cùng một màn hình cùng Figma
Trong các cuộc họp, thậm chí thiết kế team có thể bàn thảo design trên màn hình to, ghi chú lại các comment và sửa file ngay lập tức, mọi điều chỉ với Figma. Dạng live-feedback này không có trong Sketch – vốn cần phải upload mọi điều lên cloud.
5. Dụng cụ nhưng các developer yêu mến
Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Thay bởi vì triển khai các dụ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ế. Mặc dầu thế, nếu bạn muốn các thông số tinh vi hơn, bạn vẫn có thể triển khai Zeplin. Figma đã cung cấp Zeplin rất tốt cho tới Kỷ niệm hiện tại.
Developer có thể lấy các thông số để code ngay trong file Figma
6. Tất cả mọi thứ đều được bảo quản trực tuyến
mọi điều mọi thứ của you đề đã được lưu trữ trên cloud. Bạn sẽ không sợ mất file, hỏng máy hay hàng tá các vấn đề trời ơi đất hỡi khác. Bạn có thể sắp xếp file theo project, mỗi file lại được chia ra làm rất nhiều page tùy theo nhu cầu của bạn.
Quản lý file lên ý tưởng cùng Figma
7. Plugin
lúc chuyển sang Figma, điều băn khoăn nhất của mình là plugin. Kho plugin của Sketch quá phong phú. Mỗi khi có một nhu cầu nào như thế mình đều có thể tìm thấy đúng plugin cần thiết. Giai đoạn 2018, Figma vẫn chưa hỗ trợ plugin, đây là 1 điểm yếu lớn.
thế nhưng tới khoảng giữa năm 2019, Figma cuối cùng cũng đã tung ra kho plugin của riêng mình. Và quá bất ngờ là chỉ trong những ngày trước tiên ra mắt, mình đã thấy kho plugin này quá hoàn toản.
Kho plugin của Figma đa dạng và vẫn lại tiếp tục được cập nhật
Có một điểm khác lạ giữa plugin sử dụng trên Sketch và Figma: áp dụng plugin trên Figma thì ít lỗi hơn. Cũng có thể mình ngày xưa mình dùng Sketch crack nên hay bị lỗi. Dù là gì thì thưởng thức plugin trên Figma cũng là 1 trải nghiệm hoàn hảo. Thật tuyệt khi thấy mọi điều được cải tiến và trở nên nhanh chóng lẫn tiện lợi hơn.
8. File versioning
Figma tích hợp sẵn tính năng file versioning. Chức năng này được phép you ghi nhớ trang thái của file thiết kế bất cứ lúc nào. Bạn, hoặc các thành phần trong team thiết kế có thể hồn nhiên sửa đổi mà không lo ngại về việc tracking các version.
Hiện tại chức năng này của Figma có hạn chế cho người dùng không tính tiền. You chỉ có thể xem lại lịch sử sửa file trong 30 ngày gần nhất. Tuy thế nó cũng giúp ích cho dù ít dù rất nhiều cho công việc design của bạn.
Có một tip nhỏ tuổi nếu bạn không thích áp dụng tính năng này nhưng vẫn muốn Gìn giữ nhiều version cho file design. Đó là hãy thực hiện từng page riêng khi muốn sửa đổi file thiết kế. Mỗi khi muốn xem lại version bất cứ, chuyển sang trang thích hơp và mọi điều đã sẵn sàng. Mặc dầu không thể dễ ợt bằng file versioning, nhưng cũng đã giảm thiêu việc thất thoát version trong quá trình design. Tiện hơn là mọi thứ lại chỉ nằm trong một file duy nhất.
File version có thể được lưu thủ công hoặc tự động
Các file version được Giữ gìn có thể được khôi phục dựa theo ý muôn của designer và không ảnh hướng tới file gốc. File khôi phục có thể được ghi đè lên file gốc hoặc duplicate để hình thành file mới.
9. Prototype tích hợp sẵn
dụng cụ prototype của Figma được tích hợp trước cả Sketch. Cùng Figma, you không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel, you cũng không cần phải export ra file hình để chuyển cho các bộ phận liên quan như trước đây.
Figma prototype thi công gần giống như các khí cụ khác, kết nối frame này với frame khác tạo ra prototyp hoàn chỉnh cho thiết kế của you
Figma protoype có thể được chia sẻ như là file design. Những người có link file Figma prototype đã được share có thể xem và trực tiếp comment, feedback được Gìn giữ trong panel và có thể track qua Slack. Developer cũng có thể xem workflow, gửi tin nhắn trực tiếp cho designer.
10. Tính năng Figma dành cho Team thuận lợi cho việc tạo thiết kế System
design system dần trở thành một phần thiết yếu cho nhiều doanh nghiệp. Phác thảo system sử dụng các component (trong Sketch và Illustrator gọi là symbol) được tái áp dụng trong nhiều ngữ cảnh không giống nhau. Các component này được tập hợp lại thành 1 thư viện áp dụng cho cả UI/UX designer và front-end developer.
Figma team library cho phép/ hoặc không được phép truy cập vào các components và style
1 lúc Figma team library được tạo, các thành phầ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ông giống nhau. Để ý là các component này sẽ tự động cập nhật trên mọi thứ các file một lúc có thay đổi từ người tạo.
tổ chức các component trong Figma rất dễ chơi và linh hoạt bằng việc áp dụng file và frame.
Cách cơ quan component trong Figma team library rất dễ chơi. Designer có thể tạo một file riêng cho việc chứa các component, hoặc thực hiện các component sẵn có trên file phác thảo. Mỗi frame trong page Figma được hiểu là 1 section trong library, như vậy bạn không cần phải đặt tên cho component dạng AA.aA.a.1…
Figma là một công cụ lên ý tưởng cung cấp rất tốt cho việc teamwork. Đây cũng là 1 dụng cụ dễ chơi, dễ triển khai và ngắn gọn so với các ứng dụng với loại. Để rõ hơn, chúng ta sẽ đi tới phần đánh giá chi tiết Figam qua việc so sánh nó với Sketch và Adobe XD – hai phần mềm được bình chọn cao trong Hồi tưởng hiện tại.
III. So sánh Figma với Sketch, Adobe XD
1. Giới thiệu sơ lược về 2 phần mềm Sketch và Adobe XD
Sketch là một vector graphics editor, kích thích bởi doanh nghiệp Bohemian Coding. Sketch được phát triển và ngày 7 tháng 9 năm 2010 cho macOS. Đây là phần mềm đoạt giải Apple phác thảo Award năm 2012. Điểm đặc biệt giữa Sketch và các vector graphics editor khác là Sketch không hỗ trợ tính năng in ấn. Sketch chỉ có trên macOS. Điểm yếu này có thể được cung cấp phần nào nhờ ứng dụng của bên thứ 3 và các khí cụ handofff.
Vào khoảnh khắc sinh ra ban đầu, Sketch nổi lên như 1 hiện tượng trong tập thể phác thảo. Tuy thế ngay sau đó, Figma và Adobe XD ra mắt và mau lẹ là đối thủ cạnh tranh đáng gờm cùng các dụng cụ như prototyping hay tiến hành trực tuyến trực tiếp trên browser.
Adobe XD tăng trưởng do Adobe Inc. XD ra mắt ngày 18 tháng 10 năm 2017, là một khí cụ design UI/UX chạy trên nền tảng macOS và Windows. XD có bản dành cho iOS và Android dùng để preview lên ý tưởng trực tiếp trên thiết bị điện thoại. XD còn hỗ trợ thêm chức năng wireframe và prototyping. Cũng giống như là Sketch và Figma, XD có giao diện thân mật, đơn giản và dễ triển khai.
2. Giá bán
giá thành là vấn đề to cho các freelancer lẫn những you làm việc trong Công ty. Cả ba ứng dụng đều có các discount dành cho các license giáo dục hoặc theo đợt, nên nếu muốn sắm cho mình license xịn, you nên cần mẫn tìm kiếm nhé.
- Figma: miễn phí đối cùng người sử dụng cá nhân. Bạn có thể tạo 3 project free hoặc tăng cấp lên tài khoản premium 12 USD/ tháng.
- Sketch: 99 USD dùng trọn đời và được upgrade lên version kế tiếp. Nghĩa là nếu bạn mua bản version 9.0 thì có tăng cấp lên 10.0. Mà tới phiên bản 11.0, nếu muốn dùng, you phải mua tiếp.
- Adobe XD: có cả bạn dạng tính phí và không tính phí tùy thuộc you là người sử dụng cá nhân hay team. Bạn dạng tính phí có giá từ 9.99 USD/ tháng
3. Nền tảng hệ điều hành
dù rằng Sketch là khí cụ rất nhiều người biết đến, song bạn bắt buộc phải thực hiện Mac để có thể đọc được file, điều đó gây trở ngại cho developer vốn chủ yếu dùng máy Windows.
- Figma: Chạy trực tiếp trên browser. Có app trên cả Windows và Mac. Tuy vậy không dùng offline được.
- Sketch: chỉ có trên máy Mac
- Adobe XD: Mac và Windows
4. Hỗ trợ làm việc nhóm
Google Docs từng biểu hiện sự nổi bật của mình so với các dụng cụ Office của Microsoft nhờ vào vai trò live-collaboration. Và đến nay, Figma cũng làm điều gần giống khi được phép người sử dụng kỹ năng tiến hành online trực tiếp trên trình duyệt.
- Figma: cung cấp live-collaboration rât mượt nhưng, dù bạn có đang dùng máy Mac, Windows hay thậm chí là Linux.
- Sketch: không hỗ trợ live-collaboration, thế nhưng bạn có thể làm được việc này bằng plugin Picnic. Ngoài điều đó Sketch còn có thêm tính năng Sketch for Teams.
- Adobe XD: Tại event Adobe MAX 2019, Adobe đã ra mắt vai trò real-time Coediting.
5. Hỗ trợ cho lập trình viên
Các app được thiết kế riêng cho lên ý tưởng UI mới qua được tích hợp sẵn các công cụ spec (kích thước, màu sắc, khoảng cách) dành cho developer.
- Figma: hỗ trợ lấy code CSS, iOS, Android ngay trong panel bên phải hội nghị.
- Sketch: có dụng cụ hỗ trợ handoff riêng, tên là Cloud Inspector. Thậm chí Sketch còn có cả 1 dụng cụ free thay thế là Sketch measure. Link: https://github.com/utom/sketch-measure
- Adobe XD: tự động tạo CSS code snippet qua link
6. Làm việc ngoại tuyến
- Figma: không có hình thức tiến hành offline. Figma cũng không có kế hoạch thêm chức năng này vào app trong một tương lai gần.
- Sketch: có. Sketch từ khi phát hành đã là một app hoạt động offline.
- Adobe XD: có, gần giống Sketch.
7. Prototyping
- Figma: Figma có hỗ trợ Prototyping. Gần đây Figma đã bổ sung thêm chức năng Smart Animate gần giống như là Adobe XD. Figma cũng cung cấp Framer – một công cụ làm animation cho UI prototyping.
- Sketch: có cung cấp
- Adobe XD: có cung cấp. Adobe XD thậm chí còn cung cấp prototyping bằng giọng đưa ra và keyboard/gamepad.
8. Symbol
Symbol (trên Figma gọi là components) giúp công việc thiết kế trở nên đơn giản và nhẹ nhàng hơn. You không còn cần phải biên tập thông qua lại hàng tá component giống nhau như trước đây nữa. Các app lên ý tưởng UI bây giờ đều có hỗ trợ symbol.
- Figma: cung cấp symbol tích hợp cùng state, constraints, và override.
- Sketch: symbol trong Sketch rất cảm xúc và vẫn đang lại tiếp tục được tăng trưởng.
- Adobe XD: component có thể triển khai trong một file hoặc link thông qua các file khác biệt. XD cũng hộ trợ tạo rất nhiều bản khác biệt của component để cung cấp việc tạo interaction gọi là component states.
9. Kết luận
Nếu là cách đây khoảng 1-2 năm. Sketch có lẽ là chọn lựa tối ưu cho những ai làm UI design. Song cùng sự kích thích của các khí cụ như hiện này, chọn lựa của bạn có lẽ sẽ mở rộng ra hơn. Bạn hoàn toàn có thể thay thế Sketch bằng Figma hoặc Adobe XD.
với 1 ít tìm hiểu, you hoàn toàn có thể làm chủ được công cụ trong vòng trên dưới hai tuần. Thế nhưng bạn cũng cần liên tiếp cập nhật kiến thức. Bởi so cùng 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 thường xuyên, bạn sẽ dễ bỏ sót các vai trò thế hệ.
IV. Các cập nhật nổi bật mới đây của Figma
một. Auto Layout
Auto layout là một trong những chức năng hấp dẫn để Figma có thể bắt kịp Sketch. Auto layout giúp Figma có thể làm được những việc sau:
- Button có thể thay đổi kích cỡ kèm với text
- thay đổi thứ tự các item trong list
- Giúp hình thành UI có tài năng resize linh hoạt.
- bạn có thể convert component sẵn có thành Auto lauout từ option menu hoặc tổ hợp phím “Shift + A”
1 số trường bạn có thể áp dụng Auto Layout:
- Navigation (tưởng tượng đến mỗi lần you thêm hay bớt 1 mục xem, cùng auto layout, bạn sẽ tiết kiệm được 1 nửa thời điểm đó)
- Card tin tức cùng kích thướng co dãn theo nội dung
- sắp xếp các block khác biệt theo chiều dọc trên thiết kế mobile. Cùng phác thảo mobile, mỗi lần biên tập 1 block, ta đều phải chỉnh lại khoảng cách theo chiều dọc. Điều này sẽ thuận lợi hơn nếu ta sử dụng auto layout cho toàn cục các block thông tin của trang.
you có thể xem thêm trong video: Link
2. Smart Animate
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ể phối hợp Smart animate với các loại transition khác như là Push, Move hoặc Slide để hình thành các animation cảm xúc hơn. Đây là 1 vai trò hay, nhưng mà theo cá nhân người viết thấy, tính năng này chỉ thích hợp lúc you làm các micro interaction, nếu sử dụng vào các trang to, bạn sẽ bị rối. Do mỗi interaction dễ chơi you cũng cần phải làm hai, ba screen. Chính vì như vậy người viết vẫn tạm thời vẫn chung thủy cùng các chuyển động căn bản trong Figma.
you có thể xem thêm trong video: Link
3. Prototype nâng tầm trong Figma
Ngay từ những ngày trước tiên, vai trò prototype trong Figma đã là một điểm nhấn đáng xem xét. Nếu như là với Sketch, bạn chỉ có thể triển khai prototype với 1 công cụ khác như: Invision, Marvel, Flinto, Principle… thì với Figma, you có thể áp dụng điều này ngay trong ứng dụng.
với một số cập nhật gần đây (tháng 8/2020) vai trò prototype của Figma lại ngày càng được nâng cao. Ví dụ thay bởi chỉ có thể triển khai một tương tác với một đối tượng, giờ đây bạn có thể sử dụng rất nhiều tương tác hơn. Cùng một hình ảnh, lúc you 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 thần với chức năng này và tự hỏi Figma có đang quá “tham” vai trò hay không khi mọi điều một designer tưởng tượng ra đều được Figma lần lượt mang vào vật phẩm của mình.
thực hiện rất nhiều tương tác hơn chỉ với một đối tượng được chọn (cập nhật tháng 8/2020)
Thêm vào nữa, Figma cũng vừa ra công bố té sung Custom Eases vào tính năng Prototype. Nếu như trước đây you đã quá nhàm chán cùng việc biểu lộ những chuyển động đều đều hoặc muốn tự tay điều chỉnh biểu đồ chuyển động, Figma hiện đã có thể thỏa mãn được bạn.
Prototype trong Figma sẽ không còn những chuyển động đều đều chán ngắt…
cùng Custom Ease, you có thể áp dụng điều chỉnh các chuyển động trước đây chỉ có thể làm trong các khí cụ khác như là Principle hay Flinto.
Và như là mọi lần cập nhật tính năng mới, Figma đều có chỉ dẫn tỉ mỉ qua các tư liệu và document. Bàn hoàn toàn có thể học theo 1 cách dễ ợt.
Video chỉ dẫn về Custom Ease bạn có thể xem tại link
bài viết về Custom Ease you có thể xem tại link
V. 1 Số mẹo lúc sử dụng Figma
Figma cũng như các app lên ý tưởng UI khác, thay đổi rất nhanh, song song vào đó cũng có rất nhiều tips tricks tác dụng. Dưới đây là một trong số như thế
một. Thay đổi kích cỡ frame mà không bị tổn hại do constraint
với chức năng constraint, bạn có thể gắn đối tượng cố định vào bên quả, phải, ở giữa hoặc thay đổi kích thược theo frame chính. Constraint là một trong những tính năng tuyệt vời của Figma. Tuy vậy, đôi khi bạn sẽ muốn bỏ qua tính năng này. Cách dễ chơi nhất là bấm phím ⌘ trong khi thay đổi kích thước của frame.
Paste code SVG thay do kéo thả hay import
Nếu you 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 do download file như thế xuống rồi lại upload lên. Nếu bạn tối ưu file SVG trên một số khí cụ online như SVGOMG, sẽ có chọn lựa để you có thể copy code này vào clipboard.
2. Figma mirror
Có thể bạn không biết Figma có app tên là Figma Mirror trên iOS lẫn Android. App này được phép bạn prevew design ngay trên vũ trang dế yêu một cách nhanh chóng.
Thậm chí you cũng có thể dùng app này trực tiếp trên trình duyệt laptop tại link: https://www.figma.com/mirror
3. Điều chỉnh nudge mặc định
Nudge Amount là khoảng di chuyển lúc bạn bấm vào các nút điều hướng trên bàn phím để di chuyển đối tượng. Ví dụ với các design system lấy 8px làm khoảng cách chuẩn, you 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ế.
4. Paste ảnh trực tiếp vào shape
bạn có thể paste ảnh trực tiếp từ clip vào shape một cách dễ dàng. Đây là tính năng thế hệ thêm vào của Figma.
5. Đo khoảng cách
Giữ phím alt/option trong khi di chuột lên trên đối đượng khác sẽ cho you biết khoảng cách giữa hai đối tượng.
6. Tìm mọi thứ các lệnh trong Figma
Nếu you muốn gõ các lệnh trong Figma thay bởi vì click vào menu, you có thể search bằng tổ hợp phím ⌘ + /. Mẹo này rất thích hợp mỗi lúc you cần gọi lên 1 plugin bất cứ.
7. Chọn đối tượng có cùng thuộc tính
you có thể chọn các đối tượng có cùng thuộc tính fill, font hoặc text. You cũng có thể chọn mọi thứ các duplicate của một component. Ví dụ, nếu bạn muốn thay đổi font chữ, you có thể chọn mọi thứ các object có cùng font cũ, sau đó thay đổi sang font mới.
8. Phím tắt
triển khai phím tắt là 1 trong những cách nhanh nhất để tăng sản lượng làm việc. Và Figma có rất nhiều phím tắt như vậy. Bạn có thể quen cùng các phím như: o để vẽ hình oval, r để vẽ hình chữ nhật, l để vẽ được thẳng hoặc t để gõ một đoạn text.
Sau đây là một số tổ hợp phím hữu ích:
- F: vẽ frame
- Option + 1 hay 2: chuyển đổi thông qua lại giữa layer panel và library
- Option + 3: đến team library modal
- Option + 8/9/0: biến đổi thông qua lại giữa tab design/prototype/code
- Shift + x: biến đổi qua lại màu giữa fill và stroke
- I: pick màu
- Shift + v: flip theo chiều dọc
- Shift + h: flip theo chiều ngang
- ⌘ + option + k: tạo component
- ⌘ + option + b: bỏ link giữa component và đối tượng
Nếu you thích các emoji trong phác thảo và đang thực hiện mac, đây là tổ hợp phím tắt để gọi ra các emoji: ⌘ + control + space.
Nếu bạn muốn rất nhiều tổ hợp phím hơn nữa, bạn có thể bấm phím vào logo dấu hỏi phía dưới bên phải của giao diện Figma, chọn Keyboard Shortcut để xem list các tổ hợp phím tắt. Hoặc bạn cũng có thể sử dụng khí cụ Figma Ninja để học các phím tắt.
9. Đổi tên hàng loạt layer
Bấm tổ hợp phím ⌘ + r để đổi tên layer. Nếu bạn chọn rất nhiều layer một khi, you cũng có thể đổi tên của chúng 1 lượt nhưng không cần phải đổi tên từng layer.
VI. Kết
Giống như là hầu hết các dụng cụ chuyên dùng để design UI/UX, Figma là 1 phần mềm dễ học. Giao diện dễ chơi, thân mật, cùng hàng loạt vai trò cũng 1 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.
tuy thế, đây là một khí cụ vẫn tiếp tục được tăng trưởng hàng ngày. Bạn vẫn phải cấp nhật liên tiếp nếu không muốn bị bỏ lại phía sau. Với mình, chỉ trong vòng một năm, Figma đã có những cập nhật đáng kể (Auto layout, smart animate…) mà nếu không theo dõi thông thường xuyên, mình sẽ lờ đi và tiếp tục làm theo những flow cũ không mấy kết quả.
Team TELOS bọn mình đã phác thảo một khóa học để phần nào giúp bạn làm điều này. Nếu you là 1 người mới trong ngành hoặc mới tiếp xúc với Figma, khóa học này được design dành riêng cho you. Bạn có thể xem chương trình cũng như là thời gian gian mở màn tại link: https://TELOS.vn/course/khoa-hoc-thiet-ke-giao-dien-voi-figma/
bài giới thiệu này sẽ lại tiếp tục được cập nhật nhằm mang tới những nội dung có ích của TELOS. Hi vọng được gặp mặt lại mọi người trong các bài giới thiệu sau.
Các nguồn tổng hợp:
- Toptal
- Creative-tim
- Prototypr.io
—–
TELOS Agency – tư vấn nhận diện thương hiệu, tái định vị thương hiệu công hiệu
doanh nghiệp TNHH TELOS
Địa chỉ: 208 Nguyễn Hữu Cảnh, Phường 22, Quận Bình Thạnh, TP. Hồ Chí Minh
SĐT: 0919 1000 75 (Ms. Yến) hoặc 0949 165 064 (Mr. Nhân)
Email: [email protected]
