반응형 figma8 Figma 핵심 기능 (4편) : 플러그인과 커뮤니티 이번에는 플러그인과 커뮤니티 기능에 대해서 알아보도록 하겠습니다. 피그마에서 자주 사용하는 기능이며, 웹 디자인을 할 때 유저가 편하게 이용할 수 있는 여러 기능을 묶은 모음집이라고 생각하시면 됩니다. 여러 가지 플러그인 기능을 활용해서 나의 작업 속도를 빠르게 만들고, UI를 완성도 있게 구축하는 것이 아니라 테스트해봐야 하는 상황에서도 요긴하게 사용할 수 있어요. 또한 다른 사람이 이미 만들어 놓은 템플릿 등도 커뮤니티에 들어가면 검색해서 활용할 수 있으니 적극적으로 이용해 보시기 바랍니다. 1. 플러그인 알아보기Unsplash는 저작권 걱정 없이 무료로 사용할 수 있는 좋은 사진을 모아놓은 사이트입니다. Figma에서는 이를 플러그인으로 사용할 수 있습니다. Figma 메뉴 바를 보면 각종 도.. 2024. 8. 20. Figma 핵심 기능 (3편) : 오토 레이아웃, 컨스트레인트 이번 시간에는 프레임 크기에 유연하게 대응하는 기능을 알아보겠습니다. UI를 설계할 때 사용환경에 따라 프레임의 크기가 달라지게 되는데요. 이때 사용하는 기기에 맞는 프레임에서도 깨지지 않는 UI를 만들기 위해 디자인의 유연함이 필요합니다. 오토 레이아웃과 컨스트레인트 기능은 디자이너가 만든 규칙에 따라 요소를 재배치해 주는 기능으로 이해하시면 됩니다. 1. 오토 레이아웃(Auto layout) 알아보기 오토 레이아웃은 자동 배치입니다. 디자이너가 규칙을 만들면 그 규칙에 따라 피그마에서 자동으로 요소를 배치해주는 기능입니다. 우선 규칙을 설정하는 방법을 살펴보겠습니다. 모든 요소를 선택해서 마우스 오른쪽 버튼을 클릭한 후 Add auto layout 버튼을 클릭합니다. 단축키는 Shift + A.. 2024. 8. 19. Figma 핵심 기능 (2편) : 컴포넌트, 네스팅, 스마트 셀렉션 이번 피그마의 핵심 기능은 컴포넌트, 네스팅, 스마트 셀렉션입니다. 각각의 기능은 피그마를 더욱 효율적으로 사용할 수 있도록 돕는 역할을 합니다. 컴포넌트로 요소의 속성을 하나의 기준으로 설정한 후에 그다음에 생성한 인스턴스를 더욱 편리하게 작업할 수 있습니다. 네스팅은 같은 모양의 요소에서도 다르게 수정해야 하는 아이콘의 그림을 변경해 주는 작업을 합니다. 마지막으로 스마트 셀렉션은 각 요소 간 간격은 유지하면서 요소의 순서를 변경하는 작업을 도와줍니다. 1. 컴포넌트 알아보기컴포넌트는 재사용 할 수 있게 만든 UI의 묶음입니다. 예를 들어, 버튼을 만들었으면 전체 이미지를 마우스 오른쪽 버튼을 클릭한 후 Create component를 눌러주거나 단축키를 사용하면 컴포넌트를 만들 수 있습니다. .. 2024. 8. 19. Figma 핵심 기능 (1편) : 스타일과 셀렉션 컬러 Figma 디자인을 크게 세 가지 토픽으로 나눠서 기술해 보겠습니다. 먼저 효율적으로 디자인 하는 방법을 알아보겠습니다. Figma의 여러 고급 기능을 사용하면서 반복 작업을 벗어나 효율적인 디자인을 할 수 있는 방법을 알아보겠습니다. 두 번째는 UI의 완성도를 높일 수 있는 기능을 살펴보겠습니다. 그라디언트, 블러, 그림자 등의 이펙트를 배우고 직접 적용하면서 서비스의 완성도를 높이는 방법을 배우겠습니다. 세 번째는 인터랙티브한 디자인을 만드는 것입니다. 내가 만든 디자인에 프로토타이핑을 적용해 봅니다. 실제 작동하는 서비스처럼 만든다는 의미입니다. 결국 가장 좋은 디자인을 찾기 위해서는 디자인을 나열하는 단계를 넘어 실제로 그걸 사용하면서 검증해봐야 합니다. Figma의 프로토타이핑 기능을 사용하여 .. 2024. 8. 17. 좋은 UI 디자인 알아보기 (2편) : 위계 적용 좋은 UI 디자인을 위해서는 일관성을 유지하는 것이 사용자 편의에 좋으며, 이를 어떻게 디자인에 반영할 수 있는지 살펴봤습니다. 이번에는 위계에 대해 알아봅시다. 위계란 중요한 내용과 그렇지 않은 내용을 잘 드러내서 인터페이스를 더 이해하기 쉽게 만드는 것입니다. 색이나 거리, 크기 등을 조정해서 좋은 위계를 만든다면 사람들이 인터페이스를 더 잘 이해할 수 있게 됩니다. 그렇다면 위계를 디자인에 어떻게 반영하는지 살펴보겠습니다. 1. 정보를 미리 나누는 작업 먼저 위계를 적용하기 위해서는 정보를 적절한 크기로 나눠주는 작업이 필요합니다. 보통 UI를 살펴보면, 다른 페이지로 이동할 수 있는 버튼이 있는 내비게이션 영역과 페이지를 간단하게 소개할 수 있는 배너 영역, 각 품목들을 보여주는 콘텐츠 영역.. 2024. 8. 10. 좋은 UI 디자인 알아보기 (1편) : 일관성 유지 좋은 UI 디자인의 정의를 생각해보신 적 있나요? 색상이나 폰트를 잘 사용하거나, 배치를 잘했다는 명확한 기준이 있을지 생각해봅시다. 우선 좋은 UI 디자인은 버튼이나 텍스트, 컬러 등이 어떻게 사용될 지 규칙을 만들어서 사용자가 UI를 쉽게 이해할 수 있게 만듭니다. 요소마다 일관성 있는 스타일을 부여하여 사용자는 큰 노력 없이도 인터페이스를 빠르게 이해할 수 있게 됩니다. 좋은 디자인이 반영된 UI는 사용자가 어디에 집중해야 할 지 시각적으로 보여줍니다. 폰트, 색상, 크기, 여백 등 여러 요소를 통해 중요한 부분은 부각되고, 중요하지 않은 것들은 잘 보이지 않게 만들 수 있습니다. 중요한 정보가 정확하게 강조된 인터페이스는 사용자가 빠르게 사이트를 탐색하여 자신의 목적을 효과적으로 달성하는 것을 돕.. 2024. 8. 10. 이전 1 2 다음 반응형
