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