Skip to main content
Example of how to prepare GUI design in Figma for a motorbike cluster

FIGMA TO Qt

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

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


공개 베타버전 다운로드하기 문의하기

Figma to Qt 소개 및 작동 방식

 

Alerts and guide to review GUI design on the final hardware with Figma to Qt
실제 디바이스용 GUI 설계하기

디자인 이슈를 조기에 포착하세요

Figma에서 GUI 컴포넌트를 만들면, 이 플러그인이 이를 점검하고 과도하게 큰 에셋이나 지원되지 않는 속성과 같은 잠재적 제약사항을 표시해줍니다.

오토바이 클러스터, 세탁기 디스플레이 등 어떤 디바이스 인터페이스든, 초기 단계에서 필요한 조정을 수행하고 개발에 바로 전달할 수 있는 디자인을 준비할 수 있습니다.

Qt-plugin-Figma-GUI-design-tool-02-light-green
개발자에게 GUI 디자인을 전달하기

정적 파일 말고
실제 코드를 전달하세요

귀하의 Figma 디자인은 임베디드 디바이스에 최적화된 깔끔한 QML 코드로 변환됩니다.

이제 PDF나 Figma 프로토타입 링크 대신, 개발자가 Qt Design Studio, Qt Creator, 혹은 Visual Studio Code에서 바로 열어볼 수 있는 작동하는 인터페이스를 전달할 수 있습니다.

이처럼 실제 코드로 전달되는 인터페이스는 개발자가 개발을 시작할 수 있는 탄탄한 출발점이 됩니다. 그 결과 추측에 의존할 필요가 줄어들고, 시간을 절약할 수 있으며, 디자인 의도가 최종 제품에 정확히 반영되도록 할 수 있습니다.

 

Reviewing GUI design and QML code side-by-side in Figma to Qt
디자인과 코드를 나란히 검토하기

해석 차이 없이
디자인과 코드를 일치시키세요

Figma to Qt는 단순한 프로토타입이 아니라, 브라우저에서 미리 볼 수 있는 작동하는 인터페이스를 제공합니다. 생성한 QML 코드를 통해 디자인이 실제로 구현됩니다.

디자이너는 시각적 요소에, 개발자는 코드에 집중한 상태로 협업할 수 있어 검토 과정이 더욱 매끄러워집니다. 그 결과 불필요한 반복 커뮤니케이션이 줄어들고, 훌륭한 사용자 경험을 제공하기 위한 의사결정도 빠르게 진행될 수 있습니다.

Figma to Qt 시작하기

공개 베타 버전을 통해 Figma 디자인을 실제 작동하는 형태로 만들어 보세요.

Figma to Qt 지금 시작하기 문의하기

데모 영상

플레이그라운드 프로젝트 LaundriQ와 함께 Figma to Qt이 실제로 어떻게 동작하는지 확인해 보세요.

 

플레이그라운드
프로젝트

실제 세탁기 제어 인터페이스를 사용하여 Figma to Qt의 전체 워크플로우를 직접 경험해 보세요.

사용자 가이드라인

Figma to Qt 플러그인 사용을 위한 종합 가이드입니다. 이 가이드에서는 효율적인 디자인-개발 인계를 위한 모범 사례들을 다룹니다.

문서

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

자주 묻는 질문

현재 Figma to Qt은 공개 베타로 제공되고 있습니다. 작동 방식에 대해 더 알아보려면 자주 묻는 질문을 확인하세요.

Figma to Qt이란 무엇인가요?

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

Figma to Qt은 어떻게 사용할 수 있나요?

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

Figma to Qt은 무료인가요?

네 맞습니다. Figma to Qt은 현재 공개 베타로 제공되고 있으며, Figma 라이선스만 있다면 무료로 다운로드하고 사용하실 수 있습니다. 다만 Figma에서 GUI 디자인을 기반으로 내보낸 프로젝트를 개발 및 배포에 사용하기 위해서는 오픈소스 또는 Commercial 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의 차세대 버전이라 할 수 있습니다. Qt Bridge for Figma는 2028년 말까지 지원될 예정이며, 장기적으로는 Figma to Qt이 이를 대체하게 됩니다.

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

Figma to Qt과 Qt Bridge for Figma는 서로 다른 두 개의 플러그인입니다. Figma to Qt은 임베디드 디바이스용 GUI 디자인을 준비할 수 있도록 새롭고 개선된 기능을 제공하며, Figma Community에서 다운로드하고 사용하실 수 있습니다. Qt Bridge for Figma를 계속 사용하고 싶으시다면, 현재의 워크플로우 그대로 계속 사용하실 수 있습니다. Qt Bridge for Figma는 2028년 말까지 지원될 예정입니다.

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, Integrated Development Environment)에서도 사용할 수 있습니다. Qt Design Studio는 그중 하나의 선택지일 뿐입니다.

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

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

디자인 툴 관련 최신 소식

Introducing Figma to Qt: The Fastest Way to Bring Figma Designs to the Product

Let’s talk about Figma to Qt — the plugin that closes the gap between ...

Read more

Atomic Design Systems: Why the Labels Don’t Matter

Atomic design systems have emerged as a methodology for creating scala...

Read more

Qt Design Studio 4.8.1 Released

Read more

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

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