[ figma ] 02. 피그마 화면구조 ,메뉴, 룰러(Ruler)와 가이드(Guide)

화면구조, 메뉴,  룰러, 가이드

 

 # 교재 p44

 

 

 

 

 

 

 

• Design — 기본 UI/UX 디자인 파일. 화면 설계, 컴포넌트 제작 등 일반적인 디자인 작업에 사용합니다.
• FigJam — 온라인 화이트보드 툴. 브레인스토밍, 플로우차트, 회의 정리 등 협업 기획 작업에 사용합니다.
• Slides — 프레젠테이션 슬라이드 제작 도구. 피그마 안에서 바로 발표 자료를 만들 수 있습니다.
• Buzz — 팀 내 공지, 뉴스레터, 업데이트 등을 만드는 커뮤니케이션용 문서 도구입니다.
• Site — 웹사이트를 디자인하고 바로 퍼블리시할 수 있는 웹빌더 기능입니다.  
• Make — 디자인을 기반으로 실제 동작하는 인터랙티브 콘텐츠나 앱을 만드는 도구입니다.  

 

 

 

 

 

 

 

# design 화면구조 

 

 

 

 

# Page

 

여러 아트보드(프레임), 레이어, 컴포넌트, 텍스트, 이미지 등을 하나의 작업 공간 안에서 관리할 수 있는 독립적인 섹션입니다. 이를 통해 디자인 작업을 체계적으로 분리하고, 프로젝트 내에서 여러 작업을 동시에 관리할 수 있습니다.

 # Layers 

 

디자인 작업에서 개별 요소들을 관리하고, 구조화하는 데 중요한 역할을 하는 기능입니다. 각 레이어는 디자인의 요소 하나하나를 나타내며, Figma에서 디자인을 구성하는 기본 단위입니다.

 

 

 

# Page / Layers

 

 

 

# 예시 

 

예시 사이트 

 

Page : 사업분야 , 회사소개

Frame  : 해상풍력 , 연료전지 ..

 

 

 

사업분야
├── 해상풍력
├── 연료전지
├── 수소 에너지
└── 기타 그린 에너지 운영 사업

회사소개
├── CEO 메시지
├── 비전
├── CI
└── 뉴스&미디어

투자정보
├── ESG 등급
├── IR 자료
└── 전자공고

채용
├── 두산의 인재, 두산인
└── 채용전형 안내

 

 

 

 

 

 

# Assets 

 

디자인 시스템, 컴포넌트, 스타일 등을 관리하고, 프로젝트에서 쉽게 재사용할 수 있도록 돕는 기능입니다. 이 패널을 통해 자주 사용하는 디자인 요소들을 빠르게 접근하고, 일관된 디자인을 유지할 수 있습니다.

Assets 패널의 주요 특징 및 기능:

1. Assets 패널 위치:
   • Figma 인터페이스의 왼쪽 패널에서 "Layers" 탭 옆에 "Assets" 탭이 있습니다. 이 탭을 클릭하면 Assets 패널이 열립니다.
2. 컴포넌트(Component) 관리:
   • Assets 패널의 주요 기능 중 하나는 컴포넌트를 관리하는 것입니다. 컴포넌트는 재사용 가능한 디자인 요소로, 버튼, 아이콘, 카드 등 자주 반복되는 UI 요소들을 컴포넌트로 만들어 프로젝트 내에서 여러 번 사용할 수 있습니다.
   • 컴포넌트는 한 번 만들면 여러 곳에서 사용 가능하며, 원본 컴포넌트를 수정하면 이를 사용하는 모든 인스턴스가 자동으로 업데이트됩니다.
3. 컴포넌트 사용 및 배치:
   • Assets 패널에서 원하는 컴포넌트를 드래그 앤 드롭하여 캔버스에 배치할 수 있습니다. 또는 컴포넌트 이름을 클릭해 검색하고 사용할 수 있습니다.
   • 컴포넌트 인스턴스를 캔버스에 배치한 후, 인스턴스별로 속성이나 스타일을 개별적으로 조정할 수 있습니다.
