RealisationA to Z

피그마 설치를 위해선 우선 검색창에 피그마를 입력! 피그마 공식 사이트에 들어갑니다! 홈페이지 우측하단의 login클릭 혹은 페이지 get started 파란 버튼을 클릭! 구글 로그인 혹은 계정 생성을 통해 피그마 가입을 해줍니다. 계정을 생성했다면 products -> downloads에 들어갑니다. 개인의 환경에 따라 다운받으면 끝!

아무것도 없는 화면에 단축기 t or text를 클릭해 원하는 텍스트를 입력해 줍니다. 오토레이아웃 단축키 shift+a를 눌러 오토레이아웃을 실행합니다. 우측 패널에 fill을 추가해 원하는 컬러를 입혀줍니다. 패널에서 텍스트 컬러, 코너값을 적용해 주어 버튼 디자인을 완성하면 끝!

plugin 설치 방법 plugins -> find more plugins 원하는 plugin 검색 -> run -> 오른쪽 클릭 -> plugin에 unsplash 설치 완료!

피그마에서 이미지를 불러오는 두가지 방법에 대해 알아보겠습니다. 오른쪽 디자인 패널 fill -> 왼쪽 상단 solid 옆의 화살표 아이콘 클릭 -> image 위와 같은 화면이 나오게 되는데 이때 choose image 부분을 클릭해 파일에서 원하는 이미지를 불러오면 됩니다. 두번째 방법은 네번째 사각형 아이콘 클릭 -> place image -> 원하는 이미지 -> 원하는 영역에 첨부하면 끝! 이렇게 피그마 이미지를 불러오는 두가지 방법에 대해 알아보았습니다!

저 또한 피그마를 기초부터 배우게 되면서 처음 버튼을 만들어 보았는데요, 오늘은 오토 레이아웃을 활용한 버튼을 만들어 보겠습니다. text 단축키 t를 눌러 Button이라는 단어를 써줍니다. shift + a 눌러 auto layout을 만들어줍니다. 오른쪽 디자인 패널에 auto layout칸이 새롭게 생성되는데 단어의 상하 좌우 간격 조정이 가능합니다. 배경을 만들어주기위해 디자인패널 하단의 fill을 눌러 원하는 색상을 넣어줍니다. local style을 지정했다면 플러스 버튼 옆의 원이 나열되어있는 아이콘을 누르면 자동으로 리스트가 나옵니다. 해당 배경을 저는 orange컬러를 해주었고 현재 버튼의 프레임을 누르면 text의 색상까지 나옵니다. 저는 text의 색상을 추가로 화이트로 변경하기 위..

Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 위의 사이트에서 만들고 싶은 아이콘을 가져옵니다. 검색창에 만들고 싶은 아이콘의 이름을 검색한 후 오른쪽의 svg 파란색 버튼을 클릭하여 다운로드하여 줍니다. 첫 번째 Figma 아이콘 -> file -> place image 아이콘 키 라인에 해당 svg를 옮겨 넣으면 됩니다. 아이콘 키 라인은 가장 상단에 있는 학습 자료 유튜브를 시청하시면 쉽게 만드실 수 있습니다. ..

컴포넌트 : local component에 표시 (main 컴포넌트를 변경하면 인스턴스도 자동으로 변경) 인스턴스 : 컴포넌트의 복사 개체 -> 다른 아이콘으로 swap 가능 (오른쪽 디자인 패널에서) 인스턴스의 override 기능을 활용할 경우 메인 컴포넌트에서 단어를 바꿔도 변경되지 x 오른쪽 디자인 패널에서 push overrides to main component를 할 경우 메인 컴포넌트에 속성 연결 detach instance : instance의 속성을 해지하긱위해 디자인 패널 -> button -> detach instance [small button 생성방법] 이전에 만들어두었던 버튼을 우선 복사 autolayout의 크기를 조정 small button 프레임 선택 -> alt + ctr..

초보자에게 가장 기초적이면서 헷갈릴 수 있는 프레임 생성 방법에 대해 알아보겠습니다. 우선 일반 페이지를 열어줍니다. 여기서 부터 프레임을 어떻게 생성해야 할지 헷갈릴 수 있는데 왼쪽 상담의 프레임 버튼을 클릭하면 됩니다. * 페이지를 여는 방법을 모른다면 아래 글 참조! 피그마 기초강좌 파해치기 [피그마 UI 키트활용] [피그마 파일 여는방법] 좌측 Team project의 +버튼 -> desgin파일 [피그마 파일 삭제 & 복구] 삭제 : 파일 선택 -> 우클릭 -> 삭제 복구 : 파일 선택 -> 우클릭 -> 삭제 -> undo 클릭 -> 복구 [피그마 무료 플랜 realisationz.tistory.com 왼쪽에서부터 세번째 FRAME 아이콘을 클릭해줍니다. 오른쪽 Prototype 아이콘을 클릭하..

[버튼 컴포넌트 제작하기] 컴포넌트란 ? 두번 이상 재사용될 UI Asset [text 스타일 지정하기] Create Style 기능으로 버튼의 Text 스타일 만들기 text를 입력할때는 text단축키 t를 누른다 text입력 후 우측 design패널에서 button text 편집 항상 문자의 시작을 대문자로 하고싶을 경우 type details -> letter case -> title case 같은 폰트 다른 사이즈의 폰트 생성 (복사 기능 활용) 오른쪽 design 패널 -> style -> create style -> 같은 폰트 다른 사이즈의 폰트 생성 -> design 패널의 text에 스타일 생성된것을 확인할 수 있다 [text 스타일 편집하기] 오른쪽 design 패널 -> style ->..

[피그마 파일 여는방법] 좌측 Team project의 +버튼 -> desgin파일 [피그마 파일 삭제 & 복구] 삭제 : 파일 선택 -> 우클릭 -> 삭제 복구 : 파일 선택 -> 우클릭 -> 삭제 -> undo 클릭 -> 복구 [피그마 무료 플랜 vs 유료 플랜] 무료로 사용할 경우 1개 이상의 프로젝트를 추가할 수 없다 (프로젝트 목록 제한) 디자인 파일 개수 제한 (최대 3개) 무료에서도 뷰어를 누구나 공유하고 볼 수 있다 (단, 파일을 공유하는 순간 private projects 불가능) [UI키트 활용] Home -> Explore Community -> ios 15 ui kit Design 검색 -> joeu banks 파일 -> 우측 상단 duplicate 버튼 -> duplicate ->..