UXUI 스터디/Figma(3)
-
피그마 마스터 컴포넌트와 인스턴스 / 베리언츠와 프로퍼티
🤴 마스터 컴포넌트와 인스턴스 ❖마스터 컴포넌트는 원본! 가장 상위에 위치한 컨트롤타워 역할입니다. ◇인스턴스는 마스터 컴포넌트의 복제본! 마스터 컴포넌트가 있어야만 인스턴스가 존재합니다. 복제본인만큼 마스터 컴포넌트의 속성을 이어 받아요. 👥 마스터 컴포넌트와 인스턴스의 관계성 1. 마스터 컴포넌트를 지워도 인스턴스는 남아있습니다. 2. 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경됩니다. 3. 마스터 컴포넌트를 수정하면 인스턴스에도 반영됩니다. 4. 인스턴스를 수정하면 마스터 컴포넌트에 반영되지 않습니다. ex)마스터 컴포넌트의 색상을 레드 ➡️ 블루로 바꾸면 인스턴스도 블루로 바뀝니다. 인스턴스의 컬러를 마음대로 바꿔도 마스터 컴포넌트의 색상은 바뀌지 않습니다. 컴포넌트를..
2024.03.11 -
빠른 손이 되기 위한 피그마 기본 단축키 모음!
📂 피그마 단축키 모음 이동 및 도형 생성 V 이동하기 (Move) C 코멘트 추가(Add) 또는 보기(Show) P 펜 툴(Pen) Shift + P 연필 툴(Pencil) R 사각형 그리기(Rectangle) O 원 그리기(Elipse) L 선 그리기(Line) F 프레임 생성(Frame) S 슬라이스 생성(Slice) I 스포이드 툴(Pick Color) Arrange Shift + A 오토레이아웃 만들기(Add Auto Layout) Alt + Shift + A 오토레이아웃 해제(Remove Auto Layout) v 앞으로 가져오기 (Bring Forward) Ctrl(Cmd) + [ 뒤로 보내기 (Send Backward) Ctrl(Cmd) + Option + ] 맨 앞으로 가져오기(Bring..
2024.02.06 -
1주차) 피그마 Flow Chart 플러그인을 활용한 플로우 쉽게 그리기
플로우차트란? 플로우를 이해하기 위한 순서도로 어떠한 일을 처리하는 과정을 순서대로 간단한 기호와 도형으로 도식화한 것으 플로우차트는 프로세스나 기획 등 실무의 다양한 분야에서 활용중입니다. 플러그인을 활용한 플로우 차트(flow chart) 쉽게 그리는 법 Step 1. 작업화면 상단의 리소스 아이콘 클릭 Step 2. Plugins 클릭 후 검색창에 Flow chart 검색 후 run 버튼을 눌러 실행시킵니다. Step3. 플러그인을 실행시키면 이런 도형들이 있는 팝업창이 뜹니다. 원하는 도형을 클릭하세요. Step 4. 원하는 도형을 클릭하면 작업 환경에 해당 도형이 뜹니다. 그럼 텍스트 영역을 더블클릭하여 원하는 텍스트로 입력합니다. Step 5. 다음 플로우를 그리기 위해서 도형을 클릭후 보이..
2024.01.28