피그마(figma) 핵심

안녕하세요. 오늘은 마스크(Mask)에 대해 알아보도록 하겠습니다. 마스크는 포토샵을 이용하신 분들이라면 익숙하실 텐데요. 피그마에서 마스크를 쓰는 방법을 설명드리려고 합니다. 마스크는 레이어(벡터, 이미지, 그룹, 프레임... 등)의 보여줄 부분과 숨기는 부분을 나눕니다. 마스크는 Z 축 깊이를 이해하면 좋습니다. 레이어가 중첩되는 관계를 고려해서 순서를 바꾸거나 위치를 조정합니다. 가장 바닥면에 있는 레이어의 위에 있는 레이어(벡터, 이미지, 그룹, 프레임... 등)를 포함하는 모습입니다. 따라서 Mask Group으로 표현이 되고 바닥면 모양의 바깥 영역은 가려져서 보이지 않으며, 바닥면 모양의 자체 Fill, stroke 색상은 투명해집니다. 마스크를 적용하는 방법은 크게 3가지입니다. 1. 마스..

안녕하세요. 오늘은 피그마 파일을 내 컴퓨터에 저장하고 저장한 파일을 다시 불러오는 방법을 알려드리겠습니다. 피그마는 기본적으로 클라우드 저장으로 별도로 저장하지 않아도 됩니다. 적용하는 모든 것이 실시간 저장이 돼서 편리합니다. 그럼에도 불구하고 원본을 저장할 수 있는 경로가 있습니다. 로컬 파일 저장하기 1. 저장할 디자인 파일을 실행 2. menu > File > Save local copy.. 3. 내가 설정한 프로젝트명 뒤에 확장자가 '.fig' 이렇게 저장됩니다 로컬 파일 불러오기 1. 위 방법으로 저장한 '프로젝트명.fig' 파일을 선택하고 2. 팀프로젝트 또는 드래프트에 드롭 다운하면 됩니다 참고로 로컬파일로 저장을 하면 개별 파일이기 때문에 다른 편집자, 뷰어 권한으로 남긴 또는 내가 남..

안녕하세요. 프로토타입 인터렉션 복사 붙여 넣는 방법을 알려드리겠습니다. 프로토타입을 간단히 설명하면 디자인 후 서비스에 대해 코딩이나 개발을 하지 않고도 움직임을 넣어서 기획자, 디자이너, 개발자... 등 이해관계자들이 실제 구현될 서비스에 대해 미리 사전에 점검을 할 수 있고 최종으로 서비스 출시 전 사용자가 실제로 서비스를 이용하면서 화면 흐름상 어색하진 않은지 개선할 영역은 없는지... 등 사용성 테스트(Usability Testing)를 할 수 있습니다. 프로토타입은 크게 스크롤과 화면연결로 볼 수 있습니다. 스크롤(scroll) : 콘텐츠의 길이가 뷰포트 영역보다 클 경우 콘테츠를 보는 방식을 수직스크롤, 수평스크롤, 모든 방향 스크롤로 지정합니다. 스크롤은 프로토타입 패널에서 설정할 수 있으..

안녕하세요. 지난 포스팅에서 프레임과 아트보드 그룹의 차이에 대해서 알아보았습니다. 이번엔 프레임의 속성 중 프레임 설정방법과 컨스트레인트에 대해 살펴보겠습니다. 사전설정된 디바이스 프레임을 툴바에서 선택하면 사전 설정된 디바이스가 우측 디자인 패널에서 보입니다. 아이폰, 안드로이드 모바일부터 데스크탑 태블릿 종이 소설미디어... 등 이미 프레임 영역을 만들어져 있습니다. 사전 설정된 디바이스를 선택해서 디자인을 하면 프레젠트 모드에서 목업에 씌워진 형태로 프로토타입을 할 수 있습니다. 사전 설정된 프레임 활용 1. 프레임 단축키 A, F 누르거나 툴바에서 프레임 아이콘을 클릭 2. 우측 디자인 패널에서 원하는 디바이스를 선택 3. 캔버스에 프레임 생성 4. 프로토타입 패널로 전환 5. 프레젠트 모드에서..

안녕하세요. 이번 포스팅에서는 피그마의 핵심 프레임(Frame)에 대해서 알아보겠습니다. 프레임은 툴바에 위치해 있지만 기초툴&인터페이스 카테고리에 다루지 않고 피그마의 핵심기능으로 분류했습니다. 그만큼 중요한 기능이고 프레임을 잘 활용하느냐 그렇지 않느냐로 상당 부분 다시 작업해야 하는 번거로움이 생기기 때문입니다. Adobe illustration, Adobe photoshop 그밖에 다른 디자인 프로그램을 사용할 때 아트보드(대지)를 디자인 영역으로 두고 그 내부에 디자인하는 게 상당히 디자이너에겐 익숙한 형태입니다. 피그마의 프레임이 아트보드와 동일한 개념으로 생각하시면 되지만 큰 차이점이 있습니다. 프레임(Frame)과 아트보드(Artboard)의 차이점 아트보드는 중첩해서 사용하지 않지만 프레..

