피그마 파일 개발자 html/css 등 소스 확인 문의
1364
작성자 없음
投稿した質問数 0
안녕하세요.
강의를 다운받아서 확인하였는데 혹시 개발자가 디자이너에게 피그마 파일을 받았을 때
간단한 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 클릭 → 원하는 키워드로 검색
HTML2Design 플러그인 시, 클로드에서 코딩해서 만든 UI 예시 이미지 가져오기 오류
0
5
0
Json 플러그인 사용시 variable collection 없음
0
12
1
배리어블 목록 없음
0
22
3
Token 등록 방법 문의
0
19
1
인스턴스스왑
0
17
2
borderTransparent를 라이트/다크모드에 이중등록
0
24
1
해결되었습니다.
0
20
1
채팅 UI 추가 속성 설정 질문
0
24
1
배리어블 Value에 관해 질문있습니다.
0
35
0
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
0
39
1
Navigation Mobile 토글 베리어블이 안됩니당
1
34
2
24강 상품 상세화면 실습 컨디셔널 질문
0
30
2
실습파일
0
25
2
23강 캘린더 화면 실습 강의 2가지 질문
0
33
1
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
0
32
1
17~20강 강의에서 활용하신 노션 자료 또한 공유 가능할까요?
0
39
1
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
신규 업데이트 내용
0
31
2
'Scroll To' 프로토타입 상세설정 'Offset' 플러스와 마이너스 설정 기준이 궁금합니다!
0
34
2
예제 파일 오류
0
33
1
디자인 시스템에 그룹명을 숨길 수도 있나요?
0
46
2
viwer상태에서 interactions질문
1
452
2
피그마 문의드려요.
1
552
1
다운로드가 안됨
1
471
2