728x90 Study3 [Plugin] Tokens Studio for Figma - Typography 타이포그래피 사이즈 설정 사이트https://typescale.com/ Typescale - Create stunning typography, generate CSS, and find inspiration.typescale.com Font는 Noto Sans KR 또는 Pretendard 사용을 권장한다.폰트의 굵기, 사이즈에 따라 여러 폰트를 미리 토큰으로 만들어두고 사용하면 훨씬 편하다. 이번에는 폰트를 토큰으로 설정하여 세팅하는 방법을 기록해보자! 보통 기본 폰트 사이즈는 16px로 한다. 다음은 작업 전과 후의 사진이다. 1. Sizing 설정Size는 폰트 사이즈에 값을 곱할 때 사용할 값이다. 난 Scale이라는 이름으로 Size는 1.333 값을 저장했다.보통 사이즈 크기 비율은 1.333.. 2024. 12. 7. [Plugin] Tokens Studio for Figma - Color 요새 앱들은 기본적으로 테마가 있다.시스템 자체에서 Light모드와 Dark모드를 지원하기 때문에 자연스레 테마 기능을 지원하는 앱들이 늘어나는 추세이다. 그럼 디자인을 할 때 Light 모드와 Dark 모드를 모두 디자인 해야 하는가? 답은 No! 번거롭게 두 번 디자인 하는 것은 효율적이지 못하다. 같은 디자인에 색상만 변경하여 모드를 변경해주는 것이다 보니, 토큰을 잘 이용해준다면 우리는 Light/Dark 뿐만 아니라 더 다양한 색감의 테마를 쉽게 디자인 할 수 있게 된다. 그러기 위해 우리가 사용해 볼 플러그인은 'Tokens Studio for Figma'이다. 우선, 이전에 포스팅한 'Tailwind Color Generator'를 알고 있다면 더 수월하게 해당 플러그인을 사용할 수 있을 것.. 2024. 12. 6. [Plugin] Tailwind Color Generator 피그마에서는 컬러 세팅을 도와주는 다양한 설정과 라이브러리가 있다. 도형에 색상을 넣으려면 Fill 또는 Stroke 등의 메뉴에서 +를 눌러 컬러를 지정해줄 수 있다.그럼 사진과 같이 헥스코드로 # 뒤에 6자리의 문자 또는 숫자로 색상 코드가 표시된다. (*16진수 RGB 표현방식) 이렇게 쉽게 색상을 선택할 수 있지만, 프로젝트나 실무에서는 이렇게 사용하면 아주 곤란하다.해당 색상이 프로젝트의 Primary Color라고 가정했을 때, 컬러의 대한 세팅을 해주지않으면, 해당 컬러를 사용하기 위해서는 매번 헥스코드를 가져와야 한다는 번거로움이 발생하기 때문이다. 이런 경우를 대비하여 우리는 스타일을 미리 설정해둘 수 있다.다음과 같이 컬러표에서 + 아이콘을 선택하면 Style을 지정하는 팝업이 뜬다... 2024. 12. 6. 이전 1 다음 728x90