4. 라이브러리(Library) 통합:
   • Figma에서는 조직이나 프로젝트에 공용 라이브러리를 만들 수 있습니다. 이러한 라이브러리에는 컴포넌트, 스타일(색상, 텍스트 스타일, 효과 등)이 포함되며, 프로젝트 전반에 걸쳐 일관된 디자인을 유지할 수 있습니다.
   • Assets 패널에서 특정 라이브러리를 활성화하면, 해당 라이브러리의 컴포넌트와 스타일을 사용할 수 있습니다.
5. 스타일 관리:
   • Assets 패널에서는 텍스트 스타일, 컬러 스타일, 그리드 스타일 등 디자인에서 반복적으로 사용하는 스타일을 관리할 수 있습니다.
   • 스타일을 적용하면, 변경 사항이 즉시 모든 인스턴스에 반영되어 일관성을 유지할 수 있습니다.
6. 아이콘 및 기타 디자인 자산 관리:
   • 프로젝트에서 자주 사용하는 아이콘이나 기타 벡터 그래픽도 컴포넌트로 만들어 Assets 패널에서 관리할 수 있습니다.
   • 이를 통해 디자인 작업 중 필요한 자산을 빠르게 찾아 사용 가능하며, 다양한 디자인 시나리오에 맞게 활용할 수 있습니다.
7. Assets 패널 활용 예시:
   • UI 키트: 프로젝트 내에서 자주 사용되는 UI 요소들을 모아 UI 키트를 만들고, Assets 패널에서 관리하여 필요할 때마다 쉽게 접근할 수 있습니다.
   • 디자인 시스템: 조직 전체에 걸쳐 사용되는 디자인 시스템을 구축하여, 모든 팀원이 일관된 디자인 언어를 사용할 수 있도록 합니다.
   • 브랜드 가이드라인 준수: 색상, 텍스트 스타일 등을 스타일로 정의하고 Assets 패널에서 관리하여, 모든 디자인에 일관된 브랜드 가이드라인을 적용할 수 있습니다.

Assets 패널을 통한 효율적 작업:

• 빠른 작업 속도: 자주 사용하는 요소들을 패널에서 바로 끌어와 사용함으로써 디자인 작업의 속도를 높일 수 있습니다.
• 일관된 디자인 유지: 컴포넌트와 스타일을 활용하여 프로젝트 전반에 걸쳐 일관된 디자인을 유지할 수 있습니다.
• 디자인 시스템 활용: 조직의 디자인 시스템을 통합하고, 이를 통해 모든 프로젝트에서 동일한 자산을 사용할 수 있습니다.

 

 

 

 

 

 

---

File(파일):

New(새로 만들기): 새로운 프로젝트를 시작합니다.
Open(열기): 기존에 저장된 프로젝트를 엽니다.
Recent(최근): 최근에 열었던 프로젝트 목록을 확인합니다.
Save(저장): 현재 프로젝트를 저장합니다.
Save As(다른 이름으로 저장): 프로젝트를 다른 이름으로 저장합니다.
Export(내보내기): 프로젝트를 이미지, PDF, SVG 등의 형식으로 내보냅니다.
Version History(버전 기록): 프로젝트의 이전 버전을 확인하고 복구합니다.

Edit(편집):

Undo(실행 취소): 최근에 한 작업을 취소합니다.
Redo(다시 실행): 실행 취소한 작업을 다시 실행합니다.
Cut(잘라내기): 선택한 요소를 잘라냅니다.
Copy(복사): 선택한 요소를 복사합니다.
Paste(붙여넣기): 복사한 요소를 붙여넣습니다.
Duplicate(복제): 선택한 요소를 복제합니다.
Delete(삭제): 선택한 요소를 삭제합니다.
Select All(모두 선택): 모든 요소를 선택합니다.

View(보기):

Zoom In(확대): 캔버스를 확대합니다.
Zoom Out(축소): 캔버스를 축소합니다.
Actual Size(실제 크기): 캔버스를 원래 크기로 표시합니다.
Grid(그리드): 그리드를 표시하거나 숨깁니다.
Rulers(룰러): 룰러를 표시하거나 숨깁니다.
Guides(가이드): 가이드를 표시하거나 숨깁니다.
Insert(삽입):
Shape(모양): 다양한 도형을 추가합니다.
Image(이미지): 이미지를 추가합니다.
Text(텍스트): 텍스트 상자를 추가합니다.
Frame(프레임): 프레임을 추가하여 요소를 그룹화합니다.
Component(컴포넌트): 재사용 가능한 컴포넌트를 추가합니다.

