figma·2017년 12월 11일·2분 읽기큐레이션 요약

#FigmaTip Roundup

이 글은 Figma 디자인 커뮤니티에서 공유된 짧고 실용적인 팁을 모은 네 번째 라운드업이다. 마스크, 심벌, 제약 조건, 아웃라인 모드처럼 기본 기능을 활용하면 이미지 편집과 반복 패턴 제작, 반응형 레이아웃 확인을 더 효율적으로 할 수 있다고 소개한다. 각 팁은 설명보다 실제 사용 사례와 짧은 시각 자료 중심으로 전달된다. ## 마스크로 이미지 자르기 - Figma의 마스크 기능을 사용하면 이미지나 그래픽을 원하는 형태로 잘라낼 수 있다. - 사각형에 한정하지 않고 다양한 도형을 마스크로 활용해 독특한 이미지 크롭을 만들 수 있다. - 이미지 자체를 파괴적으로 편집하지 않고 표시 영역만 조정하므로, 이후에도 위치와 크기를 수정하기 쉽다. ## 심벌로 반복 패턴 만들기 - 동일한 요소를 여러 번 배치해야 할 때 심벌을 활용하면 작업을 단순화할 수 있다. - 심벌 하나를 수정하면 연결된 인스턴스에 변경 사항을 반영할 수 있어 반복 요소 관리에 유리하다. - 심벌을 반복 배치하고 회전·이동·조합하면 장식용 패턴이나 재미있는 그래픽을 만들 수 있다. - 단순한 UI 컴포넌트뿐 아니라 창의적인 시각 디자인에도 심벌을 사용할 수 있음을 보여준다. ## 제약 조건으로 프레임 크기 조정하기 - 프레임 내부 요소에 제약 조건을 설정하면 부모 프레임의 크기가 바뀔 때 요소가 어떻게 반응할지 지정할 수 있다. - 요소를 왼쪽·오른쪽·위·아래에 고정하거나, 가로·세로 방향으로 늘어나도록 설정할 수 있다. - 다양한 화면 크기를 고려한 레이아웃을 만들 때 유용하며, 프레임 크기를 직접 조정하면서 반응 방식을 확인할 수 있다. - 원문에서는 이 팁을 소개하는 트위터 임베드가 정상적으로 표시되지 않는다. ## Command + Y로 아웃라인 모드 확인하기 - `Command + Y` 단축키로 아웃라인 모드를 전환할 수 있다. - 아웃라인 모드에서는 채우기와 시각적 스타일보다 객체의 경계와 구조를 중심으로 확인할 수 있다. - 복잡한 아이콘이나 화면 구성에서 겹친 요소, 벡터 경로, 레이어 구조를 점검할 때 도움이 된다. - 일반 보기와 아웃라인 보기를 오가며 아이콘 구성과 레이아웃을 검토할 수 있다. 실무에서는 마스크를 이미지 편집에, 심벌을 반복 요소 관리에, 제약 조건을 반응형 레이아웃 설계에, 아웃라인 모드를 구조 검수에 적용하면 좋다. Figma의 기본 기능도 조합 방식에 따라 단순한 편집을 넘어 효율적인 시스템과 창의적인 그래픽 제작에 활용할 수 있다.

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

constraintsFigma사용자 인터페이스design-tools+4

figma·2017년 5월 25일원문

워크플로에서 컨스트레인 (새 탭에서 열림)

