Cách chuyển đổi bất kỳ trang web nào thành thiết kế Figma

Figma là một công cụ tuyệt vời đang nhanh chóng trở thành công cụ yêu thích của các nhà thiết kế web và UX/UI. Bạn có thể tạo các thiết kế web đáp ứng một cách nhanh chóng và dễ dàng bằng công cụ dựa trên trình duyệt miễn phí này.

Trong khi hầu hết mọi người tạo thiết kế của họ từ đầu trong Figma, bạn có thể lấy cảm hứng từ các trang web thực và dễ dàng tạo thiết kế Figma trực tiếp từ trang HTML hiện có. Đây là cách để làm điều đó.

Tại sao bạn nên tạo các thiết kế Figma từ HTML

Có nhiều lý do khiến bạn có thể muốn sao chép một thiết kế web hiện có dưới dạng thiết kế Figma. Làm điều này thông qua plugin Figma giúp tiết kiệm thời gian, cho phép bạn tập trung vào việc tinh chỉnh thiết kế của mình.

Thực hành thiết kế web bằng cách tạo lại các trang web hiện có là một cách tuyệt vời để học hỏi từ các bậc thầy. Bạn cũng có thể sử dụng công cụ thiết kế HTML to Figma nếu trước đó bạn đã thiết kế và xuất bản một trang web mà bạn đã mất quyền truy cập. Thay vì thiết kế lại từ đầu, bạn có thể tiết kiệm thời gian bằng cách chuyển đổi nó trở lại Figma để hoạt động lại.

Bây giờ bạn đã biết tại sao công cụ này có thể hữu ích, đã đến lúc tìm hiểu cách thức hoạt động của nó.

Cách chuyển đổi bất kỳ trang web nào thành thiết kế Figma

Để bắt đầu bất kỳ công việc thiết kế dựa trên Figma nào, bạn cần mở Figma và đăng nhập hoặc đăng ký. Bạn có thể sử dụng phiên bản trình duyệt, Figma hoặc tải xuống ứng dụng dành cho máy tính để bàn; cả hai đều làm việc theo cùng một cách cho dự án này.

Mở một Hồ sơ thiết kế mới để bắt đầu dự án thiết kế HTML sang Figma của bạn.

Bước 1: Tải xuống Plugin html.to.design

Để có thể trực tiếp chuyển đổi một trang web trực tiếp thành thiết kế Figma, bạn sẽ cần một phần bổ trợ. Có vô số plugin trên Figma để trợ giúp thiết kế của bạn, bao gồm cả plugin để tạo mô hình cho điện thoại và thiết bị. Bạn có thể thêm thiết kế trang web đã chuyển đổi của mình vào một mẫu mô phỏng sau này nếu muốn.

Để tải xuống plugin, hãy chọn thực đơn hình (biểu tượng Figma) > bổ sung > Tìm thêm plugin. Ngoài ra, bạn có thể chọn Tài nguyên > bổ sung. Từ một trong hai tùy chọn, nhập vào thanh tìm kiếm html.to.design.

Tìm tùy chọn do divRIOTS cung cấp và chọn Chạy. Thao tác này sẽ mở plugin dưới dạng hộp thoại trên canvas Figma của bạn.

Bước 2: Dán URL trang web

Plugin html.to.design miễn phí nhưng có cung cấp phiên bản chuyên nghiệp. Bạn có thể hoàn thành toàn bộ quy trình thiết kế của mình với phiên bản miễn phí.

Tìm trang web bạn muốn tạo thiết kế Figma. Bạn nên sử dụng trang web công cộng—không phải trang web chỉ có thể truy cập bằng cách đăng nhập. Chúng tôi sẽ sử dụng trang chủ của mình, smartreviewaz.com.

Sao chép URL đầy đủ và dán vào hộp nhập trên Figma, thay thế trình giữ chỗ trang web của Apple.

Bước 3: Tải thiết kế của bạn

Sau khi dán URL của trang web, hãy mở Cài đặt bên dưới hộp nhập để chọn kích thước của thiết kế. Bạn có thể nhập thiết kế cho nhiều loại thiết bị, nhưng bạn sẽ thành công hơn khi chọn thiết bị máy tính để bàn nếu bạn sử dụng URL máy tính để bàn và thành công hơn khi sử dụng URL di động cho thiết bị di động.

Ngoài ra còn có các tùy chọn tùy chỉnh cho thiết bị hoặc kích thước không có sẵn dưới dạng tùy chọn mặc định. chúng tôi đang chọn MacBook Pro 14” với một Ánh sáng chủ đề.

Khi bạn đã chỉ định cài đặt thiết bị và chế độ xem của mình, hãy chọn Nhập khẩu để làm cho thiết kế HTML của bạn trở nên sống động trong Figma. Đợi cho đến khi thanh tải hoàn tất để thiết kế Figma xuất hiện.

Tùy thuộc vào trang web bạn đã sử dụng, bạn có thể nhận thấy hộp bật lên giải thích một số kiểu chữ phải được thay thế. Điều này sẽ là do bản quyền cho các kiểu chữ được cấp phép. Figma sẽ thay thế chúng bằng kiểu chữ mà bạn có quyền truy cập.

