Figma 사용법

By. ChatCPT

---

동영상 (YouTube)

1. [피그마 기초 강의] Figma 기본 인터페이스 1편 I 피그마 튜토리얼
   • 링크: YouTube
   • 채널: 러닝스푼즈 | 커리어 성공의 비밀
   • 재생시간: 9:26
   • 날짜: 2024년 2월 22일
2. [피그마 기초1] 상세페이지 사용법 강의 | 피그마 마스크 기능
   • 링크: YouTube
   • 채널: 이지디자인
   • 재생시간: 19:07
   • 날짜: 2023년 5월 15일
3. 피그마 AI로 디자인 만들기 - 피그마 강좌 2-9
   • 링크: YouTube
   • 채널: 디자인베이스
   • 재생시간: 10:42
   • 날짜: 2024년 6월 28일
4. 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지
   • 출처: 코드스테이츠
   • 링크: CodeStates
   • 날짜: 2023년 4월 14일
5. 디자이너 아니어도 괜찮아....피그마 (Figma) 사용법
   • 출처: NAVER 블로그
   • 링크: NAVER 블로그
   • 날짜: 2023년 1월 6일
6. 현직자가 알려주는 Figma(피그마) 사용법
   • 출처: 브런치스토리
   • 링크: 브런치
   • 날짜: 2024년 4월 1일

 

By. Claude

---

Figma 사용법에 대한 주요 내용 정리

 

• 피그마 시작하기:

• 공식 사이트(https://www.figma.com/)에서 계정 만들기 및 로그인
• 데스크톱 앱 또는 웹 브라우저에서 사용 가능

• 기본 인터페이스:

• 좌측 상단의 샵(#) 아이콘으로 새 프레임(캔버스) 생성
• 우측 사이드바에서 다양한 크기의 프레임 선택 가능

• 주요 기능:

• Frame: 디자인 요소를 담는 컨테이너
• Constraint: 요소의 위치와 크기 제약 설정
• Component: 재사용 가능한 디자인 요소 생성
• Style: 색상, 텍스트 등의 스타일 저장 및 관리
• Auto layout: 자동으로 요소 정렬 및 배치

• 유용한 팁:

• Alt 키를 누른 상태로 요소 위에 마우스를 올리면 요소 간 간격 확인 가능
• 우측 상단 확장 버튼으로 프레젠테이션 모드 진입

• 폰트 설정:

• Figma Font Installer 설치 또는 웹에서 Account Setting의 Font 항목에서 설정

• 협업 기능:

• 실시간으로 여러 사용자가 동시에 작업 가능
• 커뮤니티 파일을 통해 다른 디자이너의 작업 참고 가능

• 개발자를 위한 기능:

• 디자인 스펙 확인 및 코드 추출 가능
• 프로토타이핑 기능으로 인터랙션 설계 가능

출처:

1. 코드스테이츠 블로그 (https://www.codestates.com/blog/content/%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95)
2. 네이버 블로그 (https://blog.naver.com/wj_airborne/222976446815)
3. 브런치 (https://brunch.co.kr/@mobiinside/2963)
4. Figma 커뮤니티 (https://www.figma.com/community/file/1314105663439944154)
5. Medium (https://medium.com/@yihimin01/%ED%86%A0%EB%8F%85-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%88%B4-%EC%82%AC%EC%9A%A9%EB%B2%95-450fe3827569)