[피그마] 피그마 입문 A to Z 부트캠프 메타코드_#3 (작업환경 살펴보기2)

Oigu·2024년 2월 12일
0
post-thumbnail

버전 관리

Save to version history로 버전을 기록하면 나중에 Show version history를 통해 히스토리를 확인할 수 있다.
Version history의 autosave versions에서는 자동 저장된 내용을 확인할 수 있다.



Assets 패널

Asset에서 라이브러리를 미리 만들어두고 작업 시에 활용하면 된다.



내보내기

내보낼 비율 값 -> html에서 meta태그 viewport scale의 느낌이랑 비슷한..듯?




프레임


Frame 원하는 디바이스 배열로 만듦
Section 요소들(Frame)을 한번에 묶어주는 역할




프로토타입


화살표 연결

프레임을 연결하면 Navigate 설정이 적용되어 상단의 재생 버튼을 누르면 프로토타입 화면이 생성되고 navigate 방향대로 화면이 순차적용 된다.


prototype에서 내가 원하는 디바이스 화면으로 확인할 수 있다.
기기별로 화면이 어떻게 보이는지 미리 확인할 수 있어서 작업 시에 유용하다.




아이콘 실습 주요 내용



outline stroke ➡️ 선 면처리
shift + x ➡️ 선과 면의 컬러 반전
option + 끌기 ➡️ 복사


확인 버튼이 따로 놀지 않게 Frame selection 으로 프레임에 소속되게 함
이렇게 만들어진 프레임과 레이어를 부모와 자식 레이어라고 부름




개발자 모드


개발 준비 모드 - Ready for dev

저 버튼을 누르면 Ready for dev가 뜨고 dev 모드를 열 수 있다.
난....무료 버전이라..... open 할 수 없었다.....







mcode

>> 메타코드 바로가기 링크

#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠

0개의 댓글