Giới thiệu về công cụ thiết kế web app với figma

Figma ra mắt năm 2016, thời điểm đó, Figma đã gây quỹ được khoản tiền 14 triệu USD. Với giao diện thân thiện và dễ sử dụng, Figma nhanh chóng nổi lên như một công cụ design UI phổ biến trong cộng đồng công nghệ toàn cầu. Một số brand lớn sử dụng Figma cho tới thời điểm hiện tại gồm có: Twitter, Microsolf, GitHub và Dropbox.

Thời gian gần đây trong giới thiết kế thường nhắc tới figma, adobe xd, sketch nhiều thay vì photoshop (PTS) như trước kia. Design cả cho Mobile App và nhận thấy rằng PTS thực sự quá chậm và gặp nhiều khó khăn khi design ui/ux cho cả web & mobile app. Khi xu thế dịch chuyển chú trong vào UX nhiều hơn thì sinh ra một số công cụ design dạng vector như Sketch và Figma,  đa số các deginer thực sự hài lòng về 2 tool design này: nhanh + thông minh + dễ quản lí dự án và tương tác với nhau trên bản thiết kế. 

Tuy nhiên Sketch lại chỉ dành cho Mac, vì vậy anh em thiết kế chuyển sang dùng Figma hoặc adobe xd để có thể design trên các máy Mac và Windows.

Ở phần 1 trong các bước tự học để trở thành UI designer, Vinaspar sẽ hướng dẫn chi tiết về Figma nhé !

Các ưu điểm của Figma ?

Vinaspar sẽ tóm tắt một số ưu điểm vượt trội về thiết kế website , ứng dụng của Figma để các bạn nào đã từng dùng Photoshop có thể so sánh nhé :

• Thiết kế thời gian thực : có nghĩa là nhiều người cùng có thể cùng vẽ trên 1 project. Dĩ nhiên là mỗi người một máy tính và cùng join vào project đó trên Figma. Cách tạo Team hoặc share design mình sẽ nói ở phần sau.
• Data được lưu trên hệ thống máy chủ của Figma : vì vậy chúng ta sẽ có thể làm việc ở khắp nơi, ở các máy tính khác nhau mà không cần mang file design đi theo mình. Dĩ nhiên là chỉ tài khoản của chúng ta mới có thể nhìn thấy các project do mình tạo ra.
• Thiết kế dạng Vector : đây là điều mà các tools design hiện đại đang làm, và khi thực hiện xong có thể export ra nhiều kiểu file như SVG, PNG, JPG….ở nhiều kích thuước khác nhau mà không bị vỡ hình như trên Photoshop.
• Có thể quản lí nhiều artboards cùng 1 lúc : Ở PTS thì chỉ có thể thiết kế trên 1 khung hình , còn Figma hoặc Sketch thì có thể thiết kế nhiều màn hình trên 1 khung hình. Tức là bạn có thể thiết kế nhiều layout cho sản phẩm trên 1 khung hình.
• Có cơ chế quản lí comment tại nhiều điểm : Khi có ý kiến với 1 số điểm trên màn hình layout, chỉ cần click vào đó và comments, các thành viên khác có thể đọc được và phản hồi…
• Quan trọng nhất : nhanh và nhẹ, sự thông minh khi xử lí đem lại tốc độ thiết kế tốt hơn khi làm việc với Figma….
• Tính trình diễn prototype : Dễ dàng trình bày demo cho khách hàng dạngdeveloper nguyên mẫu và luồng ux dễ hình dung hơn thay vì phải mô tả quá nhiều. 
• Nhiều thư viện và template mẫu : có rất nhiều mẫu từ cộng đồng và thư viện icon dễ dàng import vào và tuỳ chỉnh, có 2 dạng đó là miễn phí và trả phí. Rất linh động và tiện lợi cho anh em designer sử dụng 

Hướng dẫn sử dụng Figma ?

Có 2 cách sử dụng Figma

• Login trực tiếp vào website của Figma trên trình duyệt : https://www.figma.com
• Cài đặt phần mềm trên máy tính của bạn, download tại : https://www.figma.com/downloads/

Cả 2 cách đều phải tạo 1 tài khoản và đăng nhập.

Hướng dẫn tạo tài khoản trên Figma & đăng nhập :

Bước 1 : Sign Up tài khoản mới

Truy cập vào website của figma & chọn Sign Up ( https://www.figma.com )

Bước 2 : Sign In

Sau khi đăng ký xong tài khoản mới, Figma sẽ tự động điều hướng vào màn hình quản lí các projects của bạn. Toàn bộ data sẽ được lưu trực tiếp trên máy chủ của Figma và hoàn toàn bảo mật.

Ở cột bên phải là các menu, bên trái là các project của bạn đã thực hiện, click vào từng project sẽ vào màn hình chính show các thiết kế của bạn tại project đó. Hoặc có thể tạo mới Project qua icon dấu (+).

Chi tiết màn hình của 1 Project

Phần 1 — khung : bên trái là list các artboards (các màn hình giao diện), bạn có thể cùng 1 lúc thiết kế hàng chục artboards trên cùng 1 khung hình.

Phần 2 — khung giữa : là khung view và bạn vẽ trực tiếp trên đó

Phần 3 — khung bên phải : là phần các option căn chỉnh các thông số cho thiết kế, có các tab như design, prototype, code…

 Vinaspar đã giới thiệu cho các bạn cách đăng ký và đăng nhập vào Figma, và các thành phần của màn hình cơ bản. Ở phần sau mình sẽ bắt đầu hướng dẫn 1 số thao tác sử dụng và vẽ cơ bản nhé !.

Nguồn tham khảo : https://medium.com/vnextlife/ui-02-figma-gi%E1%BB%9Bi-thi%E1%BB%87u-h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-figma-cho-ui-designer-9216438502ff