요약

프로젝트 진행중 프론트엔드를 구현해야 했는데 이 화면을 피그마를 활용하여 만들어 보았다.

Figma 에서 html 추출

1. 플러그인 링크 다음 링크로 들어가서 피그마에 플러그인을 추가해준다.

2. 플러그인을 추가하고 작업을 해놓은 프로젝트에 들어가서 원하는 파트에 우클릭을 하면
   
   다음과 같이 플러그인을 확인할 수 있다.

3. 하지만 이를 클릭하면 나오는 코드를 바로 복사하여 사용해보니 css가 제대로 적용되지않아 글자가 밀려서 나왔다. 그래서 찾은 해결법은 아래 화면에서 copy가 아닌 Open in browser를 클릭하여 나오는 페이지에서 코드를 복사하는 것이다.
   

4. 다음은 Open in browser를 눌렀을 때 나오는 화면인데, 여기 있는 index.html 의 내용을 긁어와서 테스트 해보면 출력이 제대로 나온다.