728x90 피그마13 UI 디자이너가 많이 사용하는 툴 소개 (대세는 피그마) UI 디자이너들이 사용하는 툴은 다양합니다. 2022년까지만 해도 5가지 정도의 툴이 서로 경쟁했지만 2023년 부터는 피그마를 압도적으로 많이 사용하고 있습니다. 그럼에도 아직 현업에서는 다른 툴들을 사용하고 있는 회사들도 있으니 이들에 대해 알아보는 시간을 가지려 합니다. 각 툴은 각각 장점과 특징이 있으므로 본인이나 회사의 목적에 맞게 선택하여 사용하면 좋을 것입니다. 1. 피그마 (Figma) 피그마는 웹 기반 UI 디자인 및 프로토타이핑, 협업툴입니다. 클라우드 기반으로 웹 브라우저에서 바로 사용할 수 있으며, PC용 프로그램도 있으니 편하게 선택하면 됩니다. 부분 유료 툴이지만 개인이 사용하면 거의 무료에 가까운 점도 매력적입니다. 올인원 디자인 툴로서 다양한 기능을 하나의 툴로 쉽고 빠르게 .. 2024. 1. 4. 피그마 단축키 모음 자주 쓰는 피그마 단축키 모음입니다. 보기 Windows Mac 메뉴 숨기기/보기 Ctrl + \ Cmd + \ 안내선 보기/숨기기 Shift + R Shift + R 기본 툴 Windows Mac 선택/이동하기 V V 텍스트 T T 원 O O 사각형 R R 프레임 F F 선택/그룹 Windows Mac 여러 요소 선택 Shift + 클릭 Shift + 클릭 색 선택 (아이드로퍼) I I 그룹/프레임 내 요소 선택 Ctrl + 클릭 Cmd + 클릭 전체 선택 Ctrl + A Cmd + A 그룹 Ctrl + G Cmd + G 그룹 해제 Shift + Ctrl + G Shift + Cmd + G 프레임으로 만들기 Alt + Ctrl + G Option + Cmd + G 커서 Windows Mac 요소 간격 .. 2023. 10. 10. [피그마] 오토 레이아웃 사용하기 피그마에서 오토 레이아웃을 사용하는 방법에 대해 알아보겠습니다. 오토 레이아웃 알아보기 같은 스타일의 버튼을 여러 개 만드는 상황을 가정해 보겠습니다. 텍스트의 길이가 다를 경우 감싸고 있는 도형의 상하좌우 여백을 직접 재조정해야 합니다. 아마도 버튼마다 이 과정을 반복해야 하는 노가다를 해야 할 것입니다. 이때 오토 레이아웃(auto layout)을 사용하면 노가다 없이 쉽게 작업을 할 수 있습니다. 아래 그림의 오른쪽 버튼들처럼 텍스트의 길이에 따라 도형의 크기도 유동적으로 변하는 버튼을 아주 쉽게 만들 수 있습니다. 오토 레이아웃은 버튼 뿐만 아니라 리스트, 팝업 등 안에 들어간 콘텐츠에 따라 유연하게 레이아웃이 바뀌어야 할 모든 곳에 적용할 수 있습니다. 오토 레이아웃으로 뉴스피드 헤더 디자인하기.. 2023. 5. 27. [피그마] 반응형 설계를 위한 리사이징에 대한 이해 리사이징(Resizing)이란? - 컨테이너 또는 아이템의 크기가 변화할 때 다른 요소의 크기도 같이 그에 맞춰 변화하는 것을 의미한다. 아이템 변화 → 컨테이너도 변화 : Hug Contents 컨테이너 변화 → 아이템도 변화 : Fill Contents 변화 없음(사이즈 고정) : Fixed Size (Fixed width, Fixed heights) 오토레이아웃이 적용되어 있는 컨테이너에 Shift+A를 눌러 오토레이아웃을 한번 더 적용하면 그 컨테이너는 컨테이너인 동시에 아이템이 된다. 이 때는 컨테이너와 아이템의 두 가지 속성을 다 가지고 있기 때문에 세가지 메뉴가 한꺼번에 뜨게 된다. 2022. 11. 28. [피그마] 오토레이아웃의 구성요소 오토레이아웃이란? - 내부 콘텐츠에 따라 자동으로 변형되는 프레임 - 버튼이나 카드콤포넌트들의 내부 내용이 수정되어도 프레임의 사이즈를 자동으로 수정 오토레이아웃을 만드는 방법 - 오브젝트를 선택하고 Shift + A를 누르면 된다. 오토레이아웃을 만들면 왼쪽 레이어는 프레임으로 감싸지고, 왼쪽 디자인 툴에서는 오토레이아웃 메뉴가 활성화된다. 오토레이아웃은 컨테이너와 아이템으로 구성된다. 컨테이너는 아이템들을 전부 감싸는 공간이며, 컨테이너 안쪽의 오브젝트들을 아이템이라고 부른다. 오토레이아웃의 내부 공간을 Spacing(스페이싱)이라고 한다. 스페이싱은 오른쪽 디자인 툴에서 직접 수치를 입력하거나 붉은 표시 공간을 직접 드래그해서 변경할 수 있다. 오토레이아웃의 외부 공간을 Padding(패딩)이라고 .. 2022. 11. 20. [피그마] 스타일 활용하는 방법 피그마 스타일 활용하기 피그마 스타일을 활용하는 이유 UI 디자인의 일관성 확보하기 위해 제품 및 서비스에서 일관된 사용자 경험을 제공할 수 있다. 유지보수의 용이성이 좋다 Text Style 글자의 다양한 스타일을 미리 정해둘 수 있습니다. 정렬 부분은 스타일로 만들 수 없기 때문에 따로 지정해야 합니다. Color Style 다양한 컬러 스타일을 미리 정해둘 수 있습니다. Effect Style 다양한 효과를 미리 정해둘 수 있습니다. 드랍 쉐도우를 여러개 겹치면 훨씬 자연스러운 그림자를 표현할 수 있습니다. Grid Style 격자도 스타일을 만들어서 재활용할 수 있습니다. 2022. 11. 13. 이전 1 2 3 다음 728x90
