[UX UI 디자이너를 위한 개발 #2]
HTML to Figma로 카드뉴스 만들기
안녕하세요
UX UI 디자이너 댄비입니다
[디자이너가 코드를 쓰면 생기는 일]
카드뉴스를 만들다보면, 이런 생각이 듭니다..
반복 프레임 너무 많다
같은 컴포넌트 복붙하다가 지친다
수정 요청 들어오면 전체 다 바꿔야 한다
정렬 맞추다 하루 끝난다
사실 요즘같은 AI 시대에 이런건 정말 뚝딱 해낼 수 있을 것 같다는 생각이 자주 듭니다.
그래서 저는 HTML to Figma 방식으로 카드뉴스를 만들어봤습니다.
블로그 글도 AI가 대체해주고, 카드뉴스까지 만들어준다니 개꿀이죠.
HTML to Figma
HTML/CSS로 레이아웃을 만들고 → Figma로 변환하는 방식입니다.
코드로 카드뉴스 구조를 잡아두고
플러그인을 통해 Figma 프레임으로 바꾸는 거죠.
웹을 만들 듯 카드뉴스를 만드는 방식입니다.
카드뉴스 대량 제작, 콘텐츠 마케팅용 반복 템플릿, 교육용 슬라이드형 콘텐츠, 이벤트 안내형 게시물에 추천드립니다.
1. HTML/CSS로 카드 구조 작성
2. 스타일 변수 정리 (폰트, 컬러, 간격)
: 추가로 프롬프트를 입력합니다.
1) 인스타그램 피드 게시물의 최적 사이즈는
1080x1350픽셀(4:5 비율)의 세로형. 이 사이즈로 만들어줘
2) 총 6장의 카드뉴스로 만들어줘
3. HTML to Figma 플러그인으로 변환
Figma 여시고,
Action 창 열어주세요. (cmd + K)
Plugins & widgets에 <html.to.design> 검색해주세요.
팝업으로 플러그인이 뜹니다.
html.to.design 플러그인 > Editor 창에
Gemini를 통해 얻은 코드를 넣어줍니다.
Figma에서 최종 디테일 보정
사실 제일 먼저 나온 작업물이 마음에 들진 않습니다.
여기서 디자이너의 미감이 드러나는 부분이라고 생각해요.
어떤 디자인이 좋은지, 어떤 부분은 수정이 필요한지 판단하고 설명할 수 있는 능력이 필요합니다.
[최종 작업물]
예시 Article: https://blog.naver.com/igotcrushon030/224170358791
이제 AI는 디자이너나 개발자가 아니더라도 모두가 접할 수 있게 되었습니다.
이때, 중요한건 무엇이 좋은지, 별론지- 이해하고, 설명하고, 책임지는 것이라는 생각이 듭니다.
AI 작업물을 자신의 기준으로 판단합시다.. 아자스!