안녕하세요. 오늘은 컴포넌트와 인스턴스의 관계 그리고 스타일화에 대해서 알아볼까요. 컴포넌트는 한 번 이상 반복적으로 사용하는 UI입니다. 디자인 시스템의 핵심 빌딩 블록 중 하나이며 재사용은 시각적 및 기능적 일관성을 유지하는 데 도움이 됩니다. 아이콘 같이 작은 단위도 컴포넌트로 만들어두고 그걸 복사해서 다른 컴포넌트의 일부로 사용합니다. 그럼 어떤 것들을 컴포넌트로 만들어야 할까요? 구글에서 만든 머터리얼 디자인 가이드(Material design guide), IOS에서 만든 휴먼 인터페이스 가이드(Human interface guide), IBM에서 만든 카본 디자인 시스템(Carbon design system)을 참고하시면 됩니다. 아래 이미지를 클릭하면 해당 웹사이트로 이동합니다. 디자인 시..

안녕하세요. 지난 포스팅에선 컴포넌트 속성 중 베리언트 추가 방법에 대해 알아보았습니다. 나머지 속성인 불리언, 인스턴스 스와이프, 텍스트 속성에 대해 이어서 살펴보겠습니다. 다시 한번 정리하자면 Property(프로퍼티) = 속성 = 컴포넌트 자체속성 Variants(베리언츠) = 변형 = 단일 컴포넌트에서 파생된 다양한 컴포넌트를 세트로 묶어서 관리 컴포넌트 자체가 가지고 있는 속성을 프로퍼티라고 합니다. 베리언트는 한 개의 컴포넌트를 (상태, 색상, 크기... 등) 필요에 의해 다양한 컴포넌트로 변형 만들고 세트로 묶어서 관리하는 것을 말합니다. 프로퍼티는 현재 총 4가지가 있습니다. 1. Variant (베리언트) : 컴포넌트의 여러 상태에 따른 종류, 여러 컴포넌트를 세트로 묶음 2. Boole..

안녕하세요. 지난 포스팅에선 컴포넌트는 무엇인지 컴포넌트는 어떻게 만드는지 알아보았습니다. 컴포넌트를 만들기만 해도 활용도가 높지만 컴포넌트의 속성을 추가하고 잘 활용하면 작업의 속도뿐만 아니라 시스템으로도 더욱 강화됩니다. 지금부터 컴포넌트 속성에 대해 알아보겠습니다. Property(프로퍼티) = 속성 = 컴포넌트 자체속성 Variants(베리언츠) = 변형 = 단일 컴포넌트에서 파생된 다양한 컴포넌트를 세트로 묶어서 관리 컴포넌트 자체가 가지고 있는 속성을 프로퍼티라고 합니다. 베리언트는 한 개의 컴포넌트를 (상태, 색상, 크기... 등) 필요에 의해 다양한 컴포넌트로 변형 만들고 세트로 묶어서 관리하는 것을 말합니다. 프로퍼티는 현재 총 4가지가 있습니다. 1. Variant (베리언트) : 컴포..

안녕하세요. 이번 포스팅에서는 컴포넌트에 대해서 알아보겠습니다. component는 무엇일까요? 직역하면 구성요소로 풀이됩니다. 구성요소를 사전정의하면 무엇이든 구성하는 가장 작은 단위, 부품, 요소입니다. 프로그래밍에서 컴포넌트는 재사용에 대한 필요성, 중요성으로 시스템적으로 배포할 수 있는 가장 작은 모듈을 이야기합니다. 일회성 비주얼 작업을 위한다면 굳이 컴포넌트를 할 필요는 없지만 웹사이트, 모바일웹사이트, 어플리케이션도 전부 디자인에서 끝나는 게 아니라 개발까지 마무리되어야 사용할 수 있게 됩니다. 피그마 프로토타이핑 툴은 기획자, 디자이너, 개발자를 위한 협업툴인만큼 디자인 목적에 따라 단순히 보기 좋게 이미지로 얹혀서 작업하는 게 아니라 배포 가능한 가장 작은 모듈인 컴포넌트를 고려해야 합니..

안녕하세요~ 오토 레이아웃으로 버튼, 리스트, 카드 만들기를 실습하고 오토 레이아웃이 뭔지 알아봤습니다. 오토 레이아웃의 다른 옵션 및 기능에 대해서 알면 더 쉽게 요소들을 수정 및 제어할 수 있습니다. 우측 디자인 패널에서 오토 레이아웃 속성 보면 아래 이미지와 같습니다. 빨간색 영역에 대해 좀 더 알아봅시다. 가장 먼저 알아볼 영역은 배열입니다. 두 개의 아이템이 있으면 두 항목의 위치와 거리가 있을 거예요. 그 상태로 오토 레이아웃을 하면 내가 만든 그 기준으로 간격값, 배열이 자동 세팅됩니다. 썸네일에서도 보이듯이 총 9개의 위치로 배열됩니다. 크기가 다양한 자식객체들도 배열 기준을 따라 미세하게 조정됩니다. 좌측상단, 중앙상단, 우측상단 좌측중앙, 정중앙, 우측중앙 좌측하단, 중앙하단, 우측하단..

