Figma 실무 꿀팁

1.폰트 1-1.font-family Variable Font 사용을 기본값으로 해요 웹사이트 작업 시 폰트를 3가지 이상 사용하지 않는 것을 권장해요 국문 폰트는 용량이 커서 로딩을 느려지게 할 수 있어요 단 영문폰트는 용량이 가볍기 때문에 3개 이상 사용해도 괜찮아요 1-2.font-size 소수점 사용을 지양해주세요 1-3.line-height %로 설정하면 반응형 작업시에 용이해요 figma line-height : 150% → CSS line-height : 1.5 1-4.letter-spacing %로 설정하면 반응형 작업시에 용이해요 1-5.vertical-trim typography → type setting 안에서 설정할 수 있는 옵션으로 cap-height 라고 이해하면 돼요 인쇄물이나 팝업 등, 퍼블리싱을 고려하지 않아도 되는 작업에 사용하면 좋은 옵션이예요 퍼블리싱 환경에서는 지원하지 않는 속성이라 시안과 실제 구현환경에 큰 차이가 발생해요 2.디자인 시스템 2-1.color 역할 기반으로 명명하기 2-2.spacing

👀 어, 나 이거 본 적 있어 000도출항목_v1.2.2 000기획안_v1.2 어디선가 본 듯한 이 익숙한 v0.0.0 규칙, 회사에서 주고 받는 파일에서 자주 볼 수 있을텐데요 이 명명규칙을 Semantic versioning라고 한답니다 Semantic versioning 기획 혹은 개발 과정에서 문서 파일의 버전을 명확하게 표현하는데 사용되는 규칙 메이저, 마이너, 패치 세가지 버전으로 구분 상황에 따라 두자리만 표기하기도 함 버전표기 구분 설명 v.X.0.0 Major Version 하위 버전과 호환될 수 없을만큼 변경됐을 때

🗣 : 피그마 링크 누르면 데스크탑 앱으로 보고 싶은데 자꾸 왜 인터넷 창이 떠요 설정만 바꾸면 되는데.. 아직도 웹으로 보고 계시는거 아니죠? 🥲 지금 보고있는 이 파일만 app으로 보고싶어요 피그마 앱,웹 동일한 계정으로 로그인 좌측 상단 Figma 아이콘 클릭 → 아래에서 2번째 Open in desktop app 클릭 링크 클릭시 항상 app으로 보고싶어요 피그마 앱에 로그인합니다 피그마 웹 링크에 들어갑니다 (이 옵션은 웹에서만 뜹니다) 앱과 웹 둘 다 동일한 계정으로 로그인 좌측 상단 Figma 아이콘 클릭 → Preferences 클릭→ Open links in desktop app 클릭

페이지 이동 완전 간단하게 하실게요! 👀 스타일가이드에서 컨텐츠페이지까지 페이지 스크롤 왔다갔다 정신 없다구요? 그럼 이런 방법은 어떠세요? 1️⃣ 이동하고자 하는 페이지(page1) 링크 복사 2️⃣ 지금 작업중인 페이지에 아무 버튼이나 만들고 링크 복붙! 3️⃣ (page1)에 작업중인 페이지도 똑같이 버튼 만들어주고 4️⃣ 스크롤하다가 정신 잃지않고 빠딱빠딱 원하는 곳으로 이동하면서 작업하기 피그마 작업하다가 잠들지말고 이렇게 집중해보아요오옹 (*σ´∀`)σ

지금 작업중인 페이지의 모~~든 텍스트를 한 번에 선택하고 싶은데요! 1️⃣ 좌측 상단 'Figma Icon' 눌러서 'Quick Actions' 클릭 2️⃣ Select all text layers 👀 한 번에 모든 폰트 통일하기, 뒤죽박죽한 폰트들 한번에 잡고 다시 설정할 때 유용해요 저는 자간 굵기 뒤죽박죽할때 이걸로 바로 통일하고 다시 잡아요!

스타일 효과와 상관없이 텍스트 내용 붙여넣는 법! 1. 개체 복사 (Ctrl+C) 2. 서식없이 붙여넣기! (Ctrl+Shift+V) Mac은 Ctrl→Cmd