2025년을 새로운 Figma 용 Indigo UI 키트로 시작
App Builder에서 최신 혁신 기술을 제공하게 되어 기쁩니다. 앱 개발 프로세스를 개선하도록 설계된 이 업데이트를 통해 이전보다 더 효율적으로 시각적으로 멋진 고성능 앱을 만들 수 있습니다.
즈드라브코 콜레프
5분 읽기
We’re excited to bring the latest innovations to App Builder with the new year underway. Designed to enhance your app development process, these updates empower you to create visually stunning, high-performance applications more efficiently than ever before:
- The Indigo UI Kit for Figma – which seamlessly integrates with App Builder to visually design and later generate code for Angular, Blazor, Web Components, and React.
- Automatic Value Binding for Grid Column Templates – 템플릿 구성을 단순화하여 시간을 절약하고 오류를 줄입니다.
이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder에 대해 처음 배우는 경우 조직의 애플리케이션 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 빠르게 공유하겠습니다.
- 시각적 앱 빌더 – 제품 관리자, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
- 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
- Figma 설계에서 프로덕션용 Blazor 코드, Angular 코드, React 코드 및 Web Components 코드를 생성하는 로우 코드 툴 입니다.
Figma 용 Indigo UI Kit
Indigo.Design Figma UI 키트 버전 1.5의 출시와 함께 새로운 추가 기능인 Indigo UI Kit를 발표하게 되어 기쁩니다!
Indigo UI Kit는 현대적이고 독특한 미학으로 프로젝트를 향상시키도록 설계된 맞춤형 사내 테마입니다. 기존 제품과 매끄럽게 짝을 이루는 이 키트는 창의적인 가능성을 확장하고 디자인을 돋보이게 합니다.
무엇보다도 모든 UI 키트는 App Builder와 통합되어 Angular, Blazor, Web Components 및 React에 대한 프로덕션 준비 코드를 시각적으로 디자인하고 생성할 수 있습니다.
자, 그럼 버전 1.5의 새로운 기능은 무엇일까요?
최신 업데이트는 모든 UI 키트에서 유용성, 유연성 및 사용자 지정을 개선하기 위한 일련의 개선 사항을 제공합니다.
- 구성 요소에 대한 새로운 변형:
- Calendar 및 Date Picker에 대한 수직 다중 보기 옵션.
- 작업 버튼은 날짜 선택기 및 시간 선택기를 전환하여 유연성을 높입니다.
- 향상된 사용자 정의:
- Navbar 구성 요소의 아이콘과 동작에 대한 부울 속성입니다.
- 향상된 제어를 위해 Navigation Drawer에서 항목 상태를 비활성화했습니다.
- Splitters, Tabs, and other components에 대한 더 큰 사용자 정의 옵션.
- 디자인 개선 사항:
- 텍스트 영역에 대한 힌트입니다.
- 다크 모드 구성 요소의 대비가 개선되었습니다.
- Buttons, Steppers, Grids 등에 대한 정렬, 패딩 및 색상 설정을 최적화했습니다.
UI 키트에 익숙하지 않은 경우 여기에서 여행을 시작하는 것이 좋습니다.
간단히 말해서 Indigo.Design 은 시각 디자인, UX 프로토타이핑, 코드 생성 및 앱 개발을 위한 통합 플랫폼입니다. UX에 대한 초점을 잃지 않고 가능한 한 빨리 완벽한 픽셀 앱을 제공하려는 디자인 및 개발 팀을 대상으로 합니다.
이 플랫폼은 UI Kits, Prototypes/Usability Studies 및 App Builder의 세 가지 주요 모듈로 구성됩니다. UI 키트 Figma은 생산성을 제공하는 도구를 사용하여 실제 UI 컨트롤 및 구성 요소에 매핑됩니다. 각 UI 키트는 색상, 타이포그래피, 크기 등을 엄격하게 구현하고 따릅니다. 프로토타입 및 사용성 연구는 제품 또는 기능의 사용자 경험을 측정하고 개선하는 데 도움이 됩니다. 반면에 App Builder 사용하면 사용자가 웹 환경에서 자신의 애플리케이션을 구축하고 Angular, React, Blazor 또는 Web Components 코드를 생성할 수 있습니다.
자, 가능성을 탐색할 준비가 되셨습니까? 지금 바로 최신 Indigo UI Kit를 사용해 보고 디자인 워크플로우의 수준을 높여보세요.이 블로그 게시물에 설명된 전체 설계-코드 스토리도 읽을 수 있습니다.
Grid Column Templates에 대한 자동 값 바인딩
그리드 열에 대한 템플릿을 구성하는 작업에는 구성 요소의 Value 속성을 셀의 데이터 컨텍스트에 바인딩하는 작업이 포함되는 경우가 많습니다. 이 단계는 간단하지만 간과할 수 있으며 잠재적으로 오류 또는 예기치 않은 동작이 발생할 수 있습니다.
새로운 자동 가치 결합 기능은 프로세스를 단순화하여 이 문제를 해결합니다. 어떻게 작동합니까? 지원되는 첫 번째 양식 컨트롤 구성 요소를 편집 템플릿에 추가하면 해당 Value 속성이 해당 셀의 데이터 컨텍스트에 자동으로 바인딩됩니다.
주요 세부 정보:
- 이 기능은 편집 템플릿에만 적용됩니다(Display 또는 Header 템플릿에는 적용되지 않음).
- 동일한 템플릿 또는 중첩된 구성 요소의 후속 구성 요소는 자동 바인딩되지 않습니다.
- 복사/붙여넣기 또는 부모 재지정으로 추가된 구성 요소는 영향을 받지 않습니다.
- 이 기능 이전에 생성된 템플릿에 대한 기존 구성은 변경되지 않은 상태로 유지됩니다.
- 지원되는 구성 요소 – value/checked/content를 포함하여 양식 컨트롤 값이 있는 모든 구성 요소가 지원됩니다.
이 향상된 기능은 수동 작업을 줄이고 보다 일관된 템플릿 동작을 보장하여 워크플로에 도움이 됩니다.
다른 릴리스 개선 사항
- Angular 앱은 Ignite UI for Angular 19.0.0을 사용하여 생성됩니다.
- 웹 구성 요소 앱은 Ignite UI for Web Components 5.1.2를 사용하여 생성됩니다.
- Blazor 앱은 Ignite UI for Blazor 24.2.6을 사용하여 생성됩니다.
- React 앱은 Ignite UI for React 18.7.4를 사용하여 생성됩니다.
마무리
결론적으로 App Builder 앱 개발 프로세스의 판도를 바꾸는 역할을 합니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 꼭 필요한 도구입니다. 오늘 사용해 보세요! 더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.
최신 App Builder 업데이트의 모든 기능을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 늘 그렇듯이 우리는 항상 귀하의 피드백을 받고 귀하가 추가하거나 추천하고 싶은 것을 듣게 되어 기쁩니다. 따라서 zkolev@appbuilder.dev로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 도움이 될 수 있는 방법을 알려주십시오.
