[Utill] Figma를 활용한 UI 만들기

오늘은 우연한 기회로 디자인 관련 영상을 보게되어

그동안 궁금했던 피그마와 몇몇 플러그인에 대해 알아봤다.

 

 

 

사이드로 하고 있는 프로젝트 & 곧 시작할 기능 구현 플젝에서도

프론트 화면이 필요한데 가장 걱정인 건..

디자인이 진짜 꽝이라는 거..😱

 

 

 

"어떻게 하면 그럴듯한 UI를 디자이너 없이 만들 수 있을까¿"

이게 오늘의 주요 관심사ㅎㅎ..

까먹으니 정리해두고 쓰자

 

 

 

1. 매직패턴

 

 

플러그인으로, 크롬 도구에서 추가할 수 있다.

달력을 가져오고 싶으면 html이 존재하는 페이지로 가서

플러그인을 통해 가져올 수 있다.

 

 

 

 

 

 

 

select HTML을 누르고 원하는 영역을 선택하면

자동으로 새로운 페이지로 렌더링 되면서 요소들을 생성한다.

 

 

 만들어진 요소를 피그마로 이동시켜 사용할 수 있다!

다른 UI를 참고하여 수정할 때 유용할 것 같다.

 

 

 

2. Figma To HTML

 

 

피그마에서 만든 최종 요소를 HTML 문서로 받아 사용할 수 있다.

다른 플러그인은 유료 플러그인이 많은데 이건 무료로 사용 가능하다.

 

변환해봤는데... 음.. 

막 잘 되는 것 같지는 않다😅 틀로 사용하기 좋은..?

뭔가 많이 이상..

 

 

 

 

3. Copy & Paste CSS

 

 

이건 피그마에서 무료로 제공하는 기능인 것 같다.

다음 경로로 CSS를 누르면 클립보드에 스타일이 복사된다.

 

 

솔직히 HTML까지 만들어주는건 되면 땡큐지만 바라지도 않는다..

그냥 보기좋은 디자인만 잘 만들어낼수 있었으면,,