Thoát khỏi bất kỳ cửa sổ bật lên nào, sau đó thoát khỏi hộp thoại plugin để xem thiết kế mới của bạn ở dạng đầy đủ.

Bước 4: Chỉnh sửa thiết kế Figma của bạn

Từ đây, bạn có thể bắt đầu chỉnh sửa trang web Figma của mình theo bất kỳ cách nào bạn muốn. Như đã đề cập, chức năng HTML to Figma này cho phép bạn tìm hiểu cách các trang web hiện có được thiết kế để truyền cảm hứng cho bạn tạo trang web của riêng mình từ đầu. Bạn có thể sử dụng thiết kế cơ bản từ trang web và tạo bản trình bày bằng cách sử dụng hiệu ứng chuyển tiếp trong Figma hoặc chỉ cần tìm hiểu cách các nhà thiết kế khác thiết lập trang web.

Trên menu bên trái, bạn sẽ tìm thấy các lớp. Vì điều này đã được chuyển đổi trực tiếp từ HTML, nên các lớp có thể chi tiết hơn—hoặc thậm chí gây nhầm lẫn—so với những gì bạn đã quen khi tự thiết kế. Chọn một phần trong thiết kế để tìm các lớp được đánh dấu trên menu bên trái.

Bạn có thể thay thế hình ảnh, nhập lại tiêu đề và nội dung văn bản hoặc di chuyển mọi thứ trong bố cục bằng cách bấm đúp vào khía cạnh thiết kế. Plugin html.to.figma không sao chép cài đặt hoạt ảnh hoặc chuyển tiếp khi nhấp vào liên kết hoặc thay đổi trang. Bạn có thể tự thêm chúng.

Cách chuyển đổi một trang web riêng tư

Phần lớn quá trình tạo một trang web riêng tư—một trang web yêu cầu phải có tài khoản để truy cập—so với một trang web công khai là giống nhau. Tuy nhiên, thay vì dán URL, bạn phải sử dụng tiện ích mở rộng của Chrome để tạo tệp.

Để bắt đầu, hãy mở Figma và plugin html.to.figma theo cách tương tự như trước đây.

Bước 1: Tải xuống và chạy Tiện ích mở rộng của Chrome

Bạn chỉ có thể sử dụng tiện ích mở rộng này với Google Chrome, vì vậy hãy mở Chrome để bắt đầu. Từ hộp thoại plugin Figma, chọn Tiện ích mở rộng của Chrome—hoặc mở tiện ích mở rộng tại đây trên trình duyệt Chrome của bạn.

Lựa chọn Thêm vào Chrome > Thêm phần mở rộng để thêm phần mở rộng vào trình duyệt của bạn.

Khi đã thêm tiện ích mở rộng, hãy điều hướng đến trang web hoặc trang riêng tư mà bạn muốn sao chép thiết kế của—chúng tôi đang sử dụng trang Instagram—và chọn tiện ích mở rộng. Tiện ích mở rộng được thu gọn nằm dưới biểu tượng mảnh ghép trong trình duyệt của bạn.

Nó sẽ hỏi bạn có muốn chụp toàn bộ trang hay chỉ những gì đang xem. Thực hiện lựa chọn của bạn và sau đó ảnh chụp sẽ xuất hiện trong các bản tải xuống của bạn dưới dạng tệp .h2d.

Bước 2: Kéo tệp đã tạo vào Plugin Figma

Truy cập ứng dụng Figma hoặc trang web Figma trên trình duyệt của bạn và kéo tệp .h2d đã tải xuống vào hộp. Tệp sẽ tải và tạo giống như tùy chọn trang web công cộng.

Giống như phiên bản trang web công cộng, bạn có thể nhấp đúp vào các khía cạnh của thiết kế để chỉnh sửa chúng hoặc nhấp qua menu bên trái để xem vị trí chúng xuất hiện trên bố cục.

Bạn có thể muốn thêm các yếu tố thiết kế mới vào thiết kế trang web, chẳng hạn như hiệu ứng kính mờ Figma hoặc thậm chí bạn có thể sao chép các phần của thiết kế trang web làm mẫu chính cho bản trình bày Figma. Vào năm 2022, Adobe đã mua lại Figma, vì vậy chúng ta có thể mong đợi nhiều cách thú vị hơn để sử dụng Figma trong tương lai.

Sử dụng bất kỳ trang web nào để lấy cảm hứng trong các thiết kế Figma của bạn

Mặc dù Figma chủ yếu để thiết kế trang web hoặc trang UX/UI từ đầu, nhưng đây là cơ hội tuyệt vời để đưa vào các trang web hiện có để xem cách chúng được xây dựng. Bạn cũng có thể làm cho thiết kế web của mình trở thành bản sao của một trang web hiện có nếu bạn không chắc nên bắt đầu từ đâu từ một trang web trống.

Một lý do tuyệt vời khác khiến bạn nên sử dụng plugin html.to.figma là nếu bạn đã thiết kế một trang web mà bạn đã mất quyền truy cập. Bạn có thể điền trang vào Figma và bắt đầu lại mà không cần phải thực sự bắt đầu lại.