💡 25-05-14 (수)
피그마 플러그인이란?
: 피그마에서 사용자의 작업을 도와주는 추가 기능이나 도구
-> 미니 프로그램
▶︎ 반복 작업 자동화, 디자인에 필요한 리소스를 더 빠르게 가져와서 팀 협업을 더 원활하게 할 수 있다
피그마 플러그인 추천
Unsplash : 고퀄리티 무료 이미지
Remove bg : 이미지 배경 제거
Iconify : 수천 개의 아이콘
3Dicons : 3D 아이콘 제작
Material design icons : google Material design 아이콘 사용
Content Reel : 더미 텍스트 및 데이터 제공
-> 현실적인 더미 데이터인 콘텐츠(이름, 이메일, 이미지 등)를 넣어줌
Lorem Ipsum : 더미 텍스트 제공
-> 의미 없는 더미 텍스트(라틴어)를 자동 생성해줌
Auto flow : 두 개 이상의 프레임 사이에 자동으로 선 연결
Wireframe designer : 와이어프레임 자동 생성
DesignDoc (Spectral) : 디자인 작업에 대한 문서화를 도와줌
-> 컴포넌트의 간격, 여백, 패딩 등을 시각적으로 표시해줌
Figmap - Map maker : 지도 기반 디자인
html.to.design : 실제 웹사이트의 HTML을 기반으로 피그마 디자인으로 자동 변환
Mockup plugin : 목업 제공
디자인 스타일 설정
✅ 텍스트 스타일
디자인은 일관성과 지속성이 중요하다
그래서 반복해서 쓰는 텍스트 스타일을 미리 정리해서 이름 짓고 등록한다
-> 효율적이고 빠른 작업이 가능하다
'H2'로 추가해주면 타이포그래피 / 스타일 두군데서 확인할 수 있다
✅ 컬러 스타일
Fill에서 시작해서 추가버튼을 눌러준 뒤 이름을 설정해준다
그러면 이렇게 설정이 된것을 확인할 수 있다
이름 변경이 가능하며 앞에 '이름/'을 입력하면 그룹으로 묶여진다
✅ 이펙트 스타일
컬러 스타일에서 했던 방법과 동일하다
Input UI 구성 요소의 핵심
✅ Label (레이블) : 무엇을 입력해야 하는지를 알려주는 제목 역할의 텍스트
-> Note, Gender
✅ Input (입력필드) : 사용자가 실제로 텍스트나 값을 입력하는 공간
✅ Supporting Text (보조 텍스트) : 입력창에 대한 추가 정보나 도움말 제공
-> 영문 6자 이상 입력하세요 / 비밀번호는 특수문자를 포함해야 합니다
✅ Placeholder (안내 텍스트) : 입력창 안에 흐리게 보이는 예시 텍스트
-> Select a option and change input text above
▪️ 사용자가 아무 것도 입력하지 않았을 때 표시됨
▪️ 입력 예시를 보여줘서 사용자가 어떤 형식으로 입력해야 하는지 힌트를 줌
▪️ 레이블 역할을 플레이스 홀더가 대체 하기도 함
✏️ 회원가입 텍스트 필드 만들기
용어들 알아두기 !
오토레이아웃를 두번 건 이유는 타겟 영역을 넓혀서 어디를 선택하든 적용되게 하기 위함이다
-> 가로/세로 Fill로 바꿔준다 (영역 넓힘)
타겟은 처음에 만들때 구분을 짓기 위해 색깔을 넣어주고 나중에 지워준다
☑️ Boolean을 적용시킬때는 프레임에 걸어야하고 텍스트 프로퍼티에는 텍스트 그 자체에 걸어줘야 한다
Property를 두가지로 나눠서 만들었다
그리고 나서 nested instance를 눌러 두개 컴포넌트를 하나로 합쳐준다
완서엉 - 🥱
✏️ Ant.design 용어 익히기 (컴포넌트로 들어가기)
https://ant.design/components/overview/
앞으로 회사에 들어가서 자주 사용하는 용어들이니 지금부터라도 알아둬야한다
계속 보며 눈에 익히기 ‼️
✔️ Breadcrumb : 현재 위치까지의 경로를 단계별로 보여주는 UI 요소
✔️ Pagination : 콘텐츠를 페이지별로 나눠서 보기 쉽게 만들고 페이지 이동을 할 수 있게 도와주는 UI 요소
처음 보는 용어들을 챗지피티한테 물어보며 뜻을 알고 예시 이미지를 보며 머릿속에 각인시켰다
