오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 플러그인, 모바일/PC 환경 설정에 대해서 알아보겠습니다.
피그마 - 플러그인
1️⃣ Autoflow
화면에 플로우를 연결해주는 플러그인으로
컴포넌트나 버튼을 누르는 경우 각각의 다른 화면으로 분기 처리되어 이동하거나
플로우를 그려보는 것과 같은 플러그인을 사용 가능합니다.
피그마 상단의 Plugins를 이용하여 사용합니다.
북마크를 하거나 협업자들에게 공유도 가능합니다(유료 기능도 존재)
연결해주고 싶은 컴포넌트나 요소를 선택하고 shift를 누른 상태로
다음 화면을 선택하면 자동으로 플로우를 잇는 화살표가 생성되고
화살표 위치가 마음에 들지 않으면 이동도 가능합니다.
디스크립션도 적을 수 있는데 간단한 가이드를 타이핑해서 협업자들에게 전달 가능합니다.
화살표 선의 세부적인 변경도 가능합니다.
2️⃣ Unsplash
유면하고 고퀄리티의 스톡 이미지가 있는 사이트의 플러그인입니다.
스톡 이미지를 빠르게 피그마에 삽입할 수 있습니다.
(Unsplash+ = 유료 이미지도 있지만 무료만 이용해도 충분하다)
스톡 이미지들을 검색을 통해 찾는 것이 가능하고 원하는 필터/방향으로 모아볼 수 있습니다.
스톡 이미지를 더블 클릭해주는 것으로 쉽게 삽입이 가능합니다.
3️⃣ Material Symbols
모서리 타입을 상단에서 변경할 수 있고 아래쪽 미리보기에 바로 반영됩니다.
원하는 심벌을 검색하여 찾을 수 있고 Weight는 두께 변경이고,
Fill은 색을 채우는지 여부이고, Grade는 테마에 따라 볼 수 있는 것이고,
사이즈 변경도 가능합니다(설정에서 바꾸면 작업환경 아이콘에도 반영됨)
4️⃣ Lorem Ipsom
텍스트를 자동 완성하는 플러그인입니다.
데이터를 임의로 넣을 수 있거나 텍스트 말고도 다양한 내용을 넣을 수 있습니다.
단어를 넣을지 문장을 넣을지 선택할 수 있고,몇 줄을 넣을지 선택하고,
생성 버튼을 누르면 자동으로 생성이 됩니다.
5️⃣ Lottie Files
이 플러그인은 로그인해야 이용가능한 플로그인이기 때문에 로그인을 해줍니다.
애니메이션 UI를 지원해주는 플러그인으로 벡터 기반으로 코드화하는데도 편리합니다.
단순하게 애니메이션 UI를 만드는 플러그인으로 인식하면 되고
디스커버리 탭에는 다양한 애니메이션 UI가 존재하고 검색을 통해
원하는 애니메이션 UI를 이용 가능합니다.
롯디 소스들은 원하는 색이나 배경 등 직접 설정이 가능한데
애니메이션 안에 컬러 팔레트로 변경할 수 있습니다.
배경색이나 투명도 등 설정 가능하고, 하단의 커스터마이징에 들어가면
보기의 색조합에 따라 애니메이션 개체가 변하는 것을 확인할 수 있습니다.
하지만 상세 설정을 많이 변경하면 유료로 이용 가능합니다.
Insert as SVG로 선택하여 넣습니다.(코멘트를 통해 개발자에게 애니메이션임을 알려야됨)
상세 변경 페이지에서 지구본을 선택하면 롯디 홈페이지에서
애니메이션의 편집이 가능하고 상단의 Lottie JSON 파일을 다운받아서
개발자에게 넘겨야 구현이 가능합니다.
피그마 - Android 환경 기초 세팅
프레임을 안드로이드 라지 프레임 생성하고
Android & ios keyboard UI kit 리소스를 커뮤니티에서
피그마로 열면 안드로이드와 ios 기본 UI들이 있습니다.
스테이스바도 라이트버전/다크버전으로 있고
복사 붙어넣기 하면 안드로이드 프레임에 넣을 수 있습니다.
변경을 위해 인스턴스를 끊기 위해서는 레이어 우클릭 후
Detach instance를 사용하면 이용 가능합니다.
기본적으로 스테이스바는 고정되어 있기 때문에
Prototype에 들어가서 Sroll behavior의 포지션을
Fixed로 변경하면 스크롤 중에도 고정되어 있습니다.
왼쪽에 레이어가 FIXED와 SCROLLS와 구분되어 생성/관리 가능합니다.
키보드도 동일하게 구성하여 레이어를 FIXED로 이동시킵니다.
안드로이드 기본 세팅이 끝나게 됩니다.
피그마 - iOS 환경 기초 세팅
프레임을 iOS 아이폰13&14(가로 390)를 기본적으로 많이 사용합니다.
하지만 이번 강의는 아이폰 13mini 프레임을 사용하여 만들어 보겠습니다.
컬러 태마별로 다양한 UI가 존재하고 아이패드 UI도 존재합니다.
스테이스바 라이트 버전을 복사하여 프레임에 붙여 넣습니다.
Detach instance를 사용하여 인스턴스를 해제하고
Prototype에 들어가서 Sroll behavior의 포지션을
Fixed로 변경하면 스크롤 중에도 고정되어 있습니다.
사파리 라이트 버전에 있는 라인을 아래 여백 8픽셀을 유지하면서
동일하게 붙여넣고 레이어를 FIXED로 이동시킵니다.
위 여백 8 정도를 유지하면서 키보드를 붙어넣습니다.
동일하게 진행하게 되면 키보드에 레탱클 개체와 있더라도
키보드가 먼저 보이고 고정되어 있게 됩니다.
피그마 - PC 환경 기초 세팅
모바일뿐만 아니라 PC도 프로덕트로 PC 웹만 전문적으로 하는 사람도 있습니다.
프레임을 Desktop중에 Macbook Air 프레임으로 사용합니다.
(1920도 많이 사용하지만 범용적으로 사용하기 위해서 1280을 선택)
위 리소스를 사용해 크롬 브라우저 상단을 복사하여 프레임에 붙여 넣습니다.
Detach instance를 사용하여 인스턴스를 해제하고
Prototype에 들어가서 Sroll behavior의 포지션을
Fixed로 변경하면 스크롤 중에도 고정되어 있습니다.
붙여 넣기된 프레임을 복사하여 사파리 브라우저 상단을 복사하하고
프레임에 붙여 놓고 동일하게 고정합니다.
반응형 디자인 시안을 만들 때 유용한 설정값은
크롬 프레임에서 디자인 패널에 들어가 Layout grid를 플러스하고
Grid를 Columns로 변경하고나서 카운트를 16으로 설정,
마진을 8로 설정, 거터를 16으로 설정합닏다.
오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 플러그인, 모바일/PC 환경 설정에 대해서 알아보겠습니다.
지금까지의 내용은 강의를 통해
보실 수 있습니다
https://mcode.co.kr/
메타코드M
빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다.
mcode.co.kr
- 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄
'Figma > METACODE_Figma' 카테고리의 다른 글
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_아이콘 변수값 (0) | 2024.02.18 |
|---|---|
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_컬러 시스템, 폰트 스타일 (1) | 2024.02.18 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 작업환경 설정, 파일 썸네일, 리소스 (1) | 2024.02.18 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 오토 레이아웃 버튼,플로팅 버튼과 오토 레이아웃 활용 (0) | 2024.02.17 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 심볼/텍스트 아이콘, 오토 레이아웃 (1) | 2024.02.16 |