안녕하세요 ! 오늘은 웹디자이너분들이 주목할만한 피그마 플러그인 하나 소개해드리려합니다 🙂
바로 모든 웹페이지를 피그마 레이어로 변환시켜주는 플러그인입니다.
평소에 관심있던 웹사이트의 레이어를 참고할 수 있는 좋은 플러그인이죠!
사용 방법에 대해 알아보러 갈까요?
<HTML to design>
먼저 피그마를 실행시키고 <html to design> 설치하고 실행을 합니다.
실행하게 되면 위의 사진과 같이 URL 입력 창이 나오네요 !
평소에 여러분들이 눈 여겨봤던 사이트나, 디자인 참고하고 싶은 사이트가 있다면
그 사이트의 URL를 복붙하시고 Import 버튼 클릭 ! 하시면 됩니다 🙂
프레임의 사이즈도 조절할 수 있으며, 다크모드와 라이트모드 또한 정할 수 있답니다 🙂
자, 한 번 예시로 네이버 url를 피그마로 변환시켜볼까요?
짜잔! 이렇게 네이버의 웹사이트가 피그마로 옮겨졌습니다. 그러면 플러그인이 네이버의 코드를 분석하여 Figma에 맞는 디자인 요소로 변환해줍니다.
변환된 디자인 요소들은 Figma 프레임에 추가할 수 있으며, 필요에 따라 스타일과 위치를 조절할 수 있습니다.
이렇게 쓰여진 폰트의 이름과 두께 ,문단간의 간격수치도 쉽게 확인할 수 있답니다.
디자인 작업을 하다가 다른 웹사이트의 디자인요소나 레퍼런스 참고용으로 정말 좋은 플러그인이므로
한 번 사용해보시는 것을 추천드립니다 🙂
컨텐츠 아이디어 이벤트