콘테츠 마케터에서 필요한 Figma

김마케터취준일기♥·2024년 3월 25일

Figma

자주 사용하는 단축키(에디트 채널 밑에 ?누르면 단축키 정보 나와있음)
inspect -이미지 정보나 크기 등을 알수 있고 개발자와 공유 할 수 있어 파일 안에서 다 해결 가능!
옆에 디자인 툴에서 입력하거나 드래그해서 도형 변경 가능!

위에 선을 만들고 Dash를 설정하고 도형에서 다시 Dash를 설정하면 그대로 나타남!

펜툴
shift 누르고 드래그 수직선 됨
esc누르면 선 해제
Done은 편집 모드 다 펜툴 작업하고 Enter누르면 나와짐!
다시 더블 클릭하면 편집모드로 전환
모형 안에 칠을 해줘야 움직임 드래그가 가능
모형 변형을 할때에는 alt를 누르고-> 패스 부분에 마우스 놓고-> < 부분이 나와서 드래그하면 원하는 대로 모형을 변경 가능

마스크 분리하는 방법
레이어에 star클릭 하고 우측 상단에 마스크 클릭하면 됨!

컬러와 그레디언트
두가지을 합쳐 다른 색으로 만들 수 있음!
원하는 색을 스타일화에 지정하는 방법 - 원하는 색상 클릭-> 우측단에 색깔 채널에 점 네개 표시 눌러서 플러스!하면 끝!
지정한 색깔을 에디트 노트에서 컬러피커를 색깔 조정하면 지정한 색깔들이 같이 따라 변함
그레디언트도 그라데이션이나 입체, 다이아몬드형을 만든 뒤 색깔 스타일화에 추가 할 수 있음!
레이어 자체 블러, 백그라운드 블러는 배경이 흐릿해지는 블러
색깔 복사 ctrl + alt + c -> ctrl + alt + v

이미지와 플러그인

도형에 사진으로 넣으면 도형안에 넣을 수 있음
사진 위치를 바꾸고 싶으면 crop 선택 후 사진을 드래그로 옮기면 됨
사진 불투명도 단축키 - 0~123456....

사람의 저작권때문에 사용 못할 때 UI 사람 이미지사용

정렬과 레이아웃
프레임 틀: F,T
도형을 그리고 위에 프레임을 서식하면 같이 합쳐서 생성이 된다.
옆 레이어 파일 이름을 바꿀때 shft레이어 전체 선택+ ctrl+r해서 바꾸고 싶은 이름을 입력해서 바꿀 수 있음
/d+하면 숫자를 원하는 순서대로 바꿀 수 있음
커스트레인트, 페이지에 맞게 함께 늘리는 방법- shuft누르고 center로 설정해서 늘리면 페이지에 따라 늘어남!

오토레이 - shift + A 해제shift +alt + A
오토레이 설정하면 틀안에서 자유롭게 움직여지는 만큼 틀도 함께 변경됨!

컴포넌트와 베리언트
컴포넌트 - 복잡한 요소를 등록하여 사용할 수 있음, ctrl + alt + k -> ctrl + j ->요서 변경
인스턴스 - 원본 복제
컴포넌트를 사용한거에 따라 인스턴스가 같이 변경이 된다. 인스턴스를 따로 변경하는 경우 같이 변경되지 X
유니콘-아이콘 채널

컴포넌트를 따로 사용할때 방법
그룹으로 꼭 묶고 컴포넌트를 해야함!

도형 컴포넌트로 등록하는 방법 -우측 상단 디페치 눌러서->ctrl + alt + k

프로토타입 인터렉션

버튼 인터렉션

모달창만들기

네비게이션 드로워
미리보기에서 방향이나 오류가 없는지 항상 확인하면서 만들기!

종합실습

개발자에게게 보낼때 알아야 할 Tip!
-내보낼 부분을 드래그한다.
-Export 누른 후 Expor layers누른다.
-파일에 드래그한 부분이 따로 따로 저장이 된 것을 볼 수 있다.

크기별로 저장할때
1~3배수 파일을 늘려서 저장하면 크기별로 저장이 되어있음!

개발자에게 보낼때 알아야할 사항!(규칙)

피그잼 활용법
동료들과 회의할 때 유용함!
템플릿도 있으니 참고해서 사용해도 good!

수강하면서 어려운 점
인터렉션 설정하는 부분에서 순서도나 크기 설정 같은 것이 처음 접해서 작업하는거라 여러번 해보면서 익히는게
좋을것 같고 강사님이 만드는 부분에서 미리 만들어 놓으신 걸로 했을때 다음 강의에서 사이즈 다르게 하는 것도
미리 알려주셔서 같이 만들고 사용하면 좋을 것 같다는 생각이 들었다 ㅠㅠ

인상 깊은 k-pop 2개와 이유
일산화 탄소(스텔라장)
제발 너는 지인으로도 남지 말아 줘
너 때문에 질식사 할 것 같아
내 적혈구들이 산소 운반을 못하잖아