백엔드 개발 전 퍼블리싱 단계에서 유용한 플러그인을 팀원이 알려주었다.
그것은 바로 피그마에서 AutoHTML라는 플러그인이었다.
요즘 HTML, CSS 코드를 워낙 AI가 잘 알려주기도 하고 나는 Zeplin 플러그인 밖에 몰랐다.
AutoHTML 사용 방법
1. 피그마 하단에 있는 옵션중에 오른쪽 젤 끝에 있는것 선택
2. 원하는 플러그인 검색 후 다운로드
플로그인들은 대체적으로 무료도 되지만 횟수 제한이 있는 것 같다.
AutoHTML은 HTML, React, Vue, Svelte 까지 지원이 되고 HTML만 무료였다.
그렇다고 다른것들을 아예 사용하지 못하는건 아니었다.
React, Vue, Svelte를 최대 5번까지 무료로 사용할 수 있다. (각각 5번 제한이 아니고 합쳐서 5번이어서 아쉽..~~)
내가 디자인한 페이지를 선택하면 이렇게 각 3개의 파일을 제공해준다.
Component.html
<div class="div">
<div class="form">
<div class="div2">이메일</div>
<div class="rectangle-11"></div>
<div class="example-google-com">example@google.com</div>
<div class="div3">비밀번호</div>
<div class="div4">예비로고</div>
<div class="div5">
로그인하고 나만의 여행을
<br />
시작해 보세요
</div>
<div class="rectangle-13"></div>
<div class="div6">*******</div>
<div class="div7">아이디·비밀번호 찾기</div>
<div class="rectangle-17"></div>
<div class="div8">로그인</div>
<div class="div9">로그인 유지</div>
<div class="rectangle-15"></div>
</div>
<div class="div10">
<img class="_89-a-68-d-1-e-3674-a-1" src="_89-a-68-d-1-e-3674-a-10.png" />
<div class="div11">또는</div>
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<div class="header">
<div class="header2"></div>
<img class="div12" src="div10.svg" />
<div class="div13">예비로고</div>
</div>
</div>
style.css
.div,
.div * {
box-sizing: border-box;
}
.div {
background: #ffffff;
height: 667px;
position: relative;
}
.form {
width: 352px;
height: 410px;
position: static;
}
.div2 {
color: #000000;
text-align: center;
font-family: "Pretendard-Bold", sans-serif;
font-size: 14px;
font-weight: 700;
position: absolute;
left: 15px;
top: 231px;
width: 40px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle-11 {
background: #ffffff;
border-radius: 8px;
border-style: solid;
border-color: #000000;
border-width: 1px;
opacity: 0.3;
width: 335px;
height: 48px;
position: absolute;
left: 15px;
top: 261px;
}
.example-google-com {
color: #000000;
text-align: left;
font-family: "Pretendard-Regular", sans-serif;
font-size: 16px;
font-weight: 400;
opacity: 0.5;
position: absolute;
left: 31px;
top: 273px;
width: 303px;
height: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.div3 {
color: #000000;
text-align: center;
font-family: "Pretendard-Bold", sans-serif;
font-size: 14px;
font-weight: 700;
position: absolute;
left: 12px;
top: 330px;
width: 54px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.div4 {
color: #000000;
text-align: center;
font-family: "Pretendard-Bold", sans-serif;
font-size: 21px;
font-weight: 700;
position: absolute;
left: 156px;
top: 106px;
width: 54px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.div13 {
color: var(--main-color-1, #76adec);
text-align: left;
font-family: "Inter-Bold", sans-serif;
font-size: 18px;
font-weight: 700;
position: absolute;
left: 20px;
top: 26px;
width: 70.95px;
height: 24px;
-webkit-text-stroke: 1px var(--main-color-1, #76adec);
}
vars.css
/* Figma Styles of your File */
:root {
/* Colors */
--main-color-1: #76adec;
--sub-color-1: #dbecff;
--sub-color-2: #ffe2ab;
--black-1: #000000;
--white-1: #ffffff;
--grey-1: #b1b1b1;
--grey-2: #434343;
--main-color-2: #f2a413;
--grey-3: #d9d9d9;
--kakao: #fee500;
/* Fonts */
--text-1-font-family: Pretendard-Regular, sans-serif;
--text-1-font-size: 70px;
--text-1-line-height: normal;
--text-1-font-weight: 400;
--text-1-font-style: normal;
--text-2-font-family: Pretendard-Regular, sans-serif;
--text-2-font-size: 50px;
--text-2-line-height: normal;
--text-2-font-weight: 400;
--text-2-font-style: normal;
/* Effects */
}
이제 내가 디자인한 화면 코드를 받으면 추가 수정해서 완성하면 된다.
+ 사용후기
막상 코드를 사용하려고 하니 css에 적용된 속성이 전부 position으로 되어있어서 배치가 엉망이 된다.
그냥 필요할것 같은 코드만 참고해서 사용했다.