App Builder 사용하여 Figma 디자인을 HTML 코드로 변환

​App Builder ™ 와 같은 로우코드 도구는 게임 체인저입니다. 디지털 트랜스포메이션을 향한 전략적 움직임으로 인식하는 것 외에도 점점 더 많은 기업이 지난 몇 년 동안 Figma 디자인을 HTML로 변환하는 보다 실용적인 아이디어로 이를 채택하기 시작했습니다.

• 시민 개발자는 더 간단한 프로젝트를 처음부터 처리할 수 있고, 숙련된 개발자는 앱 로직과 미션 크리티컬 앱 생성을 관리할 수 있습니다.
• 개발자가 먼저 앱을 구축한 다음 앱을 구축하려는 기술을 결정할 수 있도록 하여 프로세스를 개선하고 출시 시간을 단축합니다.
• 오류가 발생하기 쉬운 수동 코딩 및 사일로를 제거하고 설계 파일을 그 어느 때보다 빠르게 생산 준비 코드로 변환합니다.
• 로우 코드 + AI로 작업(예: 이미지 또는 데이터 소스 생성)을 자동화합니다.

그럼 바로 본론으로 들어가겠습니다. 이제 정적 Figma 파일이 있고 이를 픽셀 단위로 완벽하게 제작 가능한 HTML 코드로 변환하려는 경우 이 문서에서는 이를 수행하는 단계를 보여줍니다.

시작하자.

Figma 무엇인가요?

Figma는 웹사이트, 애플리케이션, 대화형 UI 프로토타입, 로고 및 벡터 그래픽을 제작하기 위한 가장 강력하고 인기 있는 디자인 도구 중 하나입니다. 최근 통계에 따르면 Dropbox, Slack, Twitter 같은 거대 기술 기업을 포함하여 약 400만 명이 Figma 사용하고 있습니다. 그리고 흥미롭게도 디자인 스타트업에서 작년에 100억 달러라는 놀라운 가치 평가를 받았습니다.

수많은 기능이 포함된 Figma 간단하고 쉬운 프로토타입 제작을 위한 도구, 실시간 프로젝트 업데이트 모니터링 및 처리 기능을 제공하며 사용자가 디자인 검토를 받거나 제공하고 통찰력 있는 피드백을 수집할 수 있도록 해줍니다.

그러나 플러그인이 없는 Figma 사용자 인터페이스와 디자인 제작에만 능숙합니다. 코드 처리는 일반적으로 별도로 발생합니다.

HTML 코드에 대한 Figma 무엇입니까?

이제 Figma 디자인을 코드로 변환하는 것은 이야기가 다릅니다. 본질적으로 이는 Figma에서 만든 디자인 파일을 실제 사용 가능한 코드가 있는 작업 응용 프로그램으로 변환하는 프로세스를 나타냅니다. 대부분의 경우 Figma-to-HTML 프로세스는 Figma HTML 생성기 또는 Figma-to-HTML 플러그인에 의해 수행됩니다.

그러나 팀이 이 단계에 도달하기 전에 일반적으로 먼저 수행되는 다른 하위 단계 또는 단계가 있습니다.

• 아트 보드 및 시각적 모형 만들기
• 이해관계자와 POC 커뮤니케이션
• 모든 사양과 디자이너-개발자 핸드오프 교환
• 프로토타입에 대한 사용자 및 유용성 테스트 수행
• 피드백 수집, 설계 재작업 처리 및 개발 수정
• 최종적으로 완료, 승인 및 버그 없는 코드와 완전한 기능을 갖춘 앱으로 전환

개발 프로세스 자동화 - 디지털 생존을 위한 투쟁을 의미

우리는 디자인 파일을 가져와 앱으로 변환하는 앱 제작자의 집중적인 사용에 대해 이야기합니다. 그러나 정확히 무엇이 이러한 심화로 이어졌습니까? 지난 몇 년은 인플레이션, 시장 침체, 팬데믹 후유증, 여러 국가에서 계속되는 노동력 부족 등 격동의 시기였습니다. 1970년대 스태그플레이션으로 돌아가는 것 아니냐는 두려움도 있었다. 다행히도 초기 가격 충격과 많은 부문(IT 포함)의 불안정성 이후 상황은 이미 완화되고 있는 것으로 보입니다.

