Figma 핵심 기능인터랙티브한 디자인 만들기codebnb: 완성하기

Q

figma와 코딩 연계

조회 263

좋아요 0

2024년 10월 21일




댓글 2

2024년 11월 13일
질문자분이 말씀하신 codebnb와 같은 서비스의 로그인/예약 기능은 순수하게 Figma만으로는 구현이 어렵습니다. 이런 기능들은 실제 웹 개발 과정에서 JavaScript와 백엔드 개발을 통해 구현해야 합니다.
따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.
베스트 댓글
2024년 11월 13일
질문자분이 말씀하신 codebnb와 같은 서비스의 로그인/예약 기능은 순수하게 Figma만으로는 구현이 어렵습니다.😭 이런 기능들은 실제 웹 개발 과정에서 JavaScript와 백엔드 개발을 통해 구현해야 합니다.

따라서 Figma는 디자인 산출물을 만들고 스타일 정보를 추출하는 데까지 활용하고, 실제 동적 기능 구현은 별도의 웹 개발 과정이 필요하다고 보시면 됩니다.

Figma에서 웹 개발까지 하기 위해서는 다음과 같은 방법을 별도로 사용하실 수 있습니다!
1. 디자인 → 코드 내보내기
- Figma에서 CSS 속성을 직접 추출할 수 있습니다
- 색상, 크기, 여백 등의 스타일 정보를 코드로 복사 가능

2. Figma → 코드 변환 도구 활용
- Figma to HTML/CSS 변환 플러그인들이 있습니다 (레이어 상황에 따라 100% 디자인이 일치하게 나오지 않을 수 있습니다.)
- 예: Anima, Figma to HTML 등의 도구

혹은 Framer 혹은 웹플로우 같은 노코드 툴을 이용해서 웹사이트를 만들고 배포까지 하는 방법도 있습니다.

적절한 답변이 되었기를 바랍니다 :)

(주) 코드잇

대표강영훈

개인정보보호책임자강영훈

이메일support@codeit.kr

사업자 번호313-86-00797

통신판매업제 2019-서울중구-1034 호

주소서울특별시 중구 청계천로 100 시그니쳐타워 동관 10층 코드잇