Design/Tool (Figma, Framer)

[Figma] Shift + 방향키로 이동 간격 8px로 바꾸는 방법

디쟈이너 2024. 6. 24. 07:54

Figma는 UI/UX 디자이너들이 효율적으로 작업할 수 있도록 다양한 기능을 제공합니다. 그 중에서도 도형이나 레이어를 미세하게 조절할 수 있는 Nudge Amount 설정은 작업의 정확성을 높여줍니다. 이번 글에서는 Nudge Amount를 설정하고 활용하는 방법에 대해 소개하겠습니다. 

 

Nudge Amount란 무엇인가요?

Nudge Amount는 Figma에서 화살표 키를 사용해 도형이나 레이어의 위치를 이동할 때, 한 번에 얼마나 이동할지를 설정하는 기능이에요. 기본 설정은 작은 이동(Small Nudge)은 1픽셀, 큰 이동(Big Nudge)은 10픽셀이에요. 이 값을 조절하면 작업이 훨씬 더 수월해진답니다.

 

Nudge Amount 설정하기

Nudge Amount를 설정하는 방법은 다음과 같습니다:

Figma Shift로 이동 간격 조정

  1. Figma 메뉴에서 Preferences 선택
    • Figma 창 상단의 메뉴 바에서 'Preferences'를 클릭합니다.
  2. Nudge Amount 설정 변경
    • 'Preferences' 메뉴에서 'Nudge Amount' 옵션을 선택합니다.
    • Small Nudge와 Big Nudge 값을 원하는 값으로 설정합니다. 예를 들어, Big Nudge를 8로 설정하면 특정 배수로 도형을 이동하거나 크기를 조절할 때 매우 유용합니다.

8배수 그리드 디자인의 중요성

웹이나 앱을 디자인할 때, 8의 배수로 그리드를 설정하는 경우가 많아요. 이 방법은 Material Design 가이드에서 권장하는 방식으로, 몇 가지 큰 장점이 있어요:

 

  • 디자인 일관성 유지
    • 모든 요소를 8의 배수로 맞추면 디자인의 일관성을 쉽게 유지할 수 있습니다. 이는 사용자가 일관된 경험을 할 수 있도록 도와줍니다.
  • 개발자와의 협업 효율성 향상
    • 개발자는 리소스나 크기 단위를 8의 배수로 통일하면 디자이너와의 작업에서 오차를 줄이고, 작업이 수월해집니다. 이는 전체 프로젝트의 생산성을 높이는 데 큰 도움이 됩니다.

 

8 point grid system

8배수 그리드 디자인과 Nudge Amount의 효율성

Figma에서 Nudge Amount를 설정하면 8배수 그리드 디자인을 더욱 효율적으로 구현할 수 있습니다. 다음은 그 활용 방법입니다:

  • 도형 이동
    • 도형을 선택한 후 화살표 키를 누르면 Small Nudge 값만큼 이동합니다.
    • Shift 키를 누르면서 화살표 키를 누르면 Big Nudge 값만큼 이동합니다.
  • 도형 크기 조절
    • Cmd(또는 Ctrl) 키를 누르면서 화살표 키를 누르면 도형의 크기를 Small Nudge 값만큼 조절할 수 있습니다.
    • Shift 키를 함께 누르면 Big Nudge 값만큼 크기가 조절됩니다.

이처럼 Nudge Amount를 적절히 설정하고 활용하면, 픽셀 단위로 정밀한 작업이 요구되는 프로덕트 디자인에서 시간과 노력을 절약할 수 있습니다. 특히 8의 배수로 움직이는 기능은 그리드 시스템을 사용하는 디자인에서 큰 도움이 됩니다.

 

Figma의 Nudge Amount 설정은 UI/UX 디자이너가 작업을 더 효율적으로 수행할 수 있도록 돕는 강력한 기능이에요. 자신의 작업 스타일과 필요에 맞게 Nudge Amount를 설정하고 활용해 보세요. 이를 통해 작업의 정밀도와 효율성을 크게 향상시킬 수 있을 거예요.

 
 
 

 

 
반응형