질문자분이 말씀하신 codebnb와 같은 서비스의 로그인/예약 기능은 순수하게 Figma만으로는 구현이 어렵습니다. 이런 기능들은 실제 웹 개발 과정에서 JavaScript와 백엔드 개발을 통해 구현해야 합니다. 따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.
+0
베스트 댓글
2024년 11월 13일
질문자분이 말씀하신 codebnb와 같은 서비스의 로그인/예약 기능은 순수하게 Figma만으로는 구현이 어렵습니다.😭 이런 기능들은 실제 웹 개발 과정에서 JavaScript와 백엔드 개발을 통해 구현해야 합니다.
따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.
Figma에서 웹 개발까지 하기 위해서는 다음과 같은 방법을 별도로 사용하실 수 있습니다! 1. 디자인 → 코드 내보내기 - Figma에서 CSS 속성을 직접 추출할 수 있습니다 - 색상, 크기, 여백 등의 스타일 정보를 코드로 복사 가능
2. Figma → 코드 변환 도구 활용 - Figma to HTML/CSS 변환 플러그인들이 있습니다 (레이어 상황에 따라 100% 디자인이 일치하게 나오지 않을 수 있습니다.) - 예: Anima, Figma to HTML 등의 도구
혹은 Framer 혹은 웹플로우 같은 노코드 툴을 이용해서 웹사이트를 만들고 배포까지 하는 방법도 있습니다.
댓글 2개
따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.
따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.
Figma에서 웹 개발까지 하기 위해서는 다음과 같은 방법을 별도로 사용하실 수 있습니다!
1. 디자인 → 코드 내보내기
- Figma에서 CSS 속성을 직접 추출할 수 있습니다
- 색상, 크기, 여백 등의 스타일 정보를 코드로 복사 가능
2. Figma → 코드 변환 도구 활용
- Figma to HTML/CSS 변환 플러그인들이 있습니다 (레이어 상황에 따라 100% 디자인이 일치하게 나오지 않을 수 있습니다.)
- 예: Anima, Figma to HTML 등의 도구
혹은 Framer 혹은 웹플로우 같은 노코드 툴을 이용해서 웹사이트를 만들고 배포까지 하는 방법도 있습니다.
적절한 답변이 되었기를 바랍니다 :)