[Figma]피그마 디자인으로 반응형 페이지 만들기
Figma 디자인 가지고 반응형 페이지 만들기 오늘의 목적은 Width 크기에 따라서 디자인을 한 Figma 의 디자인 요소들을 가지고, 실게로 React 페이지에 적용을 시키는 것을 하려 합니다. 내 디자인 저는 다음과 같이 디자인을 했습니다. 총 3가지 버전이죠. L의 경우는 1200px 을 기준으로 하며, 이보다 더 커질 경우는 알아서 가로로 늘어나는 형태로 제작했습니다. M의 경우는 L이 900px […]
[Figma] 피그마 디자인을 React 코드로 추출하기
Figma 디자인을 React 코드로 추출하기 목적은 Figma 로 디자인한 페이지를 React 에서 이용 가능하도록, 곧바로 코드로 추출하는 것입니다. 저는 Figma 로 우선 다음과 같은 Demo 페이지를 제작하였습니다. https://kenkyuanime.com/wp-content/uploads/2024/07/GOMCAM-20240728_0134330171.mp4 테슬라 모델들이 쭉 있고, 그 아래에 버튼이 있는 형태의 페이지가 연속되는 형태이죠. 가장 위쪽에는 메뉴바가 있고, 이 메뉴바는 고정된 상태입니다. 아래로 드래그를 하면, 모델들의 페이지가 내려가는 형태이지요. […]