모든 웹사이트를 Figma 디자인으로 변환하는 방법

Figma는 UX/UI 및 웹 디자이너 사이에서 빠르게 인기를 얻고 있는 훌륭한 도구입니다. 이 무료 브라우저 기반 도구를 사용하여 빠르고 쉽게 반응형 웹 디자인을 만들 수 있습니다.

대부분의 사람들이 Figma에서 디자인을 처음부터 만드는 동안 실제 웹사이트에서 영감을 얻어 기존 HTML 페이지에서 직접 Figma 디자인을 쉽게 만들 수 있습니다. 방법은 다음과 같습니다.

HTML에서 Figma 디자인을 만들어야 하는 이유

기존 웹 디자인을 Figma 디자인으로 복제하려는 데는 여러 가지 이유가 있습니다. Figma 플러그인을 통해 이 작업을 수행하면 시간이 절약되어 디자인 미세 조정에 집중할 수 있습니다.

기존 웹 페이지를 다시 만들어 웹 디자인을 연습하는 것은 마스터로부터 배울 수 있는 좋은 방법입니다. 이전에 액세스할 수 없는 웹 페이지를 디자인하고 게시한 경우 HTML to Figma 디자인 도구를 사용할 수도 있습니다. 처음부터 다시 디자인하는 대신 Figma로 다시 변환하여 다시 작업하면 시간을 절약할 수 있습니다.

이 도구가 유용한 이유를 알았으니 이제 이 도구의 작동 방식을 알아볼 차례입니다.

모든 웹사이트를 Figma 디자인으로 변환하는 방법

Figma 기반 디자인 작업을 시작하려면 Figma를 열고 로그인하거나 가입해야 합니다. 브라우저 버전인 Figma 를 사용하거나 데스크톱 앱을 다운로드할 수 있습니다 . 둘 다 이 프로젝트에서 동일한 방식으로 작동합니다.

새 디자인 파일 을 열어 HTML to Figma 디자인 프로젝트를 시작합니다.

1단계: html.to.design 플러그인 다운로드

라이브 웹사이트를 Figma 디자인으로 직접 변환하려면 플러그인이 필요합니다. Figma에는 휴대폰 및 장치용 목업을 만드는 플러그인을 포함하여 디자인에 도움이 되는 수많은 플러그인이 있습니다. 원하는 경우 나중에 변환된 웹사이트 디자인을 목업에 추가할 수 있습니다.

플러그인을 다운로드하려면 Figma 메뉴 (Figma 로고) > 플러그인 > 더 많은 플러그인 찾기 를 선택합니다 . 또는 리소스 > 플러그인 을 선택할 수 있습니다 . 두 옵션 중 하나에서 검색창에 html.to.design 을 입력 합니다.

divRIOTS에서 제공하는 옵션을 찾아 실행 을 선택 합니다. 이렇게 하면 Figma 캔버스에서 플러그인이 대화 상자로 열립니다.

2단계: 웹사이트 URL 붙여넣기

html.to.design 플러그인은 무료이지만 프로 버전을 제공합니다. 무료 버전으로 디자인 프로세스를 완전히 완료할 수 있습니다.

Figma 디자인을 만들고 싶은 웹사이트를 찾으세요. 로그인을 통해서만 액세스할 수 있는 웹 페이지가 아닌 공개 웹 사이트를 사용해야 합니다. 우리는 홈페이지인 MakeUseOf.com을 사용할 것입니다.

전체 URL을 복사하고 Figma의 가져오기 상자에 붙여넣어 Apple 웹 사이트 자리 표시자를 대체합니다.

3단계: 디자인 불러오기

웹 사이트의 URL을 붙여넣은 후 가져오기 상자 아래의 설정 을 열어 디자인의 크기를 선택합니다. 다양한 장치에 대한 디자인을 가져올 수 있지만 데스크톱 URL을 사용하고 모바일 장치용 모바일 URL을 사용하는 경우 데스크톱 장치를 선택하는 것이 더 성공적일 것입니다.

기본 옵션으로 사용할 수 없는 장치 또는 크기에 대한 사용자 지정 옵션도 있습니다. Light 테마 의 MacBook Pro 14” 를 선택하겠습니다 .

장치 및 보기 설정을 지정했으면 가져오기 를 선택하여 Figma에서 HTML 디자인에 생명을 불어넣으십시오. Figma 설계가 채워질 때까지 로드 바가 완료될 때까지 기다리십시오.

사용한 웹 사이트에 따라 일부 서체를 교체해야 한다는 팝업 상자가 표시될 수 있습니다. 라이선스가 부여된 서체에 대한 저작권 때문입니다. Figma는 액세스할 수 있는 서체로 대체합니다.

