인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
피그마 파일 개발자 html/css 등 소스 확인 문의
해결된 질문
작성
·
902
1
안녕하세요.
강의를 다운받아서 확인하였는데 혹시 개발자가 디자이너에게 피그마 파일을 받았을 때
간단한 css만 확인하는게 아니라 html/css 같은 구조를 소스로 확인하는 방법은 없나요?
제가 찾아보기로는 플러그인을 사용하여 하는 방법이 있는데 혹시 이런 경우 뷰어모드가 아닌 에디터 모드일때만 플러그인 사용이 가능한건지도 궁금합니다.
답변 2
0
안녕하세요 1년만에 추가 답글 드립니다. 아마 이미 알고 계실지도 모르겠지만 혹시나 해서요.
지난번에 [html/css 같은 구조를 소스로 확인하는 방법] 문의를 주셨었는데 이건 Framer라는 툴을 사용하시면 확인 가능합니다. 저는 이 Framer를 최근에야 사용하기 시작했는데 세상에.. 진작에 쓸 걸 후회될 정도로 너무 좋더라고요!! !! 피그마에 있는 플러그인도 이와 비슷한 기능을 해주는 것들이 있긴 하겠지만 아마 제대로 보려면 유료인게 많을 것 같고요, 프레이머는 무료로 더 퀄리티 높게 구조가 자동 생성돼요. 아직 안 써보셨다면 프레이머 한 번 꼭 사용해보시는 걸 추천드려요! 😊
0
안녕하세요
피그마 디자인은 코딩 베이스로 제작되는 것이 아니기에 디자인 작업 시 전체적인 html, css 구조가 함께 만들어지지는 않습니다. 따라서 전체적인 hmtl, css 구조를 확인하실 수는 없습니다. 말씀하신 해당 기능을 제공하는 플러그인들이 있기는 하다만 완벽하게 html, css 구조가 만들어져 내보내지지는 않는다고 들었어요.
그래도 부족한 부분은 보완해서 사용해보고 싶으시다면 플러그인 커뮤니티에서 hmtl, css 등의 키워드로 검색해서 제일 다운로드 많은 플러그인들을 설치해서 사용해보세요.
플러그인 설치하는방법
피그마 파일 브라우저 화면 → explore community → 상단 탭 중 plugin 클릭 → 원하는 키워드로 검색
피그마 에디터 화면 → 상단 좌측 피그마 로고 모양 클릭 → plugins → browse plugins in community → 상단 탭 중 plugin 클릭 → 원하는 키워드로 검색