App Builder와 함께 Figma Auto Layout을 사용하여 디자인에서 코드까지의 속도 향상

자동 레이아웃은 시각적 디자인 사양을 만드는 데 일반적으로 사용되는 벡터 디자인 도구인 Figma의 인기 있는 기능입니다. 자동 레이아웃이 인기를 끄는 이유 중 하나는 레이아웃 크기 변경에 따라 자동으로 조정하거나 크기를 조정할 수 있는 디자인을 만들 수 있다는 것입니다. 디자이너는 크기 조정 측면을 높이 평가하지만 개발을 위해 핸드오프 아티팩트를 공유할 때 이점도 제공합니다.

이 문서는 핸드오프 작업을 수행하고 디자인-코드 프로세스 관련 도구를 활용하여 그 어느 때보다 빠르게 제공하려는 UI/UX 디자이너와 웹 앱 개발자를 돕기 위한 것입니다.

핸드오프 문제

핸드오프 아티팩트는 개발 팀이 최종 솔루션을 구축하는 데 사용하는 UX 사양을 나타냅니다. 그러나 디자인 팀이 생성한 아티팩트와 개발자 요구 사항 사이에는 항상 마찰이 있었습니다. 이러한 마찰은 디자인 도구에서 생성된 정적 레이아웃 및 사양과 구현을 위한 적응형 레이아웃으로 거슬러 올라갈 수 있습니다. 이러한 마찰은 개발 팀이 정적 사양을 기반으로 설계를 수동으로 (재)구현함으로써 더욱 악화됩니다. 이로 인해 구현이 설계 사양과 일치하는지 확인하는 비효율적인 검토 프로세스가 시작됩니다.

App Builder ^TM 솔루션

자동 레이아웃은 UI 레이아웃 지정과 관련하여 디자인과 개발의 두 세계를 연결하는 데 도움이 됩니다. UI 요소에 대한 동적 크기 조정과 상대 위치 지정을 사용함으로써 Figma의 디자인은 예상되는 웹 레이아웃(예: CSS Flexbox)에 더 가까워졌습니다. 그러나 이것이 디자인을 (재)구현해야 하는 문제와 App Builder 적합한 위치를 해결하는 것은 아닙니다.

자체적으로 App Builder 사용하면 소프트웨어 팀이 Angular, Blazor 및 WebComponent용 웹 앱을 처음부터 신속하게 설계하고 생성할 수 있습니다. Figma에서 생성된 디자인의 경우 App Builder 디자인을 수동으로 구현할 필요성을 줄여 힘을 배가시키는 역할을 합니다. Figma 용 Indigo.Design UI 키트를 사용하여 디자인을 생성한 경우 App Builder에서 편집할 수 있는 픽셀 완벽한 앱으로 디자인을 게시할 수 있습니다. 즉, 정적인 사양과 지루한 리뷰를 없애는 것입니다. 그리고 한 단계 더 나아갑니다. Figma에서 만든 앱은 전문적인 UI 구성요소, 일관된 테마를 위한 디자인 토큰, 자동 레이아웃 설정을 기반으로 하는 CSS Flexbox 레이아웃을 사용합니다.

Figma의 자동 레이아웃이란 무엇입니까?

자동 레이아웃을 사용하면 디자이너는 레이아웃이나 콘텐츠의 크기 변경을 신속하게 수용할 수 있는 적응형 디자인을 만들 수 있습니다. 이러한 방식으로 디자인된 콘텐츠는 일관된 간격과 정렬을 유지하면서 필요에 따라 확장되거나 축소됩니다.

사용자가 브라우저 창의 너비를 제어한다는 점을 고려하면 필요하지 않은 경우 고정 높이와 너비를 사용하지 않는 것이 가장 좋습니다. 대신, 사용 가능한 공간에 따라 콘텐츠가 리플로우될 수 있도록 유동적인 크기 조정 및 상대적 간격을 고려하는 것이 좋습니다. 자동 레이아웃을 통합하는 가장 기본적인 예 중 하나는 추가된 텍스트에 따라 버튼 크기가 확대되거나 축소될 수 있는 버튼입니다.

Figma에서 자동 레이아웃을 사용하는 방법은 무엇입니까?

자동 레이아웃을 활성화하려면 UI 요소를 Figma의 프레임에 추가해야 합니다. 프레임은 웹 레이아웃의 DIV와 같습니다. 자동 레이아웃을 활성화한 후 프레임 내부의 UI 요소는 절대(x, y) 위치가 아닌 서로를 기준으로 위치가 지정됩니다. UI 요소를 서로 상대적으로 배치하면 간격을 조정하지 않고도 요소의 순서를 쉽게 변경할 수 있습니다.