안녕하세요. 이번 포스팅에서는 지난번 카드 만들 때 슬쩍 사용했던 오토 레이아웃의 특별한 기능 Fixed, Hug, Fill을 살펴보려고 합니다. 리사이징의 개념을 이해하려면 부모-자식 관계를 먼저 설명해야 할 것 같습니다. 어떤 객체든 오토 레이아웃을 하면 프레임이 객체를 감싸는 형태로 변경됩니다. 이해를 위해 아래의 이미지를 참고해 주세요. 첫 번째 이미지의 텍스트, 벡터, 프레임 레이어를 살펴볼까요. 각각 개별 레이어로 되어 있습니다. 두 번째 이미지는 동일한 텍스트, 벡터, 프레임을 오토 레이아웃을 (단축키 : Shift+A) 적용한 예시입니다.벡터와 텍스트를 오토 레이아웃하면 상하좌우 패딩이 객체 바깥으로 자동 8로 세팅됩니다. 벡터와 텍스트의 자체 크기보다 폭 16, 높이 16 더 커진 상태입..

안녕하세요. 이번시간에는 카드를 만들어 보려고 합니다. 카드는 단일 주제의 내용을 컨테이너 영역에 담아 빠르게 탐색하기에 좋은 UI입니다. 카드 크기를 늘리거나 줄일 때 반응하는 리사이징에 대한 부분은 다음 포스팅에서 다룰 예정입니다. 카드의 구조에 대해서 먼저 살펴보겠습니다. 카드 = 미디어 + 카드정보 이렇게 크게 2개의 영역으로 나누고 내부 적으로는 1. 미디어 = 카드 이미지 2. 카드정보 = 타이틀영역 + 설명글 + 아이콘영역 2-1. 타이틀영역 = 아바타 이미지+타이틀+시간텍스트 2-2. 아이콘영역 = 왼쪽 아이콘영역+북마크 아이콘 이렇게 나누었습니다. 미디어 만드는 방법 1. 미디어 영역 사각형으로 그리기 2. 사각형(R) 선택 400x400 만들고 원하는 이미지 넣기 단축키 : Window..

안녕하세요. 오토 레이아웃 만드는 방법에 대해서 지난 포스트에서 알려드렸는데요. 이번에는 오토 레이아웃 활용편인 리스트를 만들어 보도록 하겠습니다. 오토 레이아웃을 생성하면 우측 디자인패널에서 오토 레이아웃 속성이 펼쳐집니다. 리스트를 만들려면 가장 최소크기의 한 개의 아이템을 만들어야겠죠? 그 아이템도 오토 레이아웃으로 만들겠습니다. 아래 레이어 구조를 살펴보겠습니다. 1. 이미지+타이틀 : 오토 레이아웃하고 이름 title으로 변경 2. title+시간 텍스트 : 오토 레이아웃하고 이름 item으로 변경 3. item 선택 후 상하 패딩 : 8 / 좌우 패딩 : 21 / 색상 : 흰색 / 코너 라운드 : 20 4. width값을 Hug에서 Fill로 변경 4. 오토 레이아웃 속성 배열값클릭! 단축키 ..

피그마의 다양한 기능 중에 단연 으뜸가는 기능은 오토 레이아웃(Auto layout)이 아닐까 생각합니다! 오토 레이아웃만 잘 활용해도 정말 빠르게 UI 시스템을 만들 수 있습니다. 오토 레이아웃을 쓰지 않아도 디자인은 할 수 있지만 장기적으로 보면 오토 레이아웃을 사용해야 더 원활한 시스템을 구축할 수 있습니다. : ) 내용이 방대하여 한 번에 설명하기보다는 필요한 부분만 볼 수 있도록 여러 타입을 순차적으로 포스팅할 예정입니다. 1. 오토 레이아웃 - 버튼 만들기 2. 오토 레이아웃 - 리스트 만들기 3. 오토 레이아웃 - 카드 만들기 오늘은 오토 레이아웃을 적용하는 방법에 대해서만 간단히 다뤄볼까 합니다. 오토 레이아웃을 만드는 방법은 3가지입니다. 첫 번째, 모든 아이템을 선택 후 단축키 Shif..

안녕하세요. 피그마 클래스에 오신 것을 환영합니다. 이 공간은 개인 작업공간이면서 동시에 열린 공간입니다. 1day class, 2day class에서 공유하는 자료들은 피그마 입문자 및 독학하시는 분을 위한 내용입니다. 피그마 커뮤니티 https://www.figma.com/@yoongood 에서 무료로 누구나 이용할 수 있습니다. 현재 v1은 2023년 3월 기준으로 업데이트되어 있습니다. 피그마는 지속적으로 기능이 추가되므로 그에 맞춰서 저도 계속 업데이트할 예정입니다. 당분간 입문자나 개인 독학용 위주로 게시글이 먼저 작성되며 팀작업을 위한 내용은 추후 넣을 계획입니다. 피그마(figma) 프로토타이핑 툴을 활용해서 다양한 시도를 하고 혹시 도움이 되실 분들이 있다면 자료를 함께 공유하고 공부하는..