[피그마] 오토레이아웃 베타 업데이트 ( Figma to Protopie )

Protopie가 디자이너들이 오랫동안 기다려온 '오토레이아웃' 기능을 베타버전으로 출시했습니다. 이는 특히 Figma에서 작업 후 Protopie로 인터랙션을 구현하는 디자이너들에게 매우 반가운 소식입니다.

주요 지원 기능

• 리사이징
• 방향 설정
• 요소 정렬
• 패딩
• 갭 조절

현재 베타 단계의 한계점

현재는 베타 버전이기 때문에 Figma의 모든 오토레이아웃 기능을 완벽하게 지원하지는 않습니다. 아직 지원되지 않는 기능들은 다음과 같습니다:

• 스트로크 속성
• 캔버스 스태킹
• 최대/최소값 설정

 

 

 

사용 방법

Figma에서 Protopie 플러그인을 통해 간단히 임포트할 수 있습니다. 다만, 주의할 점이 있습니다: 최상위 프레임에 오토레이아웃이 적용되어 있을 경우 속성이 손상될 수 있으니 유의하시기 바랍니다.

앞으로도 지속적인 업데이트를 통해 더 많은 기능이 추가될 예정이라고 하니, 디자이너들의 워크플로우가 한층 더 효율적으로 개선될 것으로 기대됩니다.

 

 

 

ProtoPie에서 Auto Layout은 어떻게 작동하나요?

ProtoPie Studio에서 Auto Layout은 특정 레이아웃 설정에 따라 컨테이너 내 요소를 자동으로 정렬하여 반응형 디자인을 쉽게 만듭니다.

Auto Layout 적용 방법

1. 속성 패널 사용하기:
   • 컨테이너를 선택하고 속성 패널에서 Auto Layout 옵션을 선택합니다.
2. 컨텍스트 메뉴 사용하기:
   • 단일 또는 다중 객체를 선택한 뒤, 우클릭하여 Add Auto Layout을 선택합니다. 선택한 객체는 자동으로 컨테이너로 이동하고 Auto Layout이 적용됩니다.
3. 단축키 사용하기:
   • 단일 또는 다중 객체를 선택하고 Shift + A를 눌러 Auto Layout을 적용합니다.
4. 메뉴 바 사용하기:
   • 객체를 선택한 후 메뉴 바에서 Object → Add Auto Layout을 클릭합니다.

Auto Layout을 제거하려면 속성 패널에서 Auto Layout 옵션의 선택을 해제하거나, 컨테이너를 우클릭한 후 Remove Auto Layout을 선택하세요.

Auto Layout이 활성화되면 다음과 같은 작업을 수행할 수 있습니다:

• 레이아웃 방향 설정: 속성(Property) 패널에서 가로(horizontal) 또는 세로(vertical) 정렬을 선택합니다.
• 자식 항목 재정렬: Layers 패널을 통해, 키보드 화살표를 사용해, 또는 캔버스에서 직접 자식 항목을 정렬할 수 있습니다.
• 자식 항목 크기 조정 제어: 자식 항목이 자동으로 부모 컨테이너를 채우도록 크기를 조정할 수 있습니다.
• 항목 간 간격 조정: 고정 간격을 설정하거나, 항목이 가용 공간에 맞게 자동으로 조정되도록 설정할 수 있습니다.

💡 참고: Mask 레이어, 단일 논컨테이너 레이어, 또는 오디오 레이어를 작업 중이라면 Auto Layout 옵션이 표시되지 않습니다.

ProtoPie에서 지원되는 Auto Layout 속성

ProtoPie Studio에서 Auto Layout을 적용할 수 있는 속성은 다음과 같습니다:

1. 크기 조정 (Resizing)
2. 방향 (Direction)
3. 정렬 (Alignment)
4. 패딩 (Padding)
5. 간격 (Gap)

Auto Layout에서 지원되는 속성에 대해 더 알아보기 위해서는 다음 문서를 확인해 주세요.

Figma에서 Auto Layout 가져오는 방법

이번 릴리스로 ProtoPie는 Figma의 핵심 Auto Layout 속성을 대부분 지원하여 Figma에서 주요 Auto Layout 설정을 유지하며 가져올 수 있습니다. 하지만 'strokes', 'canvas stacking', 'align text baseline', max/min 크기 옵션 같은 고급 기능은 아직 지원되지 않습니다.

💡 매끄러운 가져오기를 위한 팁:

• 가져오기 중에는 Figma와 ProtoPie가 데스크톱에서 동시에 열려 있는 상태를 유지하세요.
• Figma에서 최상위 프레임을 ProtoPie Studio로 가져오면 해당 프레임은 씬으로 변환되어 Auto Layout 설정을 포함한 원래 속성이 삭제됩니다. 그러므로 Figma의 최상위 프레임에 Auto Layout이 적용되어있다면 ProtoPie Studio로 옮겨지지 않고 씬에서 제외됩니다.

Figma 임포트에 대해 더 알아보기

자주 묻는 질문

Auto Layout이 인터랙션을 함께 작업하고 미리보기 윈도우나 ProtoPie Player 어플에서 미리보기가 가능한가요?

초기 베타 릴리스에서는 Auto Layout 기능과 인터랙션이 함께 지원되지 않습니다. 이 단계에서는 Auto Layout이 디자인 요소와 Figma로부터의 가져오기에 중점을 두어 작업 흐름의 효율성을 향상시키는 데 초점을 맞추고 있습니다.
Auto Layout이 적용된 레이어에 트리거와 응답을 추가할 수는 있지만, Preview 창에서 Auto Layout 내의 레이어가 이동하거나 크기가 조정될 경우, 다른 레이어는 캔버스에서처럼 함께 이동하거나 크기가 조정되지 않습니다.

프로토타이핑 및 인터랙션을 위한 Auto Layout 기능은 내년에 출시될 예정이니 기대해 주세요!

왜 Interactions 패널에서 Auto Layout 옵션이 보이지 않나요?

Auto Layout 옵션은 특정 조건에서만 Property 패널에서 사용할 수 있습니다. 다음은 옵션이 표시되거나 표시되지 않는 경우입니다:

Auto Layout 옵션이 Property 패널에 표시되는 경우:

1. 단일 컨테이너를 선택하고 Auto Layout을 적용할 때.
2. Main Component를 선택하고 Auto Layout을 적용할 때.
3. 두 개 이상의 레이어를 선택하고 Auto Layout을 적용할 때.

Auto Layout 옵션이 Property 패널에 표시되지 않는 경우:

1. Mask 레이어를 선택했을 때.
2. 컨테이너가 아닌 단일 레이어를 선택했을 때.
3. 오디오 레이어를 작업할 때 (오디오에는 Auto Layout을 적용할 수 없습니다).

Auto Layout 옵션이 보이지 않는다면, 선택한 항목이 지원되지 않는 경우에 해당하는지 확인하세요. 더 알아보기.

 

 

더 자세한 내용은 링크 참고해보세요! https://www.kr.protopie.io/protopie-blog/protopie-auto-layout-kr