다음은 자동 레이아웃이 활성화되었을 때 사용할 수 있는 기능에 대한 간략한 요약입니다.

방향	컨테이너 내에서 하위 레이어의 스택이 수평인지 수직인지 정의합니다. 수평 하위 요소는 왼쪽에서 오른쪽으로 나란히 배열됩니다. 수직 하위 요소는 다른 요소 위에 배치됩니다.
조정	정렬은 프레임 내에서 하위 요소가 배치되는 방식을 제어합니다. 절대 위치를 사용하여 모든 하위 요소에 대한 정렬 설정을 재정의할 수 있습니다. 정렬 속성은 다음 값을 사용할 수 있습니다. 왼쪽 상단, 중앙 상단, 오른쪽 상단 중앙-왼쪽, 중앙-중앙, 중앙-오른쪽 하단 왼쪽, 하단 중앙, 하단 오른쪽; 포장된/공간 사이
간격	방향에 따라 수직 또는 수평 간격이 될 수 있으며 각 하위 요소 사이의 간격을 정의합니다.
심	개체 주위의 공백을 결정하며 위쪽 및 아래쪽, 왼쪽 및 오른쪽, 사용자 정의가 가능합니다.
크기 조정	프레임의 하위 항목에 대해 수직 및 수평일 수 있으며 세 가지 가능한 값이 있습니다. 포옹 콘텐츠 용기 채우기 고정 너비/높이.

자동 레이아웃 사용 방법에 대해 자세히 알아보기 

자동 레이아웃은 App Builder와 어떻게 작동합니까?

위에서 언급했듯이 자동 레이아웃은 CSS Flexbox 컨테이너(DIVS)와 동일합니다. 그리고 App Builder 캔버스는 기본적으로 Flexbox 레이아웃을 사용합니다. App Builder가 제공하는 핵심 가치는 정적 디자인을 클라우드에서 편집할 수 있는 웹 앱으로 변환하는 것입니다. 최상의 결과를 얻으려면 디자인이 네 가지 기본 요구 사항을 충족해야 합니다.

1. 모든 레이아웃은 Figma 자동 레이아웃(프레임 포함)을 사용하여 생성됩니다.
2. 디자인은 Indigo.Design UI 키트의 구성 요소를 사용하여 생성됩니다.
3. 타이포그래피와 색상은 UI 키트 토큰을 기반으로 설정됩니다.
4. UI의 일부를 벡터 일러스트레이션(SVG)으로 추출하려면 Figma에서 내보낼 레이어를 표시하세요.

마지막으로 디자인을 완성된 앱으로 내보내려면 Indigo.Design Figma 플러그인이 필요합니다. 디자인에서 코드로 이동하는 과정을 설명하는 이전 블로그 게시물을 확인하세요.

설계-코드 프로세스 가속화

Figma Auto-Layout은 디자이너가 UI 디자인을 더 빠르고 쉽게 만들 수 있도록 도와주는 기능입니다. 이 작업은 다음과 같이 수행됩니다.

• 레이아웃 크기나 콘텐츠에 따라 개체 크기를 자동으로 조정합니다.
• 디자인이 더 복잡해지더라도 디자인의 간격이 일관되게 유지되도록 하세요.
• UI 요소를 서로 상대적으로 배치하면 디자인이 모든 장치에서 잘 작동합니다.
• 특히 웹 디자인의 경우 디자인 사양이 기대한 것과 더 가깝기 때문에 개발자도 이를 좋아할 것입니다.

App Builder 디자인을 다시 구현할 필요성을 제거하여 핸드오프 프로세스에 가치를 더합니다. 이를 통해 설계에서 코드까지의 프로세스가 더욱 빠르고 안정적으로 이루어집니다. Figma 용 Indigo.Design 플러그인을 사용하여 디자인을 게시하면 App Builder 자동으로 정적 디자인을 웹 앱으로 변환합니다.

결과 웹 앱은 다음과 같은 몇 가지 이점을 얻습니다.

• CSS Flexbox 레이아웃을 사용합니다.
• 정적 구성 요소는 프로덕션에 즉시 사용 가능한 UI 구성 요소로 대체됩니다.
• 글로벌 테마에 연결된 색상 및 타이포그래피에 대한 변수입니다.
• 개발자가 웹 앱을 편집하고 Blazor, Angular 및 Web Components 용 앱 소스 코드를 생성할 수 있습니다.

시도해 볼 준비가 되셨나요?