본문 바로가기

피그마유료

[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 6강 오토 레이아웃의 개념
Tool 2024. 2. 20. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 6강 오토 레이아웃의 개념 https://mcode.co.kr/kor/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr ▶ 1. 오토 레이아웃의 개념 피그마에서 제작한 UI에 적용이 됨. 화면 크기가 바뀔 때마다 UI 레이아웃들을 조정할 필요가 없도록 자동 조정 옵션을 설정해주는 기능. ▶ 2. 오토 레이아웃 설정 옵션 개체 크기 같은 경우 정렬, 방향, 절대 위치 다 포함이 되어서 개체 크기가 변하게 됨. 절대 위치는 만약 화면 중간에 설정하면 다른 프레임에서도 화면 중간에 설정됨. ▶ 3. 오토 레이아웃 설정값 살펴보기 만약 위 사진처럼 글자 수를 줄이거나 더 늘릴 때 오토 레이아웃을 설정 안 하면 직접 도형도 맞게 줄이거나 늘려야 하지만 오..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 6강 (실습)오토 레이아웃으로 버튼 만들기
Tool 2024. 2. 20. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 6강 (실습)오토 레이아웃으로 버튼 만들기 https://mcode.co.kr/kor/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 글자를 하나 써주고 오토 레이아웃을 만들어 줍니다. 마우스 우클릭 하든지 아님 shift + a 누르기 그리고 만든 오토 레이아웃 2개를 또 오토 레이아웃 해주면 위 사진과 같이 레이어가 만들어집니다. 이름도 오토레이아웃_가로_여러개로 변경해줄게요. 그런 다음 복붙하면 똑같은 간격에 같은 레이어 안에 만들어 지는 걸 확인할 수 있습니다. 저번에 만들어 놨던 아이콘을 데리고 옵니다. 간격이 너무 멀다 싶으면 사진처럼 간격을 줄여줍니다. 마우스로 사이 클릭하면 조절할 수 있어요! 오른쪽 패널에 있는 저 허그 Hug를 누르면 오른쪽 ..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 5강 컴포넌트, 베리언트, 인스턴스 구별
Tool 2024. 2. 20. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 5강 컴포넌트, 베리언트, 인스턴스 구별 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr ▶ 1. 작업 환경에서의 위계 순서 위 사진처럼 작업 환경에서는 위계 순서가 존재합니다. 순서대로 섹션, 프레임, 그룹, 여러가지 레이어 로 위계 순서가 있습니다. ▶ 2. Section Section은 Section 안에 넣을 수 있지만 섹션이 보다 높은 위계는 없기 때문에 낮은 위계인 프레임 안에는 넣을 수 없습니다. 하지만 프레임은 그룹 안에 들어갈 수 있음. ▶ 3. Section과 Frame은 언제 쓰면 좋을까? 섹션은 여러 개의 화면 프레임을 담고 있기에 좋음 하나의 플로우를 하나의 섹션으로 묶어서 관리할 수 있음. 프레임은..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 5강 면과 선의 속성 이해하기
Tool 2024. 2. 20. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 5강 면과 선의 속성 이해하기 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr ▶ 1. 피그마의 특징 피그마는 벡터 기반의 프로그램 벡터는 사이즈에 구애받지 않고 매끄럽게 표현됨. 비트맵은 살짝 손실이 되는 느낌 벡터는 곡선을 자유자재로 수정이 가능함. ▶ 2. 면과 선의 개념 1 면을 그리면 하나의 도형 개체로 인식됨. 면을 인식하는 주체는 코드임. 크기 변경 시, 자동 비율 적용 면은 선으로 변경이 불가능함. ▶ 3. 면과 선의 개념 2 선은 면과 달리 개체가 아니라 스타일 속성으로 우선 인식. 면과 달리 다양한 모서리 스타일값 적용 가능. 크기 조절 시, 선의 두께를 먼저 적용하게 되는데 기존 두께가 우선 ..
[피그마 공부] 메타코드 강의별 스터디 후기_ 4강 (실습) 기본적인 도구 사용해보기
Tool 2024. 2. 20. [피그마 공부] 메타코드 강의별 스터디 후기_ 4강 (실습) 기본적인 도구 사용해보기 https://mcode.co.kr/kor/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr ▶ 1. Ready dor dev 아이콘 Ready for dev 아이콘의 의미는 개발로 넘겨도 무리가 없을 정도로 디자인이 완료됐다를 표시하는 것! ▶ 2. 레이어 이름 옆 네모 아이콘 레이어 이름 옆에 있는 아이콘은 어떤 도구를 활용해서 이 레이어를 만들었고, 어떤 기능을 가지고 있는지 알려주는 아이콘입니다. ▶ 3. Copy/Paste as 레이어 자체를 css, ios, 안드로이드 코드로 보낼 수 있음 페이지 전체를 링크 공유 할 수 있고 특정 레이어만 링크 공유할 수도 있습니다. ▶ 4. Move to page 레이어를..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 4강 상단 파일 설정 메뉴
Tool 2024. 2. 15. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 4강 상단 파일 설정 메뉴 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 여기로 들어가면 피그마 강의와 메타코드의 다양한 강의들을 보실 수 있습니다. 이번에는 상단 파일 설정 메뉴에 대해 알아보겠습니다! ▶ 1. 파일,페이지,레이어 기본 개념 위 사진을 보면 상단에 수업용이라는 파일명과 앞쪽에는 이 수업용 파일이 들어있는 경로가 보입니다. 그리고 왼쪽 패널을 보면 페이지는 로그인 화면과 회원가입 화면으로 구성되어 있습니다. 그리고 페이지 아래쪽에 회색 실선으로 구분되어 보이는 영역이 레이어가 쌓이는 곳입니다! ▶ 2. 개발자 모드 왼쪽 사진에 표시된 부분을 누르면 개발자 모드로 변경 됩니다. 아직 개발자 모..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 홈화면 왼쪽 메뉴
Tool 2024. 2. 12. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 홈화면 왼쪽 메뉴 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 여기로 들어가면 피그마 강의를 둘러보실 수 있습니다! 이번에는 피그마 홈화면에 대해 알아보겠습니다! ▶ 1. 프로필 & 테마 바꾸기 1. 왼쪽 화면에 있는 프로필을 누르면 위 사진과 같이 프로필 관련된 게 나옴 2. 연필 모양 누르면 프사 바꾸기 가능 3. 피그마 홈화면 테마를 바꾸고 싶으면 => 밑에 Theme를 누르면 됩니다. 4. settings 누르면 아래와 같은 화면이 나와요 ▶ 2. Settings 확인하기 회원가입 할 때 기입했던 내용이 들어있고 수정도 가능함. 언어 설정도 가능하고 library, token 기능에 대한 ..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 플랜(요금제) 선택하기
Tool 2024. 2. 12. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 플랜(요금제) 선택하기 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 여기로 들어가면 피그마 강의를 둘러보실 수 있습니다! 그럼 이번 시간에는 피그마 요금제에 대해 알아보겠습니다! Go. ▶ 1. 무료 및 유료 회원 차이점 위 사진이 피그마 회원 체계입니다! 비회원, 무료 회원, 유료 회원으로 나눠집니다. 비회원이라도 공유받은 작업이 확인 가능합니다. 무료 회원에서 제일 아쉬운 점은 작업내역이 30일까지만 보관되는 거네요....ㅜㅅㅜ 여기서 베타 개발자 모드란? => 개발자 모드로 디자인한 화면을 보면 코드화 하기 편한 화면으로 자동으로 바뀜 ▶ 2. 요금제 확인하기 왼쪽에 있는 view plans를 누..
[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 개인과 팀 권한 차이점
Tool 2024. 2. 12. [피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 3강 개인과 팀 권한 차이점 https://mcode.co.kr/ 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 여기로 들어가면 피그마 강의를 둘러보실 수 있습니다! 3-1강에서는 개인과 팀 권한 차이점에 대해 알아가보도록 하겠습니다 GO. ▶ 1. 개인과 팀 권한 차이점 피그마를 가입 or 설치하고 들어가면 내가 속해져 있는 팀이 자동으로 생성되어 있는 걸 확인할 수 있습니다. 새로운 팀원을 초대하거나 새로운 팀을 만들 수 있어요. (생성할 수 있는 팀의 갯수는 요금제에 따라 상이할 수 있음) 위 사진과 같이 피그마에서는 팀을 생성해서 권한을 부여할 수 있어요 오너/어드민, 에디터, 뷰어 이렇게 세 가지로 권한을 나눌 수 있습니다. (에디터 이..

티스토리툴바