모든 팝업을 종료한 다음 플러그인 대화 상자를 종료하여 전체 형태의 새 디자인을 확인합니다.

4단계: Figma 디자인 편집

여기에서 원하는 방식으로 Figma 웹 페이지 편집을 시작할 수 있습니다. 언급했듯이 이 HTML to Figma 기능을 사용하면 기존 웹 페이지가 처음부터 자신만의 웹 페이지를 만들도록 영감을 주기 위해 어떻게 설계되었는지 배울 수 있습니다. 웹사이트의 기본 디자인을 사용하고 Figma의 전환을 사용하여 프레젠테이션을 만들거나 단순히 다른 디자이너가 웹페이지를 설정하는 방법을 배울 수 있습니다.

왼쪽 메뉴에서 레이어를 찾을 수 있습니다. 이것은 HTML에서 직접 변환되었기 때문에 레이어가 직접 디자인할 때 사용했던 것보다 더 자세하거나 혼란스러울 수 있습니다. 디자인에서 섹션을 선택하여 왼쪽 메뉴에서 강조 표시된 레이어를 찾습니다.

디자인 측면을 두 번 클릭하여 이미지를 바꾸거나 제목 및 본문 텍스트를 다시 입력하거나 레이아웃 내에서 항목을 이동할 수 있습니다. html.to.figma 플러그인은 링크를 클릭하거나 페이지를 변경할 때 애니메이션이나 전환 설정을 복제하지 않습니다. 직접 추가할 수 있습니다.

비공개 웹페이지를 변환하는 방법

비공개 웹사이트(액세스하려면 계정이 필요함)와 공개 웹페이지를 만드는 프로세스의 대부분은 동일합니다. 그러나 URL을 붙여넣는 대신 파일을 생성하는 Chrome 확장 프로그램을 사용해야 합니다.

시작하려면 이전과 동일한 방식으로 Figma와 html.to.figma 플러그인을 엽니다.

1단계: Chrome 확장 프로그램 다운로드 및 실행

이 확장 프로그램은 Google Chrome에서만 사용할 수 있으므로 시작하려면 Chrome을 여세요. Figma 플러그인 대화 상자에서 Chrome 확장 프로그램 을 선택 하거나 여기 에서 Chrome 브라우저의 확장 프로그램을 엽니다.

Chrome 에 추가 > 확장 프로그램 추가를 선택 하여 브라우저에 확장 프로그램을 추가합니다.

확장 프로그램이 추가된 상태에서 디자인을 복제하려는 개인 웹사이트 또는 페이지(저희는 Instagram 페이지 사용)로 이동하여 확장 프로그램을 선택합니다. 축소된 확장 프로그램은 브라우저의 퍼즐 조각 아이콘 아래에 있습니다.

전체 페이지를 캡처할 것인지 아니면 보기에 있는 내용만 캡처할 것인지 묻습니다. 선택하면 캡처가 다운로드에 나타납니다. h2d 파일입니다.

2단계: 생성된 파일을 Figma 플러그인으로 드래그

브라우저에서 Figma 앱 또는 Figma 사이트로 이동하여 다운로드한 파일을 드래그합니다. h2d 파일을 상자에 넣습니다. 파일은 공개 웹 사이트 옵션과 동일한 방식으로 로드되고 생성됩니다.

공개 웹 페이지 버전과 마찬가지로 디자인의 측면을 두 번 클릭하여 편집하거나 왼쪽 메뉴를 클릭하여 레이아웃에 나타나는 위치를 확인할 수 있습니다.

Figma 불투명 유리 효과와 같은 새로운 디자인 요소를 웹 페이지 디자인에 추가하거나 웹 페이지 디자인의 일부를 Figma 프레젠테이션의 마스터 템플릿으로 복제할 수도 있습니다. 2022년 어도비는 Figma를 인수했기 때문에 앞으로 Figma를 더 재미있게 활용할 수 있는 방법을 기대할 수 있습니다.

Figma 디자인에서 영감을 얻기 위해 모든 웹사이트 사용

Figma는 주로 웹 사이트 또는 UX/UI 페이지를 처음부터 디자인하는 데 사용되지만 기존 웹 페이지를 채워 어떻게 구축되었는지 확인할 수 있는 좋은 기회입니다. 빈 슬레이트에서 시작해야 할 위치가 확실하지 않은 경우 웹 디자인을 기존 사이트의 복제본으로 만들 수도 있습니다.

html.to.figma 플러그인을 사용해야 하는 또 다른 좋은 이유는 이미 디자인한 웹 사이트에 액세스할 수 없는 경우입니다. Figma에서 페이지를 채우고 실제로 다시 시작할 필요 없이 다시 시작할 수 있습니다.