목록Figma (1)

미국산 귤

[React] 피그마(Figma) 디자인 리액트로 불러오는 방법

7주차 멋사 과제로 기획디자인 파트에서 넘겨준 피그마 디자인을 리액트로 넘겨받아 간단한 기능을 구현해야 한다.  그간 세션에서 두 세 번 연습해봐서 생각보다 화면 구현은 간단하게 할 수 있었다.   1. 먼저 피그마 프로젝트에 접속하여 우측 상단 토글을 눌러 Dev Mode 상태로 만든다.(사진처럼 UI가 초록색으로 변해야 함) Dev Mode 상태에서 요소를 선택하면 이렇게 우측에 CSS 코드와 사용된 파일들이 보인다.   2. VS code로 넘어와 리액트 프로젝트를 생성하고, public 폴더에 images 폴더를 생성한다. 여기다가 피그마 디자인에서 사용된 이미지 파일을 넣을 것이다. src가 아니라 public에 만드는 이유는, public에 넣어두면 굳이 이미지를 import 해오지 않아도 바..
React 2024. 6. 10. 15:15
이전 Prev 1 Next 다음