본문 바로 가기

현업 디자이너 420명을 대상으로 실시한 리서치를 통해 임베디드 UI/UX 디자이너들의 실제 업무 고민, 사용하는 도구, 워크플로우를 알아보세요.

Three different GUI designs for a washing machine, a medical device, and an industrial automation screen, created in Figma and ported to the device with Figma to Qt.

FIGMA TO Qt

Figma 디자인을 제품에
적용하는 가장 빠른 방법

Figma에서 완벽해 보이는 디자인도 실제 제품에서는 그대로 재현되지 않는 경우가 많습니다. 디바이스에는 제약이 있고, 디자이너와 개발자가 분리되어 작업하는 경우가 많기 때문입니다. Figma to Qt는 이러한 문제를 해결하기 위한 플러그인입니다. 반복 작업은 줄이고, 디자인이 실제 제품에 그대로 구현될 수 있도록 도와줍니다.


Figma 커뮤니티에서 공개 베타버전 다운로드하기 문의하기

임포트 없이도 Figma 안에서 바로 사용 가능한 Figma to Qt

Figma to Qt는 Figma 내에서 실행되는 전용 변환 도구로, 자동 생성 도구가 아니기 때문에 예측 가능하고 신뢰할 수 있는 결과물을 만들어낼 수 있습니다.
이제 Figma에서 최종 승인한 내용 그대로 개발자에게 전달하세요.

 

Live preview of GUI design at different screen resolutions in Figma's plug-in Figma to Qt.
기기에 적용되기 전에 미리 확인하세요

Figma 브라우저에서 GUI 디자인을 실시간으로 확인하세요

Figma to Qt는 브라우저에서 GUI 디자인을 실제 작동하는 인터페이스로 미리 보여줍니다. 단순한 프로토타입이 아닌, 기기에서 실행될 실제 QML 코드를 확인할 수 있습니다.

여러 화면을 미리 보고, 정확한 기기 해상도로 확인하며, 모든 디자인 요소가 코드로 어떻게 매핑되는지 확인하세요. 도구를 전환하거나 개발자를 기다릴 필요 없이, Figma 내에서 모든 작업을 수행할 수 있습니다.

The issues tab of the Figma's plugin Figma to Qt, highlighting the issues with porting a GUI design to the device.
디자인의 실제 작동 모습을 확인하세요

실제 기기에서 동작할 모습을 고려하여 GUI를 디자인하세요

Figma 플러그인이 컴포넌트를 검사하여 QML로 원활하게 변환되지 않는 부분을 하이라이트 표시해 줍니다.

작업이 이미 끝난 후가 아니라, 아직 수정하기 쉬운 초기 단계에서 잠재적인 이슈를 바로 파악할 수 있습니다.

수정해야 할 부분이 있다면 무엇이 문제인지, 그 이유가 무엇인지 명확하게 확인할 수 있으며, 대부분의 경우 클릭 한 번으로 바로 수정할 수 있습니다. 이제 디자인 팀은 확신을 갖고 기한 내에 디자인 작업을 완료할 수 있습니다.

The QML code generated from your design system elements with the Figma's plug-in Figma to Qt.
Figma 디자인을 코드로 변환하세요

개발자가 추측할 필요 없이 실행 가능한 코드로 변환하세요

Figma to Qt는 GUI 디자인을 Qt Creator, Visual Studio Code, Qt Design Studio 에서 개발자가 바로 열 수 있는 깔끔한 QML 코드로 변환합니다. PDF도, 프로토타입 링크도, 디자인을 보고 추측할 필요도 없습니다.

인터랙티브 컴포넌트는 안정적이며 검증된 작동하는 Qt Quick Controls로 내보내집니다. 색상과 스타일 선택 사항은 디자인 토큰으로 반영되어 코드가 디자인 시스템과 항상 동기화됩니다.

개발자도, AI 어시스턴트도, 디자인 팀에서 승인한 그대로의 결과물을 받게 됩니다.

Figma to Qt 시작하기

플러그인을 다운로드하고 Figma 디자인을 현실로 구현해 보세요.

Figma to Qt 무료 다운로드 문의하기

Figma to Qt가 디자인을 QML 코드로 변환하는 방법

데모 동영상을 통해 Figma to Qt가 플레이그라운드 프로젝트의 Figma 디자인을 어떻게 실제 작동하는 QML 코드로 변환하는지 확인해 보세요.

 

플레이그라운드
프로젝트

실제 의료용 세척 펌프 주입기 사용자 인터페이스를 활용하여 Figma에서 Qt로 이어지는 전체 워크플로우를 직접 체험해 보세요.

문서

Figma 디자인부터 실행 가능한 QML 코드까지 전체 워크플로우를 다루는 Figma to Qt 문서를 확인해 보세요.

자주 묻는 질문

Figma to Qt는 Figma 커뮤니티에서 무료로 다운로드할 수 있습니다. 작동 방식에 대해 더 알아보려면 자주 묻는 질문을 확인하세요.

Figma to Qt이란 무엇인가요?

Figma to Qt은 Qt가 개발한 Figma용 플러그인입니다. 이는 디자이너가 타겟 임베디드 디바이스에 바로 배포할 수 있는 그래픽 사용자 인터페이스(GUI) 및 휴먼 머신 인터페이스(HMI)용 Figma 디자인을 만들 수 있게 해줍니다. Figma to Qt을 사용하면, 디자이너들은 변경과 반복 작업을 최소화면서 GUI 디자인의 의도가 최종 제품에 그대로 구현된다는 확신을 가질 수 있습니다.

