[피그마] 포토샵 설치하긴 부담되고 ,,,, 그냥 웹으로 편하게 이용하고 싶을땐?

 

안녕하세요 ~반갑습니다

이노리입니다 😉😊

 

오늘은!! 디자이너의 필수 핵심 역량 포토샵!!!! 

근데? 그 포토샵이 아니라 다른 툴을 소개해볼까나~ 합니다요 😁

 

요즘 떠오르는 핫한 툴! [피그마] 입니다!! 

 

 

출처_네이버블로그

 

반응형

 

피그마(Figma)는 웹 기반의 UI/UX 디자인 도구로, 그래픽 디자인, 프로토타이핑, 협업 기능을 제공합니다. 디자이너들이 실시간으로 협업하고 디자인 파일을 공유할 수 있도록 도와주며, 다양한 기능을 통해 인터페이스 디자인 작업을 효율적으로 수행할 수 있게 해줍니다. 피그마의 주요 특징은 다음과 같습니다

1. 웹 기반: 피그마는 웹 브라우저에서 실행되므로 별도의 설치가 필요 없고, 어디서든 접근이 가능합니다.
2. 실시간 협업: 여러 사용자가 동시에 동일한 프로젝트에서 작업할 수 있으며, 실시간으로 변경 사항을 확인할 수 있습니다.
3. 버전 관리: 작업한 내용의 히스토리를 관리하고, 이전 버전으로 쉽게 되돌릴 수 있습니다.
4. 프로토타이핑: 디자인한 화면을 연결하여 인터랙티브 프로토타입을 만들 수 있습니다.
5. 플러그인 및 통합: 다양한 플러그인과 연동 기능을 통해 작업 효율을 높일 수 있습니다.
6. 크로스 플랫폼: Windows, Mac, Linux 등 다양한 운영체제에서 동일한 경험을 제공합니다.

이 도구는 팀 작업에 최적화되어 있어 디자이너, 개발자, 프로젝트 매니저 등이 협력하여 프로젝트를 진행하기에 매우 유용합니다.

 

사용법

1. 계정 생성 및 로그인

• 계정 생성: Figma 웹사이트에서 계정을 생성합니다. 무료 플랜을 이용할 수 있으며, 필요에 따라 유료 플랜을 선택할 수도 있습니다.
• 로그인: 계정을 생성한 후, 웹 브라우저 또는 Figma 데스크탑 앱에서 로그인합니다.

2. 새 프로젝트 시작

• 프로젝트 생성: Figma 대시보드에서 "New File"을 클릭하여 새 프로젝트를 시작합니다.
• 프레임 설정: 프로젝트 파일 내에서 원하는 해상도의 프레임을 생성합니다. 예를 들어, 모바일 앱 디자인을 위해 iPhone 프레임을 선택할 수 있습니다.

3. 디자인 작업

• 도구 사용: 좌측 도구 패널에서 다양한 도구를 사용할 수 있습니다.
  • 이동 도구 (Move Tool): 오브젝트를 선택하고 이동합니다.
  • 프레임 도구 (Frame Tool): 다양한 해상도의 프레임을 생성합니다.
  • 직사각형 도구 (Rectangle Tool): 직사각형을 그립니다.
  • 타원 도구 (Ellipse Tool): 타원을 그립니다.
  • 텍스트 도구 (Text Tool): 텍스트를 추가합니다.
• 벡터 네트워크: 벡터 그래픽을 그리고 편집합니다. 펜 도구를 사용하여 점과 선을 추가하고 조정할 수 있습니다.
• 스타일 적용: 색상, 그림자, 그라디언트 등을 적용하여 디자인을 꾸밀 수 있습니다.

4. 컴포넌트와 라이브러리

• 컴포넌트 생성: 자주 사용하는 UI 요소를 컴포넌트로 저장하여 재사용할 수 있습니다. 예를 들어, 버튼 디자인을 컴포넌트로 만들어 다른 페이지에서도 동일한 버튼을 사용할 수 있습니다.
• 라이브러리 관리: 디자인 시스템을 구축하고, 컴포넌트와 스타일을 라이브러리로 관리하여 팀원들과 공유할 수 있습니다.

5. 프로토타이핑

• 프로토타입 모드: 디자인 파일 내에서 "Prototype" 탭을 선택합니다.
• 인터랙션 추가: 프레임과 오브젝트를 연결하여 클릭, 드래그 등의 인터랙션을 정의합니다. 트랜지션 효과와 애니메이션을 추가하여 실제 사용자 경험을 시뮬레이션할 수 있습니다.
• 미리보기: 디자인한 프로토타입을 미리보기 모드에서 테스트할 수 있습니다.

6. 협업과 피드백

