피그마 기초강좌 파해치기 [피그마 text style]

[버튼 컴포넌트 제작하기]

• 컴포넌트란 ? 두번 이상 재사용될  UI Asset

[text 스타일 지정하기]

• Create Style 기능으로 버튼의 Text 스타일 만들기
• text를 입력할때는 text단축키 t를 누른다
• text입력 후 우측 design패널에서 button text 편집
• 항상 문자의 시작을 대문자로 하고싶을 경우 type details -> letter case -> title case
• 같은 폰트 다른 사이즈의 폰트 생성 (복사 기능 활용)
• 오른쪽 design 패널 -> style -> create style -> 같은 폰트 다른 사이즈의 폰트 생성 -> design 패널의 text에 스타일 생성된것을 확인할 수 있다

[text 스타일 편집하기]

• 오른쪽 design 패널 -> style -> 우클릭 -> edit style 

[text 복사]

• 일반 일러스트, 포토샵과 동일하게 alt + shift
• command + d를 누르면 같은방향으로 객체 복사

 

text 단축키 t를 사용해 텍스트 생성 후 아무 글자나 적는다

button의 글자 입력후 우측 text 패널에서 스탕리 설정

스타일 설정후 글자 복사를 통해 여러 글자 생성

두번째 글자의 사이즈를 조정해 새로운 스타일 생성

같은 폰트의 다른 사이즈 스타일을 생성하기위해 위와 동일한 방법으로 글자 선택후 우측 design 패널에서 edit text style    -> name -> Button / Md 와 같은 네임 설정

위의 이미지처럼 text style에 두가지 스타일 설정 완료

나머지 스타일도 연결시켜 변경하고 싶다면 위의 사진에서 보이는 우측 패널을 따라 text -> text style -> 원하는 button 스타일을 클릭하면 서로 연결되어 함께 글자 사이즈가 변하게 된다