피그마 놀이터

안녕하세요. 오늘은 모바일 UI에서 많이 볼 수 있는 토글스위치에 대해 간략히 알아보고 디자인 및 프로토타입을 만들어 보도록 하겠습니다. 토글스위치는 1916년 William J. Newton이 발명한 물리적 토글스위치에서 유래되었습니다. 이러한 스위치는 전등이나 기기의 전원을 켜고 끄는 데 사용되었으며, 간단한 레버 동작으로 두 가지 상태를 전환할 수 있었습니다.(출처 : 위키피디아) 집에서도 흔히 볼 수 있는 전기 스위치로 생각하시면 됩니다. 스마트폰 환경 설정에서 토글스위치를 많이 보셨을 텐데요~ 물리적인 토글스위치의 형태와 기능을 디지털 환경에 맞게 구현하였습니다. 단순하고 직관적인 디자인으로 끄고/켜다 처럼 상반되는 의미를 두고 제작하고 사용하게 됩니다. 토글스위치 만들 때 주의사항 목..

안녕하세요. 피그마는 벡터편집 툴로 간단한 아이콘 일러스트는 빠르게 제작할 수 있습니다. 일러스트에 익숙하신 분들은 패스파인더(Pathfinder)를 잘 아실 텐데요. 피그마에서는 그 기능을 부울연산(Boolean operations)으로 설명하고 있습니다. 피그마에 부울 연산은 딱 4가지가 있습니다. 이 4가지만 잘 활용하시면 다양한 모양을 만들 수 있습니다. 피그마의 4가지 부울연산Union(합치기)Subtract(빼기)Intersect(겹친 부분만 남기기)Exclude(겹친 부분만 빼기)이렇게 4가지가 있습니다. 부울연산에 추가로 5.Flatten selection(선택 병합)도 있습니다. 피그마의 4가지 부울연산 적용방법도형 부울연산은 반드시 1개 이상의 레이어가 선택되어야 합니다. 우측 디자인패..

안녕하세요. 피그마로 모바일 앱 화면시 많이 보이는 chip list 만드는 방법을 설명드리겠습니다. 그전에 칩이 어떤 건지 알아볼까요? Chip(칩) 이란?앱 화면에서 자주 보이는 Chip(칩)은 작은 UI 요소이지만, 사용자 경험을 크게 향상하는 중요한 디자인 컴포넌트입니다. 칩은 일반적으로 태그, 카테고리, 필터, 사용자 입력 값 등을 표시하며, 터치 한 번으로 쉽게 선택하거나 제거할 수 있어 직관적인 인터페이스를 만드는 데 유용합니다.Chip의 주요 특징작고 가벼운 디자인 – 화면을 깔끔하게 유지하면서도 필요한 정보를 효과적으로 전달합니다.상호작용 가능 – 터치하여 활성화하거나 제거할 수 있어 사용자 경험이 향상됩니다.다양한 형태 – 필터, 태그, 입력값 등 여러 용도로 활용할 수 있습니다.앱에서..

안녕하세요. 오늘은 마스크(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) 프로토타이핑 툴을 활용해서 다양한 시도를 하고 혹시 도움이 되실 분들이 있다면 자료를 함께 공유하고 공부하는..