728x90 피그마9 [피그마] 반응형 설계를 위한 리사이징에 대한 이해 리사이징(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. [피그마] 프레임의 속성 피그마에서 반드시 알아야 하는 프레임의 속성에 대해 알아보자 프레임을 추가하는 방법 왼쪽 상단에서 프레임 버튼을 선택하거나 단축키 F 또는 A를 누르면 된다. A가 단축키인 이유는 피그마의 프레임이 다른 툴에서 사용하는 아트보드(Art Board)의 개념을 가지고 있기 때문이다. 프레임의 개념 사각형(Rectangle)과 프레임의 차이 프레임과 그룹의 차이 프레임은 프레임의 크기를 변경해도 내부 요소가 변하지 않는데, 그룹은 그룹의 크기를 변경하면 그룹 내부 요소들의 크기도 변경한다. 프레임의 경우 Constraints 기능을 활용해서 반응형 디자인을 만들 수 있다. Layout grid 와 Constraints를 합쳐서 활용하는 방법 이런 프레임이 존재할 때 엔터를 눌러서 하위 요소를 전부 선택한다. .. 2022. 10. 24. [피그마] 오른쪽 패널 설명 피그마 오른쪽 패널 기능에 대해 알아보겠습니다. 디지안 패널 (Design) 아무것도 선택하지 않았을 때 오브젝트 선택 시 프레임 선택 시 정렬에 대해 알아보자 기본 정렬 단축키 가로/세로 간격 정렬 단축키 스트로크 (선) Effect (효과) 2022. 10. 23. [피그마] 왼쪽 패널 설명 피그마 왼쪽 패널에 대한 설명 레이어 패널 (Layers) 피그마의 왼쪽 패널은 상단의 페이지와 하단의 레이어로 구성되어 있다. 페이지는 디자인 파일의 하위 작업 공간으로서 각각 독립된 캔버스를 가지고 있다. 무료 버전에서는 최대 3개까지 페이지를 생성할 수 있다. (유료 버전에서는 제한 없이 생성이 가능하다.) 플랜에 상관없이 Draft에서는 제한 없이 생성이 가능하다. 피그마에서는 오브젝트 단위로 레이어가 생성이 된다. 레이어는 레이어 별로 잠금을 할 수도 있고 숨길 수도 있다. 해당 기능의 단축키는 아래와 같다. 또한 잠근 모든 레이어를 한번에 열고 싶을 때는 퀵액션(Ctrl + /)를 연 후 'Unlock all object'를 치면 된다. 숨긴 모든 레이어를 한번에 열고 싶을 때는 퀵액션(Ctr.. 2022. 10. 2. 이전 1 2 다음 728x90
