개요
FUNCTION12와 함께 디자인을 코드로 빠르게 전환하는 방법을 알아보세요.
Last updated
FUNCTION12와 함께 디자인을 코드로 빠르게 전환하는 방법을 알아보세요.
Last updated
FUNCTION12?
FUNCTION12는 개발자와 디자이너를 위한 디자인을 자동으로 소스코드로 변환합니다. 따라서 개발팀은 UI에 대한 기본코드를 처리할 필요가 없습니다. UI에 대한 반복적인 수 작업을 제거하고 비즈니스 로직, 데이터, API 연결 등 기능/창의성에 더 집중할 수 있습니다.
Figma 및 Sketch, Adobe XD (Figma Plugin 변경 후 사용) 디자인의 UI 소스코드로 변환하는데 사용하세요.
디자이너는 자신의 디자인을 자동으로 검출된 내용을 확인하고 개발자에게 전달해 주세요. 디자이너는 자신의 디자인에 대한 수정하는 시간과 개발자와의 커뮤니케이션 시간을 줄일 수 있습니다.
FUNCTION12의 사용법은 다음과 같습니다. 이 자습서에서는 다음 방법을 배울 수 있습니다.
FUNCTION12는 디자인의 이미지, 텍스트 및 그룹을 자동으로 분석합니다. 요소를 선택하고 구성요소/위젯, 버튼, 텍스트 박스, 목록, 선택 박스 등을 소스코드 및 CSS로 분석하여 즉시 사용할 수 있는 필요한 모든 요소를 다운받아 사용할 수 있습니다.
디자이너가 준비한 UI를 소스코드화 하기 위한 프로젝트 시간을 10배 이상 향상되는 업무 효율을 가질 수 있습니다.
FUNCTION12의 디자인 분석 엔진은 디자이너의 의도를 파악하기 위해 최선을 다할 것입니다.
FUNCTION12는 디자이너와 개발자간 협업을 개선할 수 있습니다.
개발자가 좋아하는 기능:
Figma 공유 링크로 쉬운 디자인 연동
수백장의 프로젝트도 한번에
빠른 로딩 시간
개발에게 친근한 Dock UI 및 듀얼모니터 사용
언제 어디서나 작업이 가능한 클라우드 환경
설치 필요없이 웹에서 작업 가능
세계에서 가장 뛰어난 디자인 해석 (디자인 노이즈 자동처리)
마진, 패딩 자동설정, 오브젝트 레이아웃 자동 탐
Vector화, Clip/Overflow, 배경/외곽선 여부, 레이아웃 유형/설정값, 마진, 패딩, 엔티티 사이즈 등 몇 번의 클릭만으로 변경 가능
직관적인 정보를 위한 Gizmo 및 Preview 제공
해상도에 대응하는 코드 제공
손쉬운 결과 다운로드 기능
그외 수 많은 기능들이 있습니다.
문서 내용은 다음과 같습니다.
워크플로우 기본
로그인 및 첫번째 프로젝트
디자인 파일 가져오기(Figma)
Studio 기능
Export 코드
다양한 프런트 프레임워크(HTML/CSS, , , 등)에 대한 Export 제공
