피그잼과 피그마를 활용하면서 참고해야 할 사례나 화면 등을 복사해 한쪽에 넣어두는 경우가 많습니다. 다만 이는 모두 이미지 단위라 단순 참고 외 활용은 어려운데요. 오늘 소개할 피그마 플러그인은 실제 존재하는 웹사이트를 URL과 크롬 확장 프로그램을 통해 피그마로 불러와 구성 내용을 자세히 살펴볼 수 있도록 도와줘 훨씬 유용하게 사용할 수 있습니다.

‘html to design’는 무료 버전과 프로 버전으로 나뉘어 있지만, 무료 버전으로도 웹사이트를 피그마로 불러오는데 큰 문제가 없습니다. 피그마와 피그잼 양쪽에서 플러그인으로 모두 활용할 수 있고요. 앞서 말씀드린 것과 같이 웹사이트를 가져올 수 있는 방법은 두 가지로 하나는 URL을 통해 전체 페이지를 가져오는 것, 또 하나는 크롬 확장 프로그램을 통해 웹사이트의 특정 영역을 선택해 파일을 업로드하는 방법입니다.

URL로 통해 피그마로 웹사이트를 불러올 경우, 해상도를 따로 설정하는 것도 가능합니다. 맥북, 아이팯드, 아이폰 등의 해상도에 따라 불러올 수 있어 원하는 해상도에 맞는 구성을 확인하기 용이합니다. 또 다크 모드와 라이트 모드를 선택할 수 있다는 점도 눈에 띄네요.

먼저, URL을 통해 맥북 해상도에 맞춰 애플 홈페이지를 불러온 모습입니다. 한 화면을 통째로 불러오며, 각 구성요소를 하나씩 클릭해 폰트 등의 정보를 확인하거나 직접 변경해 다른 모습으로 적용할 수 있습니다. 이미지로 가져오는 것이 아니기에 하나씩 더 상세히 살펴볼 수 있다는 장점이 있어요.

크롬 확장 프로그램을 설치하면, 보고 있는 웹사이트 내 특정 영역을 선택 후 파일로 저장할 수 있어요. 이 파일은 피그마로 이동 후, 플러그인을 실행해 등록할 수 있습니다. 동일 기능을 여러 웹사이트에서 가져오고 싶을 때 유용하게 사용할 수 있는 기능이라고 생각합니다.

크롬 확장 프로그램을 통해 특정 영역을 선택, 파일로 받은 뒤 피그마에서 불러온 모습입니다. 마찬가지로 단순 이미지가 아니라 각 구성을 구체적으로 확인할 수 있어요. 여백, 폰트, 컬러 등의 정보를 포함하고 있기 때문입니다. 저는 개인적으로 크롬 확장 프로그램을 더 유용하게 활용하고 있습니다. 플러그인 설치를 원하시는 분은 링크를 통해 자세한 내용을 참고해주세요!

제 첫 도서가 출간되었어요. 제목은 ’10년 차 IT 기획자의 노트’입니다. 뉴스레터와 이 블로그를 시작하게 된 이유는 사수 없이 일하는 어려움을 저보다 조금 늦게 출발한 분들이 덜 느꼈으면 하는 마음 때문이었는데요. 같은 맥락에서, 9개 노트(기록)를 바탕으로 기획과 PM의 주요 업무를 어떻게 하면 좋을지 정리한 내용입니다. 아래 링크를 통해 자세한 내용을 확인하실 수 있어요!