줍줍하는 블로그 줍줍하는 블로그

※피그마 영문 버전 기준입니다. 피그마 컴포넌트 사용법 컴포넌트란 중복되는 부분을 프로토타입화해서 필요시마다 재사용 가능하게 만든 것인데요, 디자인에서 반복적으로 사용되는 UI 디자인 요소를 컴포넌트화 해서 사용할 경우 작업 시간을 현저하게 줄일 수 있습니다. Component 컴포넌트 단축키 4개의 마름모 => 부모(마스터) 컴포넌트 / 빈 아이콘 => 파생된(인스턴스) 컴포넌트 Mac Command + option + K Window Ctrl + option + K Variants 컴포넌트 모음 각 컴포넌트를 만들어 Design panel 에서 variants를 만들 수 있습니다. 1. N개 컴포넌트 생성 후 전체 드래그해서 선택 2. 디자인 패널의 컴포넌트 항목의 Combine as variants..

※피그마 영문 버전 기준입니다. 피그마 사용법 정리 피그마에서는 Frame이라는 개념을 사용합니다. 피그마를 사용해보신 분이라면 A 또는 F 단축키를 이용해 프레임을 만들 수 있다는 걸 아실텐데요. 이 프레임 만드는 모습이 R키를 눌러 Rectangle을 만드는 모습과 똑같아, 이 둘의 차이점에 대해 설명이 필요할 것 같습니다. 피그마 Rectangle VS Frame Frame으로 도형을 만들 경우 피그마에서 제공하는 프레임에 대한 다른 옵션들을 설정할 수 있어 반응형 디자인에 유리합니다. 또, 프레임으로 만든 도형은 프레임의 사이즈가 변경되어도 틀 안 도형 요소에 대한 변형이 일어나지 않습니다. 그러나 Rectangle로 도형을 만들어 Group화 하여 이용하게 될 경우, Group 사이즈의 변경이 ..

Figma 오른쪽 패널 Design, Prototype, Inspect 피그마 디자인 패널 피그마 사용해보셨나요? UIUX의 떠오르는 툴셋 피그마의 기능에 대해 정리해보겠습니다. 오늘은 오른쪽 패널 중 Design 패널의 단축키를 정리해보겠습니다. ※피그마 영문 버전 기준입니다. 왼쪽 사진에 보이는 것이 피그마 UI 상 오른쪽에 위치한 Design 패널인데요, Design 패널에는 정렬과 오브젝트의 위치, 각도, 굴곡, 레이어, 면과 선, 컴포넌트 정보와 움직임 제한 그리고 내보내기 등에 대해 설정할 수 있습니다. 피그마 정렬 오브젝트 선택 후 정렬 또는 프레임안에서 정렬 버튼을 누를 경우 프레임 기준으로 정렬됩니다. 단축키 option (Alt) + A, W, S, D를 누르면 도형이 방향키처럼 따라 ..

창의적인 도구가 인터넷을 만나면? UIUX 디자인의 수요가 많아지면서 UIUX를 표현하기 위한 툴 또한 다양해졌습니다. Adobe에서 나온 XD, Photoshop, 맥의 Sketch 그리고 Zeplin 이 있는데요, 2021년 UI 디자인 통계에서 피그마(Figma)의 점유율 가장 높게 차지했습니다. 피그마는 웹과 앱 모두 자연스러운 동작으로 이용이 편리하고 가볍습니다! 팀원들과의 공유에 있어서도 링크 하나로 빠르게 공유되고 링크로 프로젝트에 접근하는 사람도 별도의 설치 없이 이용할 수 있어 간단하죠. 피그마의 주요 특징에는 실시간 업데이트 되기때문에 팀원들 모두가 결과물의 최신 상태를 늘 확인 할 수 있고, 한 파일 내에서 여러명이 동시에 작업물을 만들며 빠른 피드백이 가능합니다. 게다가 브라우저에서..