오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 작업환경 설정, 파일 썸네일, 리소스에 대해서 알아보겠습니다. 피그마 - 효율적 작업 환경 설정 효율적인 작업 환경 세팅에는 단축키, 컬러 프로파일 세팅, 개발에 용이한 넛지를 이용하여 구성합니다. 단축키 피그마 로고 선택하고 Keyboard layout 선택하면 단축키가 나옵니다. 밑에서는 단축키 중 자주 사용하는 것 위주로 작성했습니다. (궁금한 것이 있으면 찾아보는 것을 추천드립니다.) Essential Tools : 무브(V) / 프레임(F)/펜(P)/펜슬(command+P)/텍스트(T)/레탱글(R)/원(O)/라인(L)/슬라이스(S)/add comment(C) View : Show outine(shift+O)/..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 오토 레이아웃 버튼,플로팅 버튼과 오토 레이아웃 활용에 대해서 알아보겠습니다. 피그마 - 오토 레이아웃 버튼 텍스트 '버튼' 생성하고 오토 레이아웃 설정(shift+A)하면서 디자인 패널에서 패딩을 좌우16, 상하12로 설정합니다. 배경색은 Fill 추가해서 변경하고, 글자는 하얀색으로 변경합니다. r값은 8로 설정하여 라운드화하고, 간격은 20으로 설정합니다. 버튼을 2개 복사하여 복사된 버튼 2개 다중선택하여 오토 레이아웃 설정합니다. 오토레이아웃_여러개에서 버튼을 복사붙여넣기 합니다. 텍스트 변경하고 왼쪽으로 가도록 절대위치 설정합니다. 복붙을 수행하고 완료하면 텍스트 앞으로 붙여넣고 간격 줄이면 완성됩니다. 피..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 심볼/텍스트 아이콘, 오토 레이아웃에 대해서 알아보겠습니다.  피그마 - 심볼아이콘 심볼아이콘구글 머터리얼 가이드에서 확인 하고,아이콘은 범용적으로 쓰기 위해서 간단하게 그리는 것이 좋음  프레임을 24x24 생성하고 원을 20x20으로 생성합니다.(원이 잘리는 경우는 디자인 패널에서 Clip content 체크해제)원을 프레임의 중앙으로 이동하고 Shift+X 눌러서 면/선 색 반전하고 검은색으로 변경합니다.직사각형 렉탱글 생성(느낌표 모양)하고 더블클릭하면 모양을  변경할 수 있습니다.r값 변경하여 라운드화를 진행하고 원 레탱글 생성하여 검은 색의 느낌표 모양을 만듭니다.검은 원의 스트로크 크기를 2로 변경하고 아..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 불리언 그룹, Flatten, mask에 대해서 알아보겠습니다.  피그마 - 불리언 그룹 활용 불리언 그룹불리언(Boolean) : 2개 이상의 도형이 필요하고 만들어진 복수의 도형을 빠르게 편집할 수 있는 기능 위 강의자료에 있는 아이콘들은 불리언 아이콘으로 각 아이콘이 4가지의 기능을 표현하고 있습니다.어도비 그래픽 프로그램이나 다른 툴에서 패스파인더 기능은  피그마의 불리언 그룹 기능과 동일합니다.에디터의 권한이 있는 모든 사용자가 사용할 수 있고, 뷰어 권한을 가진 사람은 편집 권한이 없기 때문에 사용할 수 없습니다.  1️⃣ 결합 아이콘 : 2개 이상의 도형이 선택되어 있다면 합치는 역할2️⃣ 빼기 아이콘 : ..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 섹션/프레임/그룹, 컴포넌트와 인스턴스, 면과 선에 대해서 알아보겠습니다.  피그마 - 작업 위계 순서   작업 환경에서의 위계 순서는 섹션 > 프레임 > 그룹(하위 레이어가 없으면 존재X) > 레이어프레임,섹션,슬라이스 중 섹션이 가장 놓은 위계에 존재합니다.  피그마 - 섹션 / 프레임 / 그룹 + 레이어   '섹션'은 섹션 안에서는 이동할 수 있지만 프레임 안에는 존재할 수 없습니다.(섹션은 프레임보다 더 높은 위계를 가지고 있다) '프레임'은 섹션과 그룹 안에 들어갈 수 있습니다.혼자 존재할 수 있기 때문에 그룹보다는 독립적인 권한을 가진 것이라고 해석합니다.또한 프레임은 레이어에 종속되지 않는다고 해석하는데 그..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 페이지 메뉴, 실습과 전문가 모드에 대해서 알아보겠습니다.  피그마 - 페이지 상단 메뉴 도구 Move  : 요소를 이동시킬 수 있는 툴 (화살표)Frame : 영역을 만들 수 있는 툴  - 화면에 아트보드를 만드는 경우Section : 프레임이나 다른 요소들을 한 번에 묶는 툴Slice : 만들어 놓은 객체 중 일부를 보내고 싶을 때 영역을 선정해주는 툴  Rectangle : 프레임 안에서 네모난 사각형이 만들어지는 툴 / 꼭짓점을 잡고 회전 가능 / 레디오스값 조정 가능Ellipse : shift를 누르고 그린면 정방향의 원이 만들어지고 안누르면 타원이 생성Polygon : shift를 누르고 정방향의 삼각형이 만..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 페이지 메뉴와 기능들에 대해서 알아보겠습니다.  페이지 메뉴 - 색상 변경 오른쪽 패널 도구 속성 메뉴에는 색상의설정값을 세밀하게 변경할 수 있는 메뉴가 있습니다. 피그마에서의 도형과 텍스트 모두 색상을 변경할 수 있고웹기반 프로그램이기 때문에 헥사코드(색상코드)를 통한 색 선택에 자유도가 높습니다. 만약 색에 대한 상세정보를 모르지만 같은 색상을 사용하고 싶다면스포이트 아이콘을 선택하고 원하는 색을 선택하여 사용하면 됩니다.채도는 유지하면서 투명도를 낮추고 싶다면 헥사코드 옆의 %를 낮추면 됩니다.(도형과 텍스트는 동일하게 투명도를 조절할 수 있습니다)  페이지 메뉴 - 텍스트 변경  텍스트 글씨체는 텍스트를 선택하고..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 권한별 기능,모드와 페이지 메뉴에 대해서 알아보겠습니다.  피그마 권한별 기능 권한에 따른 기능의 차이가 발생합니다.오너/어드민 권한과 에디터 권한은 편집이 가능하고,뷰어 권한은 편집이 불가능합니다.(특정 권한을 주게 되면 특정 페이지의 편집이 가능한 경우도 있습니다) 포트폴리오의 test1의 테스트 파일을 열어서 영역에 도형을 그리거나텍스트를 입력하는 등의 편집은 오너나 에디터 권한일 경우 가능합니다.레이어들의 속성값도 변화가 가능한데 텍스트/도형의 크기나 색상을 변경하는 등의다양한 속성값의 변화도 조절할 수 있습니다. 자신이 오너나 에디터 권한을 가진 모든 파일들에서 가능하며만약 제한적 권한을 가지고 있다면 특정 페..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 파일의 구성,생성과 불러오는 방법에 대해서 알아보겠습니다.  피그마 - 파일  피그마 : 팀 단위로 움직임 A팀 -> 프로젝트 A, B, C - 파일이 3개씩 9개가 존재 파일이 가장 작은 단위이며 파일을 감싸고 있는 프로젝트가 있고,프로젝트는 하나의 팀에 귀속되어 있습니다.(다른 팀으로 이관을 할 수 있고, 복제도 가능합니다.)  ex) 프로젝트 A의 파일1을 열었다고 가정하였습니다.파일은 페이지로 구성되어있는데 1개 이상으로 구성되어있으며페이지는 여러 개의 레이어들로 구성되어 있습니다. 파일1에 3개의 페이지에는 하나의 목적성이 있는 화면으로 구성하기 위해목적에 맞는 레이어들로 구성되어 있습니다.  레이어들이 디자인..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 홈화면과 페이지 구성에 대해서 알아보겠습니다.  홈화면 - 좌측 메뉴 로그인을 하고 웹이나 프로그램에서의 홈 화면입니다.홈 화면 '좌측'에는 다음과 같은 기능이 있습니다.  프로필 변경 : 프로필 선택 -> 프로필의 연필 아이콘 선택 -> save(저장됨)컬러 테마 변경 : 프로필 선택 -> Theme -> 라이트/다크/시스템 테마 중 선택 Setting 메뉴 : 피그마 세팅을 변경할 수 있는 공간 (account/Community/Notification)Recents :최근 작업물을 확인할 수 있는 공간Your teams : 팀에 관한 확인이 가능한 공간Drafts : 내가 만든 파일 + 팀 플랜 협업 가능 공간 (임..