이전에 저는 구성을 기본 원리로 하여 구축된 설계 시스템이 설계 프로세스의 효율성을 향상시킬 수 있다고 제안한 설계 인터페이스의 공장 모델에 대해 썼습니다 . 그 이후로 Figma는 업데이트된 구성 요소 속성(베타) 을 출시하여 선호하는 인스턴스를 설정하고 중첩 구성 요소의 속성을 노출할 수 있습니다.
나를 가장 흥분시키는 것은 이러한 업데이트 가 동일하거나 여러 프로젝트에서 쉽게 사용할 수 있도록 엔터티로 함께 패키지된 복잡한 구성 가능한 구성 요소 시스템 을 생성할 가능성을 열어준다는 것입니다. 이러한 시스템은 또한 구성 가능한 UI 키트를 사용하여 이러한 디자인 시스템을 확장하기 위한 강력한 전략에 중점을 둔 새로운 유형의 디자이너를 위한 디자인 시스템 및 열린 길을 통해 새로운 사고 및 계획 방식으로 이어질 수 있습니다.
업데이트 개요
주로 구성 요소 인스턴스에 대한 더 많은 구성 기능을 찾고 있습니다. 구성 가능한 구성 요소는 제품 전체의 일관성을 보장하는 데 필요한 노력을 줄일 수 있으므로 바람직합니다. 일단 설정되면 잠재적으로 특정 디자인 시스템과 그 기본 원칙 및 지침에 익숙하지 않은 디자이너가 빠른 목업을 만들 수 있습니다.
선호하는 인스턴스
선호하는 인스턴스를 사용하면 특정 구성 요소와 연결할 수 있는 구성 요소 인스턴스를 선별할 수 있습니다. 이전에는 이를 달성하기 위해 명명 규칙을 유지하거나 구성 요소를 함께 그룹화해야 했습니다. 기본 인스턴스 속성은 이 요구 사항을 무효화하고 전역 범위에서 설정할 수 있습니다.
Figma의 상황별 패널은 Nav 구성 요소가 선택될 때 선호되는 인스턴스를 보여줍니다.
특정 아이콘을 탐색 구성 요소의 기본 인스턴스로 설정
중첩 인스턴스 노출
이 업데이트를 사용하면 중첩된 구성 요소의 속성을 노출할 수 있습니다. 즉, 더 이상 인스턴스 속성을 구성하기 위해 구성 요소 인스턴스를 파헤칠 필요가 없습니다(이 제품 업데이트를 푸시하는 데 나타난 창의성, 전략 및 방향에 대해 Figma 팀에 찬사를 보냅니다. )
Figma의 상황별 패널은 Nav 구성 요소가 선택되었을 때 중첩된 인스턴스의 속성을 보여줍니다.
오른쪽 패널의 속성을 노출하고 오른쪽 패널의 추가 작업 버튼
구성 가능한 UI 키트 생성
이전 에 Figma 에서 공장 부품 제작에 대해 설명했습니다 . 최근 Figma 업데이트는 복잡한 구성 요소를 훨씬 쉽게 만들고 사용할 수 있도록 하여 이러한 공장 구성 요소의 기능을 확장했습니다. 또한 이러한 구성 모델을 기반으로 완전히 구축된 UI 키트를 만들어 이러한 구성 요소 시스템의 한계를 뛰어 넘을 수 있습니다. 시스템 개요는 다음과 같습니다.
1. 셸: 셸은 다른 구성 요소에 연결할 수 있는 독립적이고 보편적인 개체입니다. 이 설정을 위해 두 가지 유형의 쉘을 만들었습니다. 하나는 슬롯 사이에 사용자 지정 간격 구성이 있고 다른 하나는 슬롯 사이에 고정 간격이 있습니다. 부품 구성 요소는 이러한 셸 슬롯을 통해 액세스할 수 있습니다. 부품 수는 쉘에서 생성된 슬롯의 수에 의해서만 제한됩니다.
총 7개의 행 슬롯 구성 옵션이 있는 두 가지 유형의 쉘 컨테이너. 상단에는 사용자 정의 간격 설정이 있고 하단에는 고정 간격 설정이 있습니다.
쉘에는 사용자 정의 및 고정 간격 요소가 있습니다.
2. 부품 및 원자재: 원자재는 기본 수준에서 생성되는 모든 구성 요소입니다. 부품은 다양한 원료를 포장하는 부품입니다. 이 설정은 Material Design 3.0 디자인 시스템의 원자재와 이러한 원자재를 사용하여 만든 부품을 사용합니다.
입력 필드, 버튼 등과 같은 구성 요소가 있는 원자재 및 2열 입력, 레이블이 있는 입력 등과 같은 원자재의 조합인 부품
원자재 및 부품
3. 템플릿 구성 요소: 그런 다음 쉘을 템플릿으로 패키징합니다. 이 경우 전화 모형을 사용하고 있습니다. 템플릿 구성 요소를 설정하려면 중첩 구성 요소의 속성을 노출하고 모든 부품 및 셸의 명명 규칙이 이 구성 요소와 일치하여 이 수준에서 액세스할 수 있도록 해야 합니다. 컨텍스트 패널은 철저히 고려하지 않으면 불필요한 속성에 쉽게 압도될 수 있으므로 이러한 설정의 위생을 통해 약간의 주의와 생각이 필요합니다.
구성에 사용할 수 있는 다양한 속성을 보여주는 상황별 패널이 있는 Figma의 팩토리 템플릿
템플릿은 최상위 수준에서 필요한 속성만 노출합니다.
시스템 사용
이러한 구성 가능한 키트는 설계 시간을 크게 단축할 수 있습니다. 이러한 구성 요소를 사용하는 와이어프레이밍 키트를 사용하면 디자이너가 아닌 사용자가 초기 단계 테스트를 위해 앱 또는 웹 제품 인터페이스 디자인을 더 쉽게 시작할 수 있습니다.
강력한 명명 규칙 및 계획이 필요하다는 점에서 이러한 시스템과 관련된 오버헤드가 있지만 이러한 오버헤드는 일회성입니다. 거꾸로, 이러한 UI 키트는 일단 생성되면 모든 새 프로젝트의 기본 또는 시작 역할을 할 수 있습니다.
다음은 설정이 인터페이스 디자인 프로세스의 속도를 높이는 방법에 대한 몇 가지 화면 캡처입니다.
행 설정: 아래 스니펫은 슬롯의 다양한 행 및 열 구성 간에 신속하게 전환하고 부품으로 채우는 방법을 보여줍니다.
행 및 열 설정을 구성하는 보편적인 방법
저충실도에서 고충실도로 전환: 저충실도 및 고충실도에서 콘텐츠 세부 정보를 효율적으로 제어할 수 있습니다. 디자이너는 저충실도 또는 고충실도 디자인에 적절한 수준을 정의하고 이를 기본 구성 요소로 설정할 수 있습니다.
Content Reel 및 Switching 레이아웃을 통한 콘텐츠 적용
자주 사용하는 구성 요소부터 시작: 팝업 모달 오버레이는 모든 제품에서 가장 많이 사용되는 기능 중 하나입니다. 구성 가능한 설정과 같은 팝업 및 대화 상자는 인터페이스 디자인 속도를 크게 향상시킬 수 있습니다.
기본 소재 3 대화 상자 팝업 구성 및 콘텐츠 적용
입력 양식과 같은 표준화된 UI 패턴은 사용자 정의를 위한 충분한 공간이 있는 동시에 일관성을 유지하는 템플릿화된 시스템으로 쉽게 변환될 수 있습니다.
구성 패턴으로 입력 양식
구성 가능한 사용자 인터페이스의 미래
이러한 구성 가능한 UI 시스템은 디자이너와 소통하는 새로운 방법을 사용하여 제품 디자인 프로세스를 통해 새로운 사고 방식을 열 수 있습니다. 추측에 따르면 다음과 같이 이동할 수 있습니다.
1. 부품 디자이너를 위한 시장
미래에는 Material Design Kit와 같은 인기 있는 디자인 키트에 이러한 구성 기능이 내장될 수 있습니다. 이는 다음 Android 디자인 프로젝트가 몇 가지 구성에 불과하다는 것을 의미할 수 있습니다.
디자이너는 기존 및 새 디자인 키트에 대한 새 구성 요소 패턴을 만들고 공유 저장소에 조립식 구성 요소로 게시하여 다른 모든 디자이너가 사용할 수 있도록 할 수 있습니다. 디자이너가 특정 디자인 키트를 구독하는 한, 잠재적으로 프로젝트 전체에서 이러한 모듈식 프리팹을 원활하게 사용할 수 있으므로 시간을 절약하고 관련된 모든 사람의 효율성을 개선할 수 있습니다.
2. 사용자 인터페이스 설계 자동화
효율적인 모듈화를 달성할 때 기계 학습 시스템은 설계 시스템의 모듈성과 구성 가능성을 활용하여 제품의 요구에 응답하는 인터페이스를 생성할 수 있어야 합니다.
현재의 설계 도구는 설계에서 패턴 및 접근 방식의 유연성을 제공하지만 유연성은 또한 인터페이스 구성 요소의 다양한 구현을 초래합니다. 이러한 구성 요소는 소프트웨어 시스템이 재사용 가능한 코드로 간소화하기 어려울 수 있습니다. 디자인 시스템이 표준 명명 규칙 및 패턴을 통해 개발 구현과 일치한다면 디자인에서 코드로의 전환이 자동화될 가능성도 있습니다.
Figma의 컨텍스트 패널은 그 방향으로 현명하게 나아가고 있으며, 디자이너가 픽셀 생성에 시간을 덜 소비하고 의사 결정에 더 많은 시간을 할애한다는 아이디어를 촉진합니다. 개발자 구현과 일치하는 구성 가능한 표준 패턴으로 디자인 시스템을 만들고 이를 공유 소비자 및 제작자 기반에 개방함으로써 그러한 현실은 그리 멀지 않습니다. 제품을 만드는 사람으로서 우리는 복잡한 문제를 해결하는 데 더 많은 시간을 할애하고 시스템을 만들고 유지 관리하는 데 더 적은 시간을 할애할 수 있어야 합니다.
