본문 바로가기

전체 글143

피그마에서 마진 값 구하는 방법 마진 요소의 가장자리에 추가된 여백 원하는 요소를 클릭한 후 alt를 누른 채 값을 구하고 싶은 요소에 커서를 옮기면 두 개체의 마진 값이 나온다. 정확한 위치의 값을 알아야 할때 도움이 된다! 2024. 2. 22.
02.22.24 TIL 오늘 어떤 문제가 있었나요? 프로토타입 시현을 하는데 컴포넌트로 바꿔서 그런지 갑자기 카드가 움직여야 하는데 얼굴들만 둥둥 돌아다녔었다. 문제 해결을 위해 어떤 시도를 해봤나요? 먼저 다른 팀원이 비슷한 질문을 하러 갔었던 튜터님이 계셨어서 같은 분에게 추가 질문을 하러 갔다. 문제를 어떻게 해결했나요? 튜터님은 이번 프로젝트는 프로토타입에 집중하기보다는 컴포넌트에 집중하는 게 좋았을 것이라고 피드백을 해주셨고, 해당 문제는 찬찬히 뜯어보신 후 내일쯤 원인을 알려주시겠다고 하셨다. 문제를 어떻게 해결 할 건가요? 내일까지 기다려보려다가 궁금해서 안 되겠어! 내가 어디서 잘못한 걸까?라는 생각이 들어 피그마 파일에 들어가 전에 쓰던 프레임의 프로토타입과 얼굴이 돌아가는 프레임의 프로토타입을 비교해 보았다... 2024. 2. 22.
피그마에 폰트 가져오기 피그마에 폰트 넣는 방법 figma.com/downloads 접속 (한번만 해두면 됨) 맥용 폰트 인스톨러 다운 -> 실행 원하는 폰트 다운로드 (맥용으로!) 폰트 zip 풀어주기 -> 폰트 파일 들어가기 -> static -> 폰트 다중 선택 -> 더블 클릭 -> 서체 설치 -> 피그마 새로고침 Public 과 Web 파일 차이 1) Public 디자이너가 흔히 쓰는 폰트 2) Web 개발자와 공용으로 쓰는 폰트 otf와 ttf차이 1) otf -> 맥용 2) ttf -> 윈도우용 (공용으로 써도 되지만 폰트가 깨질 수도 있음) 2024. 2. 21.
02.21.24 TIL 오늘 어떤 문제가 있었나요? 디자인 요소에 집중을 하다가 진도가 전혀 나가지 못했었다. 이 색이 좋을까, 저 색이 좋을까? 이런 스타일이 좋을까, 저런 스타일이 좋을까? 12시부터 6시까지 계속 똑같은 고민만 하며 색과 배경 이미지만 열심히 바꾸고 있었다. 이러다가는 내일까지 마무리를 못 할 수도 있겠다는 생각이 들었다. 문제 해결을 위해 어떤 시도를 해봤나요? 팀원들과 이야기를 하며 우리가 현재 집중해야 하는 부분에 대해 상의했다. "이러다가는 우리 내일까지 기한을 못 맞출 것 같아요! 색상과 디자인은 제쳐두고, 먼저 넣어야 하는 요소들 정리 빠르게 갑시다! 튜터님에게 중간점검하기 위한 요소들만 빠르게 맞춰요!" 문제를 어떻게 해결했나요? 페이지 구성을 빠르게 마치고 나니 페이지의 문제점이 눈에 도드라.. 2024. 2. 21.
컴포넌트ㅣ인스턴스ㅣ프로퍼티ㅣ베리언트ㅣ오토레이아웃 컴포넌트 재사용 가능한 디자인 요소 (원본이라고 생각하면 된다) 피그마에서 버튼, 아이콘, 헤더, 푸터 등과 같이 디자인이 반복적으로 사용되는 요소들에 사용된다 컴포넌트를 만들어 사용함으로써 일관성을 유지하면서 프로젝트의 효율성을 높일 수 있다 컴포넌트를 수정하면 인스턴스가 함께 변경된다 인스턴스 (컴포넌트의 복제본) 컴포넌트의 모양, 스타일 등을 상속 받는다 수정 가능 인스턴스를 수정해도 기존 컴포넌트에는 영향을 안준다 컴포넌트 단축키 cmd+option+K 컴포넌트 디테치 (연결해제) 방법 마스터 컴포넌트는 원본이라 디체치가 안된다. (Detach Component 플러그인 쓰면 가능) 인스턴스 디테치 1) 우클릭->Detach instance 2) 또는 ctrl + alt + B 마스터를 실수로 지.. 2024. 2. 20.
디자인 가이드ㅣ스타일 가이드ㅣ디자인 시스템ㅣ호버ㅣ토글ㅣ글래스모피즘ㅣ인디케이터 호버(Hover) 피그마 디자인 도구에서 마우스를 요소 위로 움직일 때 나타나는 시각적 효과를 말한다 토글(Toggle) 버튼, 스위치 등의 UI 요소를 클릭하거나 터치하여 특정 기능을 켜거나 끌 때 사용되는 용어 글래스모피즘(Glassmorphism) 유리와 관련된 소재의 시각적 효과를 따라 하는 디자인 트렌드. 투명한 유리 판과 같은 효과를 내고 배경, 텍스트, 아이콘 등의 요소들이 유리 뒤로 흐르는 듯한 느낌이 난다. 인디케이터 (Indicator) 어떠한 상태, 위치, 조건을 나타내는 아이콘 또는 표시 요소 작업 진행 상태를 나타내는 프로그레스 바, 배터리 아이콘, 현재 페이지 위치를 표시하는 페이지 인디케이터 등 사용자에게 시스템의 상태나 작동 중인 기능에 대한 시각적 정보를 제공한다 디자인 가.. 2024. 2. 20.

티스토리툴바