RealisationA to Z

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

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

저 또한 피그마를 기초부터 배우게 되면서 처음 버튼을 만들어 보았는데요, 오늘은 오토 레이아웃을 활용한 버튼을 만들어 보겠습니다. 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를 옮겨 넣으면 됩니다. 아이콘 키 라인은 가장 상단에 있는 학습 자료 유튜브를 시청하시면 쉽게 만드실 수 있습니다. ..