Cách xuất file PDF trong Figma

08/10/2020

Thật “í ẹ” khi đã hoàn tất thiết kế giao diện website, app đẹp lung linh trên figma rồi nhưng khách hàng lại “em ơi chuyển về file photoshop cho anh”. Đây là trường hợp nhiều designer gặp phải nhưng đành ngậm ngùi sớt google cách xuất, rồi loay hoay chẳng biết làm cách nào. 

Vậy thì đây, đọc ngay đi, cách chuyển file figma sang photoshop chỉ trong một nốt nhạc. Tuy nhiên tốc độ tải nhanh hay chậm phụ thuộc phần lớn vào dung lượng file, số lượng layer đó nhé. 

Bước 1: Nhóm các layer liên quan lại với nhau trên figma

Để các layer khi chuyển sang photoshop không bị mỗi đứa một nơi, bạn cần nhóm chúng lại với nhau và đặt tên group để dễ nhận biết và chỉnh sửa. Nếu cẩn thận hơn bạn có thể nhóm lại ngay khi thiết kế trên figma, tránh tình trạng dò tìm lại từng layer rất mất thời gian và công sức nhé.

Bước 2: Lưu file figma dưới định dạng .fig

Bạn chọn frame cần xuất ra psd, vào file > save as .fig

Bước 3: Mở file .fig vừa lưu trên Photopea

Sau khi mở file, bạn chọn Tệp > Lưu dưới dạng Psd

Bước 4: Mở file PSD vừa lưu

Bạn mở file Psd vừa lưu trên photoshop 2020 để kiểm tra xem có lỗi gì không nhé. Trong một số trường hợp phần text hoặc hình ảnh sẽ bị lệch đôi chút nhưng không đáng kể. Thế nên đây vẫn là cách chuyển file figma sang Psd vi diệu nhất tới hiện nay.

Nếu bạn đọc đến đây vẫn chưa hình dung ra cách làm thì hãy xem thêm video bên dưới để có ngay file psd bóng nuột cho mình nhé. Chúc bạn thành công.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Bài viết này sẽ giúp bạn nắm được cơ bản cách thiết kế trên Figma. Để xem thêm thông tin và các tính năng vui lòng truy cập link sau: help.figma.com.

Nội dung tài liệu gồm các mục

1. Frames
2. Constraints
3. Components
4. Styles
5. Smart Selection
6. Exporting
7. Commenting
8. Sharing

1.Frames

Frames trong Figma  giống như các artboards trong các công cụ thiết kế khác. Frames là tập hợp các thành phần cho thiết kế của bạn và đóng vai trò là top-level container chứa hầu hết các thành phần khác được tạo ra trên Figma. Có một số cách để tạo ra Frame trên Figma như sau:

Tạo Frame với kích thước tùy chỉnh
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ụ rồi di chuột vẽ vùng tùy ý.

Tạo Frame có kích thước định trước
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.

Tạo Frame từ các thành phần đang có
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.

Thực hành: tạo frame với 3 cách trên

2. Constraints

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ó. Nó cho phép xây dựng các layout đáp ứng cho nhiều loại kích thước màn hình thiết bị.

3. Components

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ó 2 khía cạnh của 1 Component:1. Component chính, sẽ định nghĩa các thuộc tính của Component.2. Các thực thể, là bản sao của Component cho phép tái sử dụng lại 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 ở Côpnent chính sẽ được áp vào cho thực thể.

4. Styles

Tính năng styles cho phép định nghĩa tập hợp các thuộc tính như màu sắc, font chữ, các hiệu ứng trên 1 đối tượng mà có thể được tái sử dụng trên toàn bộ thiết kế của cả nhóm. Bất cứ khi nào thay đổi các thuộc tính của Style thì các đối tượng bất kỳ đang dùng Style đó sẽ ngay lập tức được cập nhật.

Cách tạo Color Styles
Chọn đối tượng muốn tạo Style và trong thanh công cụ Properties, click vào biểu tượng Styles cạnh thuộc tính mà bạn muốn lưu lại. Click vào biểu tượng “+” và bạn sẽ được hỏi để cung cấp tên cho Style.