Arrange(정렬):

Bring to Front(앞으로 가져오기): 선택한 요소를 가장 위로 가져옵니다.
Send to Back(뒤로 보내기): 선택한 요소를 가장 아래로 보냅니다.
Align(정렬): 요소를 가로 또는 세로로 정렬합니다.
Distribute(분배): 요소 간의 간격을 일정하게 분배합니다.
Plugins(플러그인):
피그마 기능을 확장하는 다양한 플러그인을 관리하고 설치할 수 있습니다.

 

 

---

 

 

# 룰러(Ruler)와 가이드(Guide)

 

룰러(Rulers):

피그마의 룰러는 캔버스 상에 수평과 수직으로 표시되며, 디자인 요소를 정렬하는 데 도움이 됩니다.
화면 상단과 좌측에 각각 수평 및 수직 룰러가 있습니다.
룰러의 단위는 픽셀(px)이며, 디자인 요소의 크기와 위치를 정확하게 조절할 때 유용합니다.
룰러를 사용하여 요소의 크기를 측정하거나 배치할 때 다른 요소들과의 간격을 일정하게 유지할 수 있습니다.

 

단축키  : [ shift ]  + [ R ]

 

Rulers 룰러

 

 

 

 

가이드(Guides):

가이드는 디자인 요소를 배치하는 데 사용되는 시각적인 가이드라인입니다.
가이드를 수평 또는 수직으로 캔버스에 그려서 요소를 정렬하거나 간격을 일정하게 유지할 수 있습니다.
가이드를 만들려면 룰러 영역에서 가이드를 드래그하고 원하는 위치에 놓으면 됩니다.
가이드는 디자인 작업 중에 임시로 사용되거나 최종 배치를 지정하는 데 사용됩니다. 필요 없는 가이드는 삭제할 수 있습니다.

 

 

 

 

1. 룰러(Ruler) : [ Shift ] + [ R ]  또는 메뉴 선택 

2. 가이드(Guide) : 눈금자 누르고 드래그 

3. 가이드 삭제 : 가이드 선택  - 눈금자 쪽으로 드래그 

                          가이드 누르기 ( 조금 누르고 있으면 파란색 변경 ) - [ delete ] 누르기 

 

4.  [ Alt ] 키 누르고 눈금자에서 꺼내오면 선택( 프레임 또는 도형 ) 한 대상을 기준으로 거리값이 표시 

5. 도형 선택 후 [ Alt ] 누르면 ( 도형 밖으로 마우스 포인트 이동 ) 선택한 대상을 기준으로 거리값 표시 

 

 

 

가이드 삭제 :

자 도구에서 우클릭을 통해 가로/세로 가이드라인을 한번에 삭제

 

 

 

 

# 단축키 [ ctrl ] + [ shift ] + [ / ]

 

단축키

 

 

단축키 정리해보세요 

 

[ V ] 선택 도구 : 객체를 선택하거나 이동할 때 사용됩니다.

[ Space ] + 드래그 화면 이동 : 마우스 커서에 따라 원하는 영역으로 이동합니다. ( 화면 이동 )

 

[ Shift ] + [ 마우스 휠 ] : 화면 좌우이동 

 

[ Ctrl  ] + [ 마우스 휠 ] : 화면 확대 축소 

 

[ Ctrl  ] + [ + / -  ] : 화면 확대 축소 

[ Ctrl ]  + [ R ]  ​레이어 이름 변경 : 선택한 객체의 레이어 이름을 변경합니다.

[ Ctrl ]  + [ G  ] 그룹화 : 여러 객체를 그룹화하여 관리하기 쉽게 만듭니다.

[ Ctrl ] + [ D ] 객체 복제 : 선택한 객체를 복제합니다.

 

[ Ctrl ] + [ C ] 객체 복제 : 선택한 객체를 복제합니다.

 

[ Ctrl ] + [ V ] 객체 붙여넣기 : 선택한 객체를 붙여넣기 합니다.