• 실시간 협업: 팀원들과 동일한 파일에서 실시간으로 작업할 수 있습니다. 변경 사항이 즉시 동기화됩니다.
• 코멘트 추가: 특정 요소에 코멘트를 달아 피드백을 주고받을 수 있습니다. 코멘트 기능을 사용하여 팀원들과 소통할 수 있습니다.

7. 파일 내보내기

• 이미지 내보내기: 디자인 요소를 PNG, JPG, SVG 등 다양한 형식으로 내보낼 수 있습니다.
• 코드 내보내기: 개발자와 협업하기 위해 디자인 요소의 CSS 코드 등을 추출할 수 있습니다.

8. 플러그인 사용

• 플러그인 설치: Figma 커뮤니티에서 다양한 플러그인을 설치하여 기능을 확장할 수 있습니다. 예를 들어, 아이콘 라이브러리, 이미지 플러그인 등을 추가할 수 있습니다.

참고 자료와 튜토리얼

• Figma 공식 사이트: Figma 공식 사이트에서 다양한 튜토리얼과 가이드를 제공합니다.
• Figma 커뮤니티: 다양한 디자인 리소스와 플러그인을 공유하는 커뮤니티를 통해 도움을 받을 수 있습니다.

이러한 기본적인 사용법을 익히면 Figma를 활용하여 효율적으로 UI/UX 디자인 작업을 수행할 수 있습니다.

 

https://www.figma.com/ko-kr/

Figma: 협업을 위한 인터페이스 디자인 도구

 

요금제

1. Free (무료) 플랜

• 대상: 개인 사용자, 소규모 팀
• 주요 기능:
  • 3개의 파일을 편집할 수 있음
  • 무제한의 클라우드 스토리지
  • 무제한의 뷰어 및 코멘트 기능
  • 최대 2명의 편집자
  • 팀 프로젝트 생성 가능
  • 기본적인 프로토타이핑 기능 제공

2. Professional 플랜

• 대상: 전문 디자이너, 프리랜서, 소규모 팀
• 가격: 사용자당 월 $12 (연간 청구 시) 또는 월 $15 (월간 청구 시)
• 주요 기능:
  • 무제한의 파일 편집 가능
  • 무제한의 프로젝트 생성
  • 팀 라이브러리 기능
  • 공유된 컴포넌트와 스타일
  • 고급 프로토타이핑 및 애니메이션 기능
  • 버전 관리 및 히스토리 기능

3. Organization 플랜

• 대상: 중대형 기업, 팀 단위로 조직화된 사용자
• 가격: 사용자당 월 $45 (연간 청구 시)
• 주요 기능:
  • 모든 Professional 플랜 기능 포함
  • 조직 전체 라이브러리 관리
  • 고급 권한 및 역할 관리
  • SSO (Single Sign-On) 및 기타 보안 기능
  • 디자인 시스템 분석 및 관리
  • 통합 감사 로그 및 활동 추적
  • 사용자 및 파일에 대한 관리 및 통제 기능

4. Enterprise 플랜

• 대상: 대규모 조직, 복잡한 보안 및 관리 요구 사항이 있는 기업
• 가격: 커스텀 가격 (Figma 영업팀에 문의 필요)
• 주요 기능:
  • 모든 Organization 플랜 기능 포함
  • 더욱 강화된 보안 및 관리 기능
  • 전문 기술 지원
  • 맞춤형 온보딩 및 교육
  • API 및 기타 통합 기능

참고 사항

• 학생 및 교육자 할인: Figma는 학생 및 교육자를 위한 무료 교육용 라이선스를 제공합니다.
• 비영리 단체 할인: 비영리 단체를 위한 할인 프로그램도 운영하고 있습니다.

 

Figma는 현대 UI/UX 디자인의 판도를 바꾼 혁신적인 도구입니다. 웹 기반 플랫폼을 통해 언제 어디서나 접근 가능하며, 실시간 협업 기능으로 디자이너들 간의 원활한 소통을 지원합니다. 강력한 디자인 및 프로토타이핑 기능을 제공하면서도 직관적인 인터페이스를 갖추고 있어, 초보자부터 숙련된 디자이너까지 모두가 효과적으로 사용할 수 있습니다.

 

UI/UX 디자이너의  필수 핵심 능력으로 떠오른 피그마..!!

이번 기회에  알고가서 우리 이직시장에서 넘볼 수 없는 인재가 되자구요~~😚😆😆💗

 

---

2024.06.26 - [AI 이야기] - [AI사이트: 뤼튼] 블로그 글 뭐쓰지..?! 뤼튼으로 해결해VOA~

[AI사이트: 뤼튼] 블로그 글 뭐쓰지..?! 뤼튼으로 해결해VOA~

2024.05.16 - [AI 이야기] - [Adobe Firefly] 생성형 AI 무료그림사이트-어도비 파이어플라이로 그림그리기

[Adobe Firefly] 생성형 AI 무료그림사이트-어도비 파이어플라이로 그림그리기