Figma의 '제약 사항(Constraints)' 기능은 다양한 화면 크기에 대응해야 하는 현대 디자이너들의 작업을 효율적으로 만들어주는 강력한 도구입니다. 이 기능을 활용하면 요소가 상위 프레임의 크기 변화에 따라 어떻게 반응할지 정의할 수 있어, 반복적인 수작업 없이도 유연한 반응형 디자인을 완성할 수 있습니다. 결과적으로 디자이너는 한 번의 설계로 PC부터 모바일까지 모든 해상도에서 의도한 레이아웃을 유지하는 견고한 인터페이스를 구축할 수 있습니다. **버튼의 고정 위치 설정** * 모바일 UI에서 자주 쓰이는 '플로팅 액션 버튼(FAB)'과 같은 요소를 프레임의 특정 위치에 고정할 수 있습니다. * 제약 사항을 'Bottom'과 'Right'로 설정하면 화면 크기가 늘어나거나 줄어들더라도 버튼이 지정된 구석 위치를 이탈하지 않고 유지됩니다. **컴포넌트와 제약 사항의 결합** * Figma의 컴포넌트(반복되는 디자인 단위) 기능과 제약 사항을 함께 사용하면 디자인 시스템 운영 효율이 극대화됩니다. * 주요 요소에 제약 사항을 설정한 뒤 이를 컴포넌트로 만들고 다양한 기기 크기의 프레임에 복제하면, 원본의 색상이나 텍스트 스타일을 한 번만 수정해도 모든 해상도의 인스턴스에 즉시 반영됩니다. **그리드와 연동한 반응형 레이아웃** * 제약 사항을 'Stretch(늘리기)' 타입의 레이아웃 그리드와 결합하면 하단 내비게이션 바와 같은 복잡한 요소도 정교하게 제어할 수 있습니다. * 내비게이션 바 프레임에 'Left & Right' 및 'Bottom' 제약을 설정하고, 각 아이콘을 그리드 열 내부에 배치한 뒤 'Center'로 설정하면 화면 너비 변화에 맞춰 아이콘 간격이 자동으로 균등하게 조절됩니다. **유연한 테이블 셀 설계** * 텍스트와 아바타가 포함된 그룹은 'Center-Left'로, 우측의 버튼 그룹은 'Center-Right'로 제약 사항을 다르게 부여하여 테이블 셀을 구성합니다. * 이렇게 설계된 셀은 프레임 너비가 어떻게 변하든 각 정보가 좌우 끝단에 밀착되어 정돈된 형태를 유지하므로, 정보 밀도가 높은 목록형 UI를 설계할 때 매우 유용합니다. **일러스트레이션의 창의적 활용** * 제약 사항은 UI 요소뿐만 아니라 일러스트레이션이나 드로잉에도 적용하여 재미있는 시각 효과를 줄 수 있습니다. * 수평 또는 수직 제약을 활용해 이미지를 의도적으로 늘리거나 줄임으로써, 프레임 크기 변화에 따라 캐릭터의 형태가 변하는 위트 있는 디자인을 연출할 수 있습니다. 효율적인 워크플로우를 위해 단순히 요소를 배치하는 것에 그치지 말고, 초기 설계 단계부터 제약 사항을 고려하는 습관을 들이는 것이 좋습니다. 특히 컴포넌트와 레이아웃 그리드를 제약 사항과 유기적으로 연결하여 사용한다면, 복잡한 디자인 시스템도 훨씬 유연하고 일관성 있게 관리할 수 있습니다.

constraintsFigma사용자 인터페이스반응형 디자인+3

figma·2015년 12월 14일·3분 읽기큐레이션 요약

스크린 디자인을 위한 그리드