[ Ctrl ]  + [​ 뒤로 보내기 : 선택한 객체를 뒤로 보냅니다.

[ Ctrl ]+ ]​ 앞으로 가져오기 : 선택한 객체를 앞으로 가져옵니다.

 

 

 

 

 

1. Open (열기): 선택한 파일을 엽니다.
2. Open in new tab (새 탭에서 열기): 해당 파일을 새 브라우저 탭에서 엽니다.
3. Create new branch (새 브랜치 생성): 파일의 새 브랜치를 생성합니다. 버전 관리를 위해 유용합니다.
4. Add to sidebar (사이드바에 추가): 해당 파일을 Figma 사이드바에 추가하여 빠르게 접근할 수 있도록 합니다.
5. Copy link (링크 복사): 파일의 공유 가능한 링크를 복사합니다.
6. Share (공유): 다른 사용자와 파일을 공유합니다.
7. Duplicate (복제): 파일을 복제하여 새 사본을 만듭니다.
8. Rename (이름 바꾸기): 파일의 이름을 변경합니다.
9. Move file... (파일 이동): 파일을 다른 프로젝트나 폴더로 이동합니다.
10. Move to trash (휴지통으로 이동): 파일을 삭제하여 휴지통으로 보냅니다.

 

# 공유

 

 

 

 

상단 섹션:

1. Share this file (이 파일 공유):
   • 파일을 공유하거나 다른 사람들을 초대할 수 있는 옵션입니다.
2. Invite others by name or email (이름 또는 이메일로 초대):
   • 초대하려는 사람의 이름 또는 이메일을 입력하고 Invite(초대) 버튼을 눌러 협업할 수 있습니다.
3. Copy link (링크 복사):
   • 파일의 공유 링크를 복사하여 다른 사람들과 공유할 수 있습니다.

Who has access (접근 권한이 있는 사람들):

• Anyone (모든 사람):
  • 파일에 접근 가능한 사람들의 범위를 설정할 수 있습니다. 기본적으로 can view(보기만 가능) 권한이 있습니다.
• quscogus (you) (현재 사용자):
  • 이 파일의  owner(소유자)입니다.

 

하단 섹션:

1. Copy Dev Mode link (Dev Mode 링크 복사):
   • 개발 모드에서 사용 가능한 링크를 복사합니다.
2. Copy prototype link (프로토타입 링크 복사):
   • 프로토타입 공유를 위한 링크를 복사합니다.
3. Publish to Community (커뮤니티에 게시):
   • 이 파일을 Figma 커뮤니티에 공개적으로 공유할 수 있습니다.
4. Get embed code (임베드 코드 가져오기):
   • 웹사이트 등에 파일을 삽입하기 위한 임베드 코드를 제공합니다.
5. Ready to share with your team? (팀과 공유할 준비가 되었나요?):
   • "Move to project (프로젝트로 이동)" 버튼을 클릭하여 파일을 특정 팀 프로젝트로 이동할 수 있습니다.

 

 

 

•  

Who can access (누가 접근할 수 있습니까):

1. Anyone (모든 사람):
   • 조직 외부를 포함한 누구나 파일에 접근할 수 있습니다.
   • 추가로 접근 권한을 설정(보기 또는 편집)할 수 있습니다.
2. Only invited people (초대된 사람만):
   • 초대된 사용자만 파일에 접근할 수 있습니다.
   • 초대받지 않은 사람은 링크를 통해 접근할 수 없습니다.

What can they do (무엇을 할 수 있습니까):

• View (보기): 파일을 열람하고 댓글을 달 수 있습니다.
• Edit (편집): 파일을 수정하거나 편집할 수 있습니다.

Additional security (추가 보안):

• Password required (비밀번호 필요):
  • 비밀번호 설정을 통해 파일 접근에 추가적인 보안을 제공합니다.

Advanced (고급 설정):

• Viewers can copy, share, and export from this file (보기 권한 사용자가 파일을 복사, 공유 및 내보내기 가능):
  • 활성화된 경우, 보기 권한만 있는 사용자도 파일 내용을 복사하거나 내보낼 수 있습니다.

Save 버튼 비활성화 상태:

• 설정 변경 후 저장하지 않았기 때문에, Save(저장) 버튼이 비활성화된 상태를 보여줍니다.