figma2분 읽기

큐레이션 요약

피그마 가이드 출시 |

원문 읽기(새 탭에서 열림)

Figma는 사용자 요청이 많았던 Guides 기능을 도입해 디자인 요소를 정렬하고 배치할 수 있도록 했다. Guides는 자를 기준으로 빠르게 생성·이동할 수 있으며, 프레임 단위로 관리하거나 픽셀 단위로 조정할 수 있다. Layout Grids보다 간편하게 사용할 수 있는 보조선이라는 점이 핵심이다.

Guides의 목적과 특징

  • Guides는 디자인 요소의 위치를 맞추기 위한 가로·세로 기준선이다.
  • Layout Grids보다 생성과 조작이 빠르다.
  • 2017년 출시 당시 6개월 동안 약 100건의 사용자 요청이 접수될 정도로 수요가 높았다.
  • Figma는 이 기능을 인턴 Shirley Miao와 엔지니어 Kenrick Rilee가 함께 개발했다고 소개한다.

Guides 표시와 생성

  • 메인 메뉴에서 View → Show rulers를 선택해 자를 표시한다.
  • 캔버스 상단의 가로 자 또는 왼쪽의 세로 자 위에 마우스를 올리면 오프셋 값이 표시된다.
  • 원하는 위치의 자를 클릭하면 해당 위치에 Guide가 생성된다.
  • 자의 여러 위치를 클릭해 여러 개의 Guides를 한 번에 만들 수 있다.

Guides 이동과 삭제

  • 생성된 Guide는 얇은 빨간 선으로 표시된다.
  • Guide를 드래그해 다른 오프셋으로 이동할 수 있다.
  • 삭제하려면 Guide를 선택한 뒤 Delete 키를 누르거나 화면 바깥으로 드래그한다.
  • 자 보기 기능을 끄면 Guides도 화면에서 사라진다.
  • 실수로 위치를 변경한 경우 Command + Z로 되돌릴 수 있다.
  • 화살표 키를 사용하면 Guide를 픽셀 단위로 미세 조정할 수 있다.

프레임 수준의 Guides

  • Guide를 프레임 안으로 드래그하면 해당 프레임에 종속된 프레임 수준 Guide가 된다.
  • 이를 활용하면 전체 캔버스에 Guides가 과도하게 표시되는 것을 줄일 수 있다.
  • 프레임 수준 Guides는 최상위 프레임에서만 작동한다.
  • Guides가 포함된 프레임을 다른 프레임 안으로 이동하면 해당 Guides는 사라진다.

실용적인 활용

  • 자를 켠 뒤 주요 콘텐츠의 좌우 여백이나 상하 정렬 기준을 Guide로 표시하면 배치를 일관되게 유지할 수 있다.
  • 여러 화면이나 컴포넌트의 공통 정렬선을 빠르게 확인할 때 유용하다.
  • 세밀한 간격 조정에는 화살표 키와 실행 취소 기능을 함께 활용하는 것이 좋다.
  • 복잡한 캔버스에서는 프레임 수준 Guides를 사용해 화면별 기준선을 관리하는 것을 추천한다.

큐레이션 요약을 이어서 읽어보세요.