Figma to Qt는 AI 도구를 사용하여 Figma 디자인을 코드로 변환하는 것과 어떻게 다른가요?

Figma to Qt는 AI 도구를 사용하여 Figma 디자인을 코드로 변환하는 것과 몇 가지 중요한 차이가 있습니다.

첫째, Figma to Qt는 Figma 내에서 작동하므로, 현재 작업 중인 환경을 벗어나지 않고도 디자인을 준비하고, 미리 보고, 검수할 수 있습니다.

둘째, Figma to Qt는 Figma GUI 디자인을 QML로 변환하기 위해 특별히 제작된 제품입니다.

마지막으로, Figma to Qt는 생성형 도구가 아닌 Figma 전용 변환 도구이므로, 예측 가능하고 신뢰할 수 있는 결과물을 만들어낼 수 있습니다. Figma to Qt를 통해 변환한 QML 코드는 내보내기 전 미리 보고, 검증하고, 승인했던 프로젝트와 정확히 일치합니다.

예를 들어, Figma to Qt는 개발자들이 실제 Qt 프로젝트에서 이미 사용하고 있는 안정적이고 검증된 빌딩 블록인 Qt Quick Controls에 컴포넌트를 매핑합니다. 이 매핑은 변경되지 않기 때문에, 개발 팀은 프로젝트, 디자인 변경, 릴리스를 불문하고 이를 신뢰할 수 있습니다.

Figma to Qt을 사용하려면 어떻게 해야 하나요?

Figma to Qt은 Figma Community에서 다운로드하여 무료로 체험하고 사용하실 수 있습니다.

Figma to Qt은 무료인가요?

네 맞습니다. Figma to Qt은 무료로 제공되고 있으며, Figma 라이선스만 있다면 무료로 다운로드하고 사용하실 수 있습니다.

다만 Figma에서 내보낸 GUI 디자인 프로젝트를 개발 및 배포에 사용하기 위해서는 Qt 라이선스가 필요합니다.

Figma to Qt을 사용하려면 어떤 Figma 라이선스가 필요한가요?

Figma to Qt을 포함한 Figma 플러그인은 어떤 유형의 Figma 라이선스로도 사용할 수 있습니다. Figma Community에 등록된 Figma 플러그인을 사용하기 위해 유료 라이선스는 필요하지 않습니다.

Figma to Qt과 Qt Bridge for Figma는 동일한 제품인가요?

Figma to Qt은 임베디드 디바이스를 위한 GUI 디자인을 준비할 수 있도록 새롭고 개선된 기능을 갖춘 별도의 플러그인으로, Qt Bridge for Figma의 차세대 버전이라 할 수 있습니다.

새 프로젝트를 시작하시는 경우, Figma to Qt를 다운로드하여 사용해 주시기 바랍니다.

Qt Bridge for Figma를 사용하는 기존 프로젝트를 보유하신 경우, 2030년 10월까지 이메일 또는 Qt 계정 지원 센터를 통해 지원을 받으실 수 있습니다.

현재 Qt Bridge for Figma를 사용 중인데, Figma to Qt이 자동으로 제공되나요?

Figma to Qt와 Qt Bridge for Figma는 서로 다른 두 개의 플러그인입니다.

Figma to Qt는 임베디드 디바이스용 GUI 디자인을 준비할 수 있도록 새롭게 개선된 기능을 제공하며, Figma Community에서 다운로드하고 사용하실 수할 수 있습니다.

새 프로젝트를 시작하신다면, Figma to Qt를 다운로드하여 사용해 주세요.

Qt Bridge for Figma는 레거시 솔루션입니다. Qt Bridge for Figma를 사용하는 프로젝트가 있는 경우, 2030년 10월까지 이메일 또는 Qt 서포트 센터를 통해 지원을 받으실 수 있습니다.

Figma to Qt은 QML 외 다른 언어에서도 자동 코드 생성을 지원하나요?

Figma to Qt은 Figma의 GUI 디자인을 기반으로 QML 코드를 생성합니다. 현재 해당 코드를 다른 언어와도 호환되도록 하는 방안도 검토하고 있습니다. 

Figma to Qt을 사용하려면 Qt Design Studio가 필요한가요?

그렇지 않습니다. Figma to Qt가 생성한 QML 코드는 Qt Design Studio에서 사용할 수도 있고, Qt Creator, Visual Studio Code 등 다양한 통합 개발 환경(IDE)에서도 사용할 수 있습니다. Qt Design Studio는 그 중 하나의 선택지일 뿐입니다.

Figma to Qt을 사용하려면 어떤 Qt 버전이 필요한가요?

Figma to Qt을 다운로드하고 사용하는 데에는 Qt 라이선스가 필요하지 않지만, GUI 디자인에서 내보낸 프로젝트를 사용하기 위해서는 Qt 라이선스가 필요합니다. 이 경우 Figma to Qt은 Qt 6.10부터 지원됩니다.

디자인 툴 관련 최신 소식

AI Assisted Design in Qt Design Studio: AI Assistant Just Got Smarter

Qt Design Studio 4.8.2 ships a major upgrade to the AI assistant, tran...

더 알아보기

Qt Design Studio 4.8.2 Released

Qt Design Studio 4.8.2 Is Here! Following our 4.8.1 release, which int...

더 알아보기

Figma to Qt 1.0 Is Here: The Most Reliable Way to Bring Your Design From Figma to Device

When a perfectly crafted design leaves Figma and enters a development ...

더 알아보기

지금 Figma to Qt을 사용해 보세요

Figma to Qt 바로 사용하기 문의하기