Cách tạo Text Styles
Chọn đoạn text mà bạn muốn tạo Style và click vào biểu tượng Style bên trong thuộc tính text của thanh công cụ Properties. Click vào biểu tượng “+” và bạn sẽ được hỏi cung cấp tên cho Style.

5. Smart Selection

Smart Selection cho phép bạn điều chỉnh khoảng cách giữa các đối tượng một cách nhanh chóng, tạo ra lưới đồng nhất cho các đối tượng được lựa chọn, và sắp xếp lại các đối tượng bên trong layout dạng lưới. Hãy nghĩ tới các layout dạng lưới sử dụng cho các giao diện inbox, new feeds hay photo galleries

Cách Smart Selection làm việc
Smart Selection làm việc tự động dựa trên các đối tượng được chọn hoặc nhóm từ 3 phần tử trở lên. Với các items được lựa chọn, bạn có thể điều chỉnh khoảng cách, vị trí và kích thước của tất cả các items đó chỉ 1 lần bằng việc kéo các xử lý màu hồng.

6. Exporting

Figma hỗ trợ xuất khẩu 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ữ.

Chọn đối tượng để xuất khẩu
Đầu tiên cần chọn các thành phần trên thiết kế muốn xuất khẩu. Bạn có thể xuất khẩu các layer, đối tượng đơn lẻ hay nhiều layer, nhiều đối tượng, từng group hoặc frame riêng lẻ hay nhiều group, nhiều frame hoặc thậm chí xuất khẩu toàn bộ bản vẽ của bạn 1 lúc.

Áp dụng các thiết lập xuất khẩu
Bạn có thể định nghĩa chính xác cách bạn muốn xuất khẩu các đối tượng, các layer hay các frame, bằng việc sử dụng các thiết lập xuất khẩu trên thanh công cụ Properties.

Figma hỗ trợ xuất khẩu theo các định dạng PNG, JPG, SVG và PDF cũng như theo nhiều độ phân giải màn hình khác nhau và nó sẽ tự động thêm hậu tố vào tên file xuất khẩu ra.

Xuất khẩu đối tượng được chọn
Sau khi các thiết lập xuất khẩu được áp dụng cho thành phần được chọn, thành phần dó sẽ được ghi lại trong danh sách xuất khẩu. Sau này bạn có thể xuất khẩu các thành phần được lựa chọn với hành động đơn giản trong tương lai. Tìm kiếm từ khóa “export” trong menu.

7. Commenting

Các comments được thêm vào layer khác trên Figma. Bạn có thể thêm comment vào bất kỳ đâu trên canvas. Comment có thể được thêm vào cả ở bản thiết kế cũng như xem dưới dạng prototype.

Thêm comments
Để 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. Sau đó, click vào bất kỳ đâu trên canvas để thêm vào comment của bạn. Bạn cũng có thể @mention tới thành viên trong team để anh ấy/cô ấy nhận được email thông báo về comment.

Thông báo comment
Thanh công cụ Properties có các tùy chọn thêm để show các coments đã được xử lý và lựa chọn có nhận hay không nhận email thông báo khi có comment mới hoặc khi có phản hồi cho comment.

8. Sharing

Chia ser file thiết kế trên Figma rất đơn giản. Mở hộp thoại chia sẻ và chỉ rõ quyền hạn hoặc cho phép truy cập vào link chia sẻ. Với link chia sẻ được phép truy cập thì việc chia sẻ đơn giản chỉ là chia sẻ URL của nó.

Phân quyền
Figma có 4 cấp độ truy cập khác nhau: Chỉ xem, Cho phép Sửa, Admin và Chủ sở hữu. Khi bạn chia sẻ 1 file, bạn có thể chỉ định cấp độ truy cập bạn muốn cho từng người.

Chia sẻ một Frame độc lập
Ngoài ra khi chia sẻ 1 file, bạn có thể liên kết tới 1 frame được lựa chọn trên canvas khi đó nó sẽ được phóng to và focus khi người được chia sẻ mở file.