inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

피그마 HTML 변환 문의

9669

이솔잎(서비스디자인 Part)

작성한 질문수 1

0

안녕하세요
피그마 플러그인 중 피그마 파일을 HTML로, HTML 파일을 피그마 파일로 변환시켜 주는게 있다고 하는데
어떤 플러그인을 사용해야 가장 잘 적용시킬 수 있을까요??
 
산출물 중 유실된 부분 정리할 때 HTML 변환해서 작업하려고 합니다~!
 
 

모바일-디자인 웹 디자인 figma

답변 2

0

sankang50

현재 존재하고 있는 많은 플러그인은 작업방법이 번거로울 뿐 아니라 코드 값들이 abosulte 코드 및 px 코드 투성이라서 후작업에 시간이 다소 걸립니다. 뿐만 아니라 코드 레이아웃을 자동으로 잡아주지 않기 때문에 굉장히 번거롭습니다. 제가 사용해본 툴 중에 function12.io 가 있는데 피그마 디자인 URL만 복사 붙여넣기 하면 한눈에 모든 디자인 페이지의 코드가 보여지고 위에 언급한 문제들도 왠만한 건 다 잡아주고 있어서 이 툴을 추천드립니다.

0

에릭

안녕하세요. 질문 감사합니다.

저도 이 부분에 대해 경험이 별로 없어서 검색을 해봤는데요.

피그마에서 HTML로 변환시켜주는 플러그인들이 나오는 것 같습니다.

다만 저도 HTML 코딩을 전문적으로 하는 것이 아니라 어떤 플러그인이 잘 동작되는지는 잘 모르겠습니다.

주변에 개발 쪽 전문가 분이 계시다면 테스트를 해보시면 좋을 것 같습니다.

제 전문적인 분야가 아니다보니 정확한 답변을 드리지 못하는 점 양해부탁드립니다.

좋은 하루 되세요!

0

김효신

안녕하세요. 행동하는 개발자 김효신입니다. 

 

피그마 플러그인 중, 아래 사용해보시면 HTML -> 피그마 변환,  피그마 => HTML 변환 자유롭게 진행 가능합니다. 다만 HTML => 피그마 변환 시에는 호스팅된 사이트의 URL을 통해서 변환되니, 로컬에서 동작하는 HTML은 변환 되지 않을 수 있습니다. 감사합니다. 

Figma to HTML, CSS, React & more!

프레임 조정 관련

0

84

2

arrow auto 플러그인이 검색해도 안나오는데 대체할 다른플러그인 추천해주실수있을까요 ?

0

91

1

오브젝트간 간격 4px 주시는 이유가 구체적으로 궁금합니다.

0

129

0

하단바 고정

0

476

2

도형 오토레이아웃 설정

0

161

2

단락별 행간 조절

0

104

2

수강기한 연장 관련 질문드립니다.

0

96

2

24화 질문인데 도형 선택해도 layer가 안 뜹니다

0

181

3

go back to previous(이전 버전으로 가기) 가 안뜹니다

0

402

3

Auto Layout 적용이 되지 않습니다

0

417

2

SF Symbols 윈도우

0

382

2

섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다

0

152

2

Constraint기능에서 Top & Bottom 기능이 연동이 안되네요

0

171

2

Copy Link로 프로토타입 공유 시, 휴대폰 프레임 안보이게 하는 기능

0

341

2

프레임 크기를 조정하다가 모르는 박스를 발견했어요.

0

150

2

Style 저장하는데 Variable?

0

396

1

Text 박스 조정하는 법

0

1113

2

확장성

0

126

2

하단바 설정하는 방법

0

307

2

컴포넌트들 에셋상에서 폴더값으로 분류하는 법

0

652

4

하단바 고정시

0

963

3

섹션 12 예제 파일이 안보입니다!

0

186

2

제플린 핸드오프에 관련 질문입니다.

0

149

2

오토레이아웃

0

149

2