Trong thời đại ngày nay, có rất nhiều công cụ tuyệt vời có sẵn. Cuốn sổ tay này tập trung vào Figma. Nó sẽ hướng dẫn bạn qua toàn bộ giao diện Figma. Đồng thời, cung cấp hướng dẫn từng bước về cách bạn có thể sử dụng các tính năng do Figma cung cấp theo cách tốt nhất có thể.
Mục lục
Các công cụ thiết kế
Với sự sẵn có của rất nhiều công cụ thiết kế, thật dễ bị choáng ngợp khi chọn công cụ tốt nhất đáp ứng tất cả nhu cầu của chúng ta. Ở đây, tôi muốn đề cập rằng không có thứ gọi là “công cụ thiết kế tốt nhất“. Mỗi công cụ đều có bộ ưu điểm và tính năng riêng khiến nó nổi bật, nhưng chúng ta có thể dễ dàng tìm kiếm một công cụ phù hợp nhất với mình. Dưới đây là một số công cụ thiết kế tuyệt vời có sẵn cho chúng ta, như sau: Figma, Sketch, Adobe XD Framer, InVision Studio,…
Figma
Figma được gọi là công cụ thiết kế giao diện hợp tác. Và nó nổi bật nhờ tính năng hợp tác. Nó cho phép người dùng chia sẻ một tệp thiết kế với nhiều thành viên trong nhóm và nhận phản hồi tức thì từ nhau thông qua bình luận. Ngày nay, hầu hết các công cụ thiết kế khác cũng đã triển khai tính năng hợp tác, nhưng Figma là công cụ đầu tiên đưa tính năng này lên bàn.
Figma cũng cung cấp nhiều tài nguyên, plugin và kỹ thuật hữu ích giúp quy trình làm việc của bạn mượt mà hơn.
Tại sao sử dụng Figma?
Vào khoảng 2016, Figma ra mắt là công cụ thiết kế đầu tiên tận dụng sức mạnh và khả năng tiếp cận của Web đồng thời hứa hẹn các tính năng mạnh mẽ tương tự như bạn mong đợi từ một ứng dụng gốc. Họ đã khiến mọi người ngạc nhiên với tính năng hợp tác thời gian thực của mình. Các nhà thiết kế vô cùng phấn khích cuối cùng có thể chia sẻ thiết kế của họ với đồng nghiệp và khách hàng mà không gặp bất kỳ trở ngại nào, và xem nhiều con trỏ chuột vẽ hình cùng lúc. Nó giống như phép thuật.
Chúng ta đã đi một chặng đường dài kể từ đó. Figma đã đặt ra tiêu chuẩn ở mức cao nhất bằng cách liên tục cải tiến và triển khai các tính năng mới. Ngày nay, mọi thứ đều tồn tại trên Web và Figma tận dụng tối đa điều đó bằng cách kết hợp mọi thứ cho các nhà thiết kế và nhà phát triển.
Thiết kế ảnh Vector
Figma đã giới thiệu một cách mới mạnh mẽ để thiết kế vector. Thay vì kết nối các đường dẫn một đối một, bạn có thể tạo ra các kết nối giống như web, làm cho toàn bộ quá trình tạo hình trở nên linh hoạt hơn.
Styles
Trong Figma, hầu hết các yếu tố nền tảng được đặt trong Styles, bao gồm Colors (bao gồm gradient và hình ảnh), Text và thậm chí Effects. Bạn có thể làm cho chúng sẵn sàng sử dụng dưới dạng Library. Khi thiết kế, bạn có thể đặt các kiểu này trong Inspector, cho các thứ như Text, Fill, Stroke và Effects.
Components
Component là các khối xây dựng cho bất kỳ dự án thiết kế nào. Đây là tập hợp các yếu tố được kết hợp lại theo cách có thể tái sử dụng, chẳng hạn như buttons, forms, navigations, cards, cells, and overlays. Các yếu tố thành phần như nội dung văn bản, màu sắc và hình ảnh có thể được tùy chỉnh trong Inspector. Một Button Component có thể được nhân đôi nhiều lần, với nội dung và kiểu dáng khác nhau.
Ngoài ra, bạn có thể có Component trong Component, cho phép bạn tùy chỉnh ngay cả các nhóm yếu tố phức tạp nhất, như icons, states, and complex themes. Trong Figma, rất dễ dàng để thêm các yếu tố thiết kế khác nhau dưới dạng Component và xuất bản chúng dưới dạng tài sản thiết kế có thể tùy chỉnh.
Variant
Variant hoạt động hơi khác so với component vì chúng có hệ thống đặt tên khác nhau để tổ chức mọi thứ. Điều rất quan trọng cần nhớ là chỉ sử dụng biến thể khi cần thiết nếu không thì nên sử dụng components.
Tốt nhất nên sử dụng variant khi xử lý nhiều phiên bản của các component tương tự chia sẻ cùng một thuộc tính, chẳng hạn như state, size, color, etc. Ngoài ra, khi có hai biến thể khác biệt như bật/tắt chuyển đổi.
Team Library
Hãy tưởng tượng Abstract, Google Docs và Sketch trong một công cụ duy nhất. Hãy tưởng tượng một trải nghiệm thống nhất và mượt mà hơn. Đó là Figma. Team Library cho phép bạn chia sẻ components, styles and assets của mình trên toàn bộ Team. Bạn có thể bật, tắt các thư viện này bằng cách nhấp vào nút ON/OFF bất cứ khi nào bạn muốn.
UI Kits and Design Systems
Khi thảo luận về các bộ UI Kit và Design System hàng đầu cho Figma, điều quan trọng là phải xem xét cả độ phổ biến và chức năng của chúng. Mỗi bộ UI Kit và Design System đều cung cấp các tính năng độc đáo và đáp ứng các nhu cầu khác nhau trong quá trình thiết kế.
DesignCode UI: Đây là một bộ UI Kit toàn diện được biết đến với thiết kế sạch sẽ và hiện đại. Nó cung cấp một loạt các thành phần và đặc biệt phổ biến về tính dễ sử dụng và khả năng thích ứng. Nó rất phù hợp cho cả ứng dụng web và di động.
Apple Design Resources – iOS 17 and macOS Sonoma: Bộ này cung cấp một bộ sưu tập toàn diện các thành phần, bao gồm các mẫu cho Home Screen and Lock Screen widgets, tabbed apps, parent/child apps, split views, and sheets..
Uber Base Gallery: The Uber Base Gallery trong Figma có thể là một bộ sưu tập toàn diện các yếu tố thiết kế cơ bản tạo thành cốt lõi của ngôn ngữ thiết kế của Uber. Nó có thể bao gồm một loạt các thành phần UI cơ bản như buttons, icons, color palettes, typography, and form elements.
Microsoft Fluent 2 Web: Bộ UI Kit này trên Cộng đồng Figma dựa trên hệ thống thiết kế Fluent của Microsoft, được thiết kế cho các ứng dụng web.
Untitled UI – Figma UI Kit and Design System: Được biết đến là một bộ UI Kit tiên tiến cho Figma, Untitled UI được chế tác tỉ mỉ với các tính năng như Auto Layout, variables, smart variants, và khả năng truy cập WCAG.
Auto Layout
Auto layout là một tính năng cho phép bạn tạo các thiết kế có thể mở rộng để lấp đầy hoặc thu nhỏ để phù hợp và sắp xếp lại khi nội dung của chúng thay đổi. Điều này giúp thích ứng với những nhu cầu thay đổi của công việc của bạn và giúp đảm bảo rằng các thiết kế của bạn nhất quán trên các kích thước màn hình khác nhau mà chúng sẽ xuất hiện. Điều quan trọng là bạn biết về những điều này!
- Parents là khung chứa các yếu tố và đối tượng của thiết kế của bạn.
- Children là các yếu tố và đối tượng bên trong khung.
Parents
Parent có bốn thuộc tính. Hiểu các thuộc tính này là rất quan trọng. Nó sẽ giúp bạn hiểu cách bố cục của bạn hoạt động và giúp bạn triển khai Auto Layout theo cách tốt nhất!
- Direction: Cho phép bố cục thiết kế của bạn theo cột (Horizoltal) hoặc hàng (Vertical).
- Padding: Xác định khoảng trắng xung quanh các đối tượng của bạn (Children).
- Spacing: Điều khiển khoảng cách giữa các đối tượng của bạn.
- Resizing: Cho phép bạn có chiều rộng động hoặc cố định.
Children
Child layout có rất ít và ít thuộc tính phức tạp hơn so với Parent layout! Các thuộc tính này về cơ bản là các điều khiển căn chỉnh và định vị (dựa trên hướng của Parent).
- Alignment – căn chỉnh các đối tượng dọc theo một trục.
- Absolute position – dễ dàng định vị các mục trong khung bố cục tự động bằng cách sử dụng các điều khiển chính xác.
- Resizing – Cho phép bạn có chiều rộng động hoặc cố định.
Constraints
Constraints trong Figma giống như trong Sketch. Chúng cho phép bạn đặt khoảng cách từ vùng chứa parent. Nó cũng cho phép bạn thay đổi tỷ lệ hoặc căn chỉnh các yếu tố.
Real-Time Collaboration
Figma thực sự là Google docs của các công cụ thiết kế. Một khi bạn bắt đầu hợp tác với các nhà thiết kế, nhà phát triển và khách hàng cùng ngành thời gian thực trên một dự án thiết kế, bạn sẽ không bao giờ muốn quay lại. Bạn có thể chia sẻ thiết kế của mình với bất kỳ ai và họ có thể theo dõi tiến độ của bạn, bình luận và thậm chí tham gia khi bạn đưa pixel của mình vào cuộc sống.
Version Control
Trong Figma, mọi thứ bạn làm đều được tự động lưu trong lịch sử miễn phí. Bạn cũng có thể cam kết thủ công (Command + Option + S) các phiên bản để giữ mọi thứ theo một dòng thời gian gọn gàng. Bạn không cần phải suy nghĩ về nhánh vì sự hợp tác thời gian thực cho phép bạn đảm bảo rằng không ai đạp lên chân nhau. Thực sự là một sự giải tỏa khi không so sánh quá nhiều với Git vì Figma đã làm cho toàn bộ quá trình ít phức tạp hơn nhiều so với Git.
Live Embeds
Bạn có thể nhúng các Frames Figma của mình vào trang web của mình bằng cách lấy mã HTML của iFrames. Điều này cho phép bạn truy cập trực tiếp vào các thiết kế của mình.
Prototype
Prototype là một quá trình quan trọng của thiết kế. Tạo prototype giúp kỹ sư của bạn hiểu cách thức tương tác và hoạt ảnh nên hoạt động trong sản phẩm cuối cùng. Figma giúp tạo prototype cực kỳ đơn giản bằng cách sử dụng chuyển tiếp mà không cần tải xuống ứng dụng của bên thứ ba.
Tạo prototype nhanh hơn với Figma. Hoạt hình chuyển tiếp dễ dàng, thêm tương tác siêu nhỏ vào luồng của bạn và sử dụng hoạt hình thông minh để nhanh chóng tạo ra các tương tác trông đẹp trên mọi thiết bị.
Inspect
Bất kỳ tài liệu nào trong Figma đều có thể được chia sẻ với bất kỳ ai. Quan trọng hơn, các nhà phát triển có thể vào và kiểm tra các yếu tố thiết kế để lấy thuộc tính màu sắc, kích thước và khoảng cách. Họ có thể chọn bất kỳ tài sản nào và xuất nó sang PNG, SVG hoặc bằng mã bằng Swift, Java hoặc CSS.
Nói chung hơn, những người được mời có thể được cấp quyền xem hoặc chỉnh sửa. Điều này có nghĩa là bạn có thể bao gồm hầu như bất kỳ ai trong nhóm của mình, bao gồm quản lý sản phẩm, khách hàng và bất kỳ người nào thông qua một liên kết.
Keyboard Shortcuts
Các phím tắt trong Figma rất giống với Sketch. Một số điểm khác biệt chính khá quan trọng cần biết:
- Command + Option + G tạo một Khung cho các yếu tố được chọn. Một Khung giống như một Artboard.
- Control + G để bật / tắt lưới.
- K cho Thang đo, cho phép bạn thay đổi tỷ lệ các yếu tố khi đang di chuyển.
- C cho Bình luận. Bình luận được nhúng trực tiếp vào Figma thay vì phải đi qua một không gian khác.
Bạn có thể mở Phím tắt bàn phím Figma bằng cách nhấp vào thanh Menu, sau đó đi tới Trợ giúp và Tài khoản> Phím tắt bàn phím hoặc bạn có thể nhấn phím tắt Ctrl + Shift +? trên bàn phím của bạn.
Performance
Trong khi hầu hết các công cụ ngày nay tập trung vào sự cường điệu của các tính năng mới, Figma chỉ đơn giản tập trung vào một quy trình làm việc vững chắc với hiệu suất không thể sánh kịp các đối thủ của nó. Đây là một trong những lý do chính khiến tôi chuyển từ Photoshop ngay từ đầu. Đối với tôi, Figma nhanh như bạn có thể đi trong một công cụ thiết kế.
When you work 8 hours a day on a tool, every second you save counts.
Mỗi lần kéo nút và mỗi chỉnh sửa văn bản đều cảm thấy mượt mà như bơ ở tốc độ 60 khung hình mỗi giây. Thu phóng vào và ra là không có độ trễ.
Cross-Platform
Điều khiến Figma khác biệt là tính chất hợp tác và luôn có thể truy cập được của nó. Các rào cản như yêu cầu một máy Mac hoặc tải xuống một ứng dụng lớn là điều của quá khứ. Nhờ điều này, bất kỳ ai cũng có thể thiết kế và bất kỳ ai cũng có thể xem thiết kế của bạn trong khi bạn thiết kế. Là người sử dụng hàng ngày, tôi không thể nói quá về mức độ thay đổi trò chơi của điều này. Nhóm của bạn không còn phụ thuộc vào một công cụ của bên thứ ba hoặc một bộ plugin ngày càng phức tạp và phân mảnh, Figma chỉ đơn giản là có tất cả mọi thứ từ đầu. Vì rất nhiều nhà phát triển làm việc trên máy tính Windows, điều này thực sự cần thiết để giữ cho nhóm của bạn đồng bộ. Bất kỳ nhà phát triển nào cũng có thể nhận được liên kết từ bạn, kiểm tra thiết kế và lấy màu sắc, phông chữ và thậm chí là CSS, Swift và mã SVG.
Figma Mobile App
Xem trước thiết kế của bạn trên bất kỳ thiết bị nào. Sử dụng ứng dụng Figma iOS hoặc Android để tạo nguyên mẫu tương tác phản ánh cách người dùng có thể tương tác với thiết kế của bạn, sau đó chia sẻ các nguyên mẫu đó ở bất kỳ đâu.
Cách xem nguyên mẫu của bạn từ ứng dụng di động Figma:
- Đăng nhập vào ứng dụng di động Figma.
- Sử dụng tab Gần đây hoặc Tìm kiếm để tìm tệp hoặc nguyên mẫu bạn muốn xem.
- Nhấn vào tệp hoặc nguyên mẫu để mở nó. Từ tệp, nhấn để trình bày nguyên mẫu.
Figma Plugins
Plugins là các công cụ chuyên dụng được thiết kế để giúp bạn sử dụng Figma hết khả năng của nó. Chúng được tạo ra bởi các nhà thiết kế và nhà phát triển tài năng, những người mong muốn chia sẻ niềm đam mê của họ với cộng đồng thiết kế lớn hơn. Từ tài sản hình ảnh đến việc nhúng bản đồ vào thiết kế của bạn, plugin giúp bạn dễ dàng thêm sự sống động và cá tính vào thiết kế của mình.
Bạn có thể chuyển tài khoản của mình sang cộng đồng bằng cách nhấp vào trang chủ.
Sketch VS Figma
Ngày nay, các công cụ thiết kế không khác nhau nhiều lắm. Bố cục tương tự và bạn sẽ tìm thấy các tính năng thiết yếu giống nhau như thành phần, thư viện và chuyển giao cho nhà phát triển.
Trong khi Sketch giàu plugin như Craft, Abstract và Zeplin, thì Figma có tất cả các công cụ đó được nhúng vào ngay từ đầu. Ngoài ra, trong khi Sketch yêu cầu macOS, Figma hoạt động liền mạch với các thiết bị Mac, Windows và Linux. Ngoài ra, bạn có thể chạy trình chỉnh sửa Figma trực tiếp trong trình duyệt của mình.
Importing from Sketch
Figma đối xử với các tệp Sketch của bạn như công dân hạng nhất. Nó rất giỏi trong việc nhập khẩu đến mức ngay cả một tệp Thư viện phức tạp và lớn như Angle cũng có thể được nhập khẩu với độ chính xác 95%. Tất cả các lớp và biểu tượng đều được giữ nguyên.
Getting Started
Để bắt đầu, chúng ta hãy truy cập vào figma.com và đăng ký một tài khoản miễn phí.
Bạn có thể sử dụng Figma trực tiếp từ trình duyệt của mình hoặc tải xuống ứng dụng desktop từ trang Tải xuống. Một đặc điểm của Figma mà bạn đã biết là Cross-Platform. Nó hoạt động với Mac, Windows và cả thiết bị Linux. Tải xuống ứng dụng Figma dựa trên hệ điều hành của bạn.
Tóm lại
Việc thể hiện sự sáng tạo và kỹ năng thiết kế của bạn không yêu cầu bất kỳ công cụ cố định nào. Bạn sẽ chọn một công cụ cho công việc của mình, một số người bạn khác sẽ chọn một số công cụ khác. Nhưng khi bạn làm việc trong một nhóm và tất cả thành viên trong nhóm có thể làm việc trên cùng một trang, đó là một sự bổ sung tuyệt vời nói chung. Figma sẽ là một lựa chọn tuyệt vời cho nhóm của bạn, thậm chí cho mục đích cá nhân của bạn. Nó có rất nhiều tính năng và tài nguyên sẽ giúp tăng tốc quy trình làm việc của bạn.