스위스 타이포그래피에서 발전한 그리드 시스템은 화면 디자인에서도 여전히 일관성과 질서를 만드는 핵심 원리다. 고정된 인쇄물과 달리 화면은 기기 크기와 밀도가 달라지므로, 디지털 디자인에는 유연한 그리드와 이를 제어할 도구가 필요하다. Figma는 제약 조건, 레이아웃 그리드, 중첩 프레임을 결합해 다양한 화면 크기에서도 구조가 유지되는 디자인을 제안한다. ## 고정된 페이지에서 유동적인 화면으로 - 1950년대 스위스 디자이너들은 정보를 체계적으로 배치하기 위해 그리드 디자인을 발전시켰다. - Joseph Müller-Brockmann, Karl Gerstner 등의 작업은 합리적인 구조와 시각적 아름다움을 함께 보여주었다. - 인쇄 디자인은 페이지 크기, 글자 크기, 행간, 여백을 정밀하게 통제할 수 있다는 전제를 가진다. - 반면 화면 디자인은 브라우저와 기기마다 크기와 화면 밀도가 달라 동일한 고정 레이아웃을 그대로 적용하기 어렵다. - 따라서 문제는 그리드 철학 자체가 아니라, 유동적인 캔버스를 다룰 수 있는 디지털 도구가 부족했다는 데 있다. ## 기존 화면 디자인 도구의 한계 - 초기 디지털 디자인에서는 기술적 제약 때문에 인쇄 디자인의 많은 원칙이 버려졌다. - 오늘날에는 타이포그래피와 레이아웃 제어 기능이 발전했지만, 도구는 여전히 고정된 아트보드 중심인 경우가 많다. - 디자이너는 여러 화면 크기의 아트보드를 반복해서 복사·수정하거나, 개발 단계에서 반응형 동작을 추측해야 했다. - iPad처럼 화면의 가장자리와 페이지 개념을 제공하는 기기가 등장했지만, 기기 종류가 늘면서 디지털 페이지는 어떤 크기와 형태도 가질 수 있게 되었다. - 중요한 과제는 유연성을 확보하면서도 정밀한 정렬과 통제를 유지하는 것이다. ## 제약 조건: 크기 변화에 대응하는 규칙 - 제약 조건은 프레임의 크기가 바뀔 때 내부 객체가 어떻게 반응할지 지정한다. - 객체를 프레임의 왼쪽이나 오른쪽에 고정하거나, 중앙에 배치하거나, 남은 공간을 채우도록 늘릴 수 있다. - 이를 통해 단순히 요소를 특정 좌표에 고정하는 대신, 화면 크기 변화에 따른 동작을 설계할 수 있다. - 제약 조건만으로도 가장자리 고정, 중앙 정렬, 영역 확장과 같은 기본적인 반응형 레이아웃을 구현할 수 있다. ## 레이아웃 그리드: 정밀한 반응형 정렬 - 복잡한 디자인에서는 단순한 좌우 고정이나 중앙 정렬만으로 충분하지 않기 때문에 그리드가 필요하다. - Figma의 그리드는 제약 조건이 작동하는 기준을 세밀하게 정의한다. - 예를 들어 어떤 박스가 두 개의 그리드 열을 차지하도록 설정하면, 화면이 커지거나 작아질 때 박스도 그 열의 경계에 맞춰 함께 늘어나거나 줄어든다. - 열 그리드는 웹페이지의 텍스트 흐름뿐 아니라 아이콘, 툴바, 버튼 등 다양한 요소를 정렬하는 데 사용할 수 있다. - 그리드는 열과 행, 여백, 모듈 등의 구조를 통해 디자인 전체에 일관된 시각적 리듬을 부여한다. ## 중첩 프레임: 복잡한 구조를 구성하는 방법 - 하나의 화면 안에서도 영역마다 다른 레이아웃 규칙이 필요할 수 있다. - 프레임 안에 또 다른 프레임을 배치하면 각 영역에 독립적인 그리드와 제약 조건을 적용할 수 있다. - 예를 들어 전체 화면은 큰 2열 그리드를 사용하고, 툴바나 카드 내부에는 별도의 그리드를 적용할 수 있다. - 이러한 구조는 HTML의 중첩된 `<div>`와 유사하며, 실제 개발 구조로 옮기기에도 적합하다. - Figma가 ‘아트보드’ 대신 ‘프레임’이라는 용어를 사용하는 이유도 단순한 캔버스를 넘어 계층적 레이아웃 시스템을 제공하기 때문이다. ## 현대적인 디자인 도구의 방향 - 정적인 화면을 그리는 것만으로는 다양한 디바이스 환경을 충분히 다룰 수 없다. - 디자인 도구는 과거의 인쇄 디자인 원칙을 버리기보다, 이를 유동적인 화면 환경에 맞게 재해석해야 한다. - 제약 조건, 그리드, 중첩 프레임은 각각 독립적으로도 사용할 수 있지만 함께 사용할 때 복잡한 반응형 디자인 시스템을 구축할 수 있다. - 좋은 도구는 결과물뿐 아니라 화면 크기 변화에 따른 디자인의 동작과 규칙까지 표현할 수 있어야 한다. 실무에서는 먼저 전체 화면의 그리드를 정의한 뒤, 주요 요소에 제약 조건을 설정하고, 카드·툴바·콘텐츠 영역을 중첩 프레임으로 분리하는 방식이 효과적이다. 이렇게 하면 여러 화면 크기별 시안을 일일이 복제하지 않고도 일관성과 반응성을 함께 관리할 수 있다.

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

constraintsFigma디자인 시스템HTML+3