반응형 응용소프트웨어/Figma5 [Figma] Auto Layout 세부 설정 space between프레임의 크기에 따라 자동으로 간격이 설정됨(가변) - `Gap` 란에 `auto`를 입력하면 됨 Advanced Layout선을 하나의 길이로 포함시킬 것인지, 아닌지를 선택.프레임을 선택한 뒤 오른쪽 패널에서 Stroke를 추가하면 Position란에 존재한다. 1. included layout 선 포함 간격2. excluded layout 선 제외 간격 canvas stackingAuto Layout에서 오브젝트들이 겹쳤을 때 어떤 것부터 앞으로 보낼 것인지를 정한다. First on top: 왼쪽 오브젝트가 가장 위로 오도록Last on top: 오른쪽 오브젝트가 가장 위로 오도록 Absolute PositionAuto Layout 인데 위치가 자유로워야 할 경우 응용소프트웨어/Figma 2025. 4. 16. [Figma] 오토레이아웃 목적프레임에 자동으로 간격을 조절해 주는 기능.html의 flex box와 유사하다 보면 됨 단축키오토레이아웃 만들기: Shift + A 기능1. Direction 2. Gap 3. Padding 4. Alignment 응용소프트웨어/Figma 2025. 4. 15. [Figma] 배리언트(variant) 목적- 하나의 컴포넌트 안에 여러 상태, 스타일, 버전을 묶어서 관리하려고 쓰는 기능- 같은 버튼인데 상태가 다름 (기본 / 호버 / 클릭 / 비활성)- 같은 스위치인데 켜짐/꺼짐 구분 필요함- 같은 인풋인데 포커스, 에러 상태 필요함- 같은 카드인데 라벨이 있고 없고 다름만드는 법- 마스터 컴포넌트 여러 개 마스터 컴포넌트 여러 개를 선택하고 오른쪽 패널에 `combine as variant` 클릭- 마스터 컴포넌트 한 개 오른쪽 패널에... 누르면 add variant - 인스턴스 여러 개 오른쪽 패널에... 누르면 `Create component set`구역배리언트를 선언하면 구역?이 생기는데 그 구역 안에 오브젝트를 넣어서 베리언트를 추가할 수 있고, 오브젝트를 끄집어내서 베리언트를 해제할.. 응용소프트웨어/Figma 2025. 4. 15. [Figma] 프로퍼티 피프로퍼티란컴포넌트의 상태, 텍스트, 보임 여부 등을 설정할 수 있는 속성값으로 프로퍼티 옵션 적용은 마스터 컴포넌트, 프로퍼티 옵션 활용은 인스턴스에서 한다. 프로퍼티 종류1. 텍스트 프로퍼티 - 컴포넌트 내의 텍스트 속성을 외부에서 수정가능케 함 2. 불리언 프로퍼티- 컴포넌트의 특정 요소를 On/Off 하여서 Display 3. 스왑 프로퍼티 - 특정 인스턴스들로 교체가 가능함. 응용소프트웨어/Figma 2025. 4. 15. [Figma] 컴포넌트 특징 & 단축키 컴포넌트란- UI 디자인에서 반복해서 쓰는 덩어리로 반복작업을 줄이는 것이 목적- 하나의 수정으로 전체가 반영이 되도록- 원본으로 수정할 수 있는 마스터 컴포넌트와, 수정된 것을 적용시키는 인스턴스가 있음 종류1. 마스터 컴포넌트 원본으로 수정이 가능하다.2. 인스턴스 마스터 컴포넌트에서 복제된 것으로 마스터 컴포넌트가 수정되면 인스턴스도 수정된다.3. 프로퍼티 (이후 포스팅 글에 자세히 설명) 컴포넌트의 속성값특징- "create component"로 생성 - 마스터 컴포넌트 수정 시 인스턴스 전부 같이 수정됨 - 마스터 삭제했어도 인스턴스 우클릭 → Main component → Restore main component 클릭 - 마스터 위치 찾을 땐 인스턴스 우클릭 → Go to mai.. 응용소프트웨어/Figma 2025. 4. 8. 이전 1 다음 반응형