내가 이러한 사건을 언급하는 이유는 무엇입니까?

소프트웨어 세계와 이후 프로젝트, 앱, 사람 및 프로세스가 처리되는 방식에 큰 영향을 미쳤기 때문입니다. 그래서 기업은 진화해야 했습니다.

간소화와 자동화는 생존에 매우 중요해졌습니다. 그리고 로우코드 도구는 이를 달성하기 위한 도구로 변모했습니다.

공백을 채우는 App Builder와 같은 로우코드 툴은 이제 혁신과 디지털 트랜스포메이션을 촉진하는 것부터 개발 팀의 역할을 재정의하는 것까지 여러 수준에서 기업, CTO, 개발 팀 리더 및 개발자의 역량을 강화할 정도로 성숙해지고 있습니다.

이러한 방식으로 웹 사이트 디자인, 프로토타이핑, 몇 번의 클릭만으로 완전한 디자인 파일을 프로덕션 준비 앱으로 전환, 데이터 형식 지정, 코드 민주화 등에 이르기까지 디자인 및 개발의 모든 것을 처리할 수 있는 리소스를 갖게 됩니다. 이 모든 것이 코드를 직접 작성할 필요 없이 매우 간단하고 직관적인 방식으로 이루어집니다.

App Builder를 사용하여 Figma 디자인을 HTML 코드로 변환하는 방법

이제 WYSIWYG 로우 코드 App Builder를 사용하면 Figma 디자인 파일에서 반응형 HTML CSS 코드와 완전한 기능을 갖춘 라이브 앱을 더 쉽고 빠르게 생성할 수 있습니다. 앞서 언급했듯이 Figma에서 만드는 모든 것은 Indigo.Design 이라는 디자인 시스템을 사용하므로 모든 스타일 사양과 테마는 실제 UI 구성 요소와 일치합니다.

그러나 시작하기 전에 몇 가지 전제 조건이 있습니다.

• 계정에 로그인하거나 App Builder 무료 평가판을 시작하세요.  
• ​Figma Indigo.Design UI 키트 사본을 받고 Indigo.Design Figma 플러그인을 Figma 플러그인에 저장한 후 처음부터 시작하고 싶지 않은 경우 샘플 앱 중 하나를 받으세요. 

귀하의 계정 유형에 따라 Figma UI Kit 사용을 시작하기 위해 다음 단계를 수행하거나 아래 단계를 수행할 수 있습니다.

초기 단계에는 Open App Builder, "Crete 새 응용 프로그램", 마지막으로 "자산 가져오기"가 포함됩니다.

Figma Pro 사용자 계정

Professional Figma 계정이 있는 경우 단계는 다음과 같습니다.

1단계: Figma 커뮤니티에서 UI Kit의 복제본을 만듭니다. 파일을 복제(사본 받기)하면 "최근 파일"에 배치됩니다.

الخطوة 2 : 파일을 열고 파일 이름 바로 옆에 있는 갈매기 모양 화살표를 사용하여 파일을 팀 공간으로 이동합니다.

الخطوة 3 : 파일이 이동되면 파일을 열고 자산 패널로 이동합니다. 팀 라이브러리 아이콘을 클릭하면 이 파일을 라이브러리로 게시할 수 있으며, 이 라이브러리는 모든 스타일, 타이포그래피 및 구성 요소를 나머지 팀에 배포합니다.

이제부터 프로젝트를 시작하거나 팀 공간 내에서 기존 프로젝트를 계속 작업할 때마다 이 라이브러리를 활성화하고 프로젝트 내에서 직접 사용할 수 있습니다. 활성화는 자산 > 팀 라이브러리 아이콘에서 이루어지> 스위치를 사용하여 라이브러리를 활성화합니다.

Figma 무료 사용자 계정

"무료 계정"이 있는 사용자의 경우 UI Kit를 사용하는 방법은 매우 유사합니다.

الخطوة 1 : Figma 커뮤니티에서 파일을 복제한 후에는 최근 파일에서 팀 공간으로 이동해야 합니다.

الخطوة 2 : 파일을 열고 파일 이름 바로 옆에 있는 갈매기 모양 화살표를 사용하여 파일을 팀 공간으로 이동합니다.

​무료 Figma 요금제를 사용하면 최대 3개의 프로젝트를 가질 수 있으며 각 프로젝트에는 3개의 파일만 포함될 수 있습니다.

الخطوة 3 : 파일이 이동되면 파일을 열고 자산 패널로 이동합니다. 팀 라이브러리 아이콘을 클릭하면 이 파일을 라이브러리로 게시할 수 있으며, 이 라이브러리는 색 스타일과 타이포그래피만 나머지 팀에게 배포합니다.

이제부터 프로젝트를 시작하거나 팀 공간 내에서 기존 프로젝트를 계속 작업할 때마다 이 라이브러리를 활성화하고 프로젝트 내에서 직접 사용할 수 있습니다. 활성화는 자산 > 팀 라이브러리 아이콘에서 이루어지> 스위치 단추를 사용하여 라이브러리를 활성화합니다.

몇 가지 최종 생각 또는 프로세스를 자동화하는 이유: 이유 및 이점

인간의 프로그래밍 기술은 소프트웨어 개발의 원동력이지만 효율성을 촉진하고 극대화하는 원동력은 자동화와 설계-코드 솔루션입니다. 완벽한 픽셀의 고품질 HTML 코드를 즉시 생성할 수 있는 기능을 갖춘 App Builder와 같은 도구는 앱 개발 프로세스를 몇 주 또는 몇 달이 아닌 며칠로 단축합니다.

App Builder를 사용하여 Figma 디자인을 HTML로 내보낼 때 얻을 수 있는 핵심 이점은 무엇입니까?

• 수동 HTML 변환 프로세스를 건너뜁니다.
• 코드 자산을 생성하려는 구성 요소를 완전히 제어할 수 있습니다.
• target frameworks 간의 component 및 feature-parity를 달성합니다.
• 앱 미리보기를 공개적으로 공유할 수 있습니다.
• 데이터 바인딩을 보다 효율적으로 처리합니다.
• 모든 것이 드래그 앤 드롭 방식으로 이루어지며 진정한 WYSIWYG 개발 경험을 제공합니다.
• 도구 상자에는 실제 UI 구성 요소, 여러 유형의 보기 레이아웃, 보기 간의 탐색/구조가 있습니다.
• 앱 개발 주기의 모든 단계에 참여할 수 있는 개발자, 디자이너, PM, 이해관계자 간의 협업을 촉진하는 단일 정보 소스 역할을 합니다.
• 공통 애플리케이션 모델을 사용하므로 프레임워크에 구애받지 않는 방식으로 애플리케이션을 설명할 수 있습니다.
• 완전한 디자인 시스템인 Indigo.Design을 통합하여 UX, 제품 관리 및 제품 개발을 통합합니다.
• ​App Builder AI로 AI 기능을 제공합니다.

방정식 –App Builder + Sketch / Figma 결과로 디자인-코드가 결정됩니다.

개발팀이 App Builder에 도입한 최신 제품 업데이트 및 개선 사항을 통해 모든 것을 충족하는 최고의 디자인 투 코드 툴로 거듭났습니다. Sketch 지원은 이미 제공되고 있으며, 11월 App Builder 릴리스에는 머티리얼용 Indigo.Design UI 키트(Figma)가 새롭게 추가되었습니다.

이를 사용하면 자동화와 강력한 구성 요소 세트, 패턴, 스타일 및 사용자 정의 옵션을 통해 완전한 앱을 개발하는 데 필요한 모든 도구를 얻을 수 있습니다. 가장 좋은 부분? 모든 정적 Figma 디자인은 클릭 한 번으로 실제 UI 구성 요소, 브랜딩 및 스타일을 갖춘 대화형 반응형 앱이 됩니다.

관심이 있으시면 Sketch 디자인을 코드로 전환하는 방법에 대해 자세히 읽어보십시오.