디자인48

• 

  피그마로 룰렛만들기(롤링배너) - 하나만 알면 해결! 완성본 보기 1. 룰렛 만들기1-1. 4개의 룰렛 만들기뱅글뱅글 돌아가는 효과를 만들기 위해서4개의 룰렛을 만들고 4개의 이미지가 반복되면서 노출되게 설정해야한다(1,2,3,4가 반복되어 나타나는 꼴)1-2. 룰렛 이미지 만드는 방법 원 이미지를 만들고 마우스를 갖다대면 Arc가 생기고, 그것을 위아래로 움직이면 팩맨과 같은 각도가 생긴다.자세히 보고 싶다면 바로 아래 영상을 확인할 것 원하는 룰렛을 만들었다면, 애니메이션을 설정해야한다애니메이션 값은 다음과 같다2. 애니메이션 설정하기★기본 지식이 있다면 이것만 확인하면 됩니다★ 만들어 둔 네개를 모두 같은 에니메이션 값을 설정하면뱅글뱅글 돌아가는 룰렛 이미지를 만들어 낼 수 있다. 다음과 같이 네개의 이미지에 같은 애니메이션 값을 입력하도록하자. 3... 디자인/디자인 2025. 2. 12.

• 

  피그마 깨져보일때 pixel privew 피그마의 상단 오른쪽 부분의 ---%로 표시된 곳을 클릭해서 어떻게 설정되어있는지 확인해보세요. Disabled : vector모드로 아무리 확대해도 깨져보이지 않음 1x :1배 확대할 때까지 깨져보이지 않음 2x :2배 확대할 때까지 깨져보이지 않음 다음은 이것들을 적용했을때 실제로 보여지는 이미지 예시다. 적용했을때 따라서, 로드 해야할 이미지가 많다면, 1X가 가장 빠르고 그 다음으로 2X 아무리 확대해도 잘 봐야할 디자이너라면 disable을 사용하는걸 권한다. 디자인/디자인 2022. 7. 18.

• 

  [피그마] 전체/페이지만/프레임 위치 공유하기 기능 1. 전체 공유하기 1-1. 초대하기 링크를 공유하기 원하는 상대의 이메일을 입력하고 invite 버튼을 클릭하면, 상대에게 이메일이 전송되고 파일이 공유된다. 1-2. copy link 링크를 복사해서 원하는 상대에게 공유한다 2. 페이지만 공유하기 하나의 프로젝트 내 하나의 페이지만 공유하고 싶다면, 페이지 우클릭 페이지공유를 시도하면 된다. 3. 프레임 위치 공유하기 프레임만 공유될 수 있는 기능은 없다. 프레임이 워낙 많이 생성되다 보니, 프레임 위치는 공유할 수 있다. 1. 공유하기 원하는 프레임을 선택 2. share 버튼 클릭 3. link to selected frame 체크하기 4. copy link 클릭 과정을 거치면 선택된 프레임 위치가 공유되고, 링크를 클릭해 접속하게 되면 프레임 .. 디자인/UIUX 2022. 1. 3.

• 

  [피그마 사용법] 라이브러리 사용하기 피그마에서 스타일을 지정해서 불러오는 방법도 있지만, 커뮤니티에서 사람들이 잘 만들어놓은 자료를 duplicate 해서 불러오는 방법도 있다 아무래도 한국자료가 없다보니 커뮤니티에서 다운로드 받더라도 한국어 패치가 필요하기 때문에 커뮤니티에서 다운로드 받더라도 수정이 필요하다. 1. 라이브러리에 등록하기 1-1 커뮤니티에서 원하는 색상톤을 가진 파일을 duplicate 한다. 1-2. 열려진 파일에서 assets - 책모양의 아이콘 - Publish 클릭 1-3 Publish 할 항목 선택하여 publish styeles 클릭하기 2. 디자인 하려는 파일에서 publish 한 assets 불러오기. 2-1. 라이브러리 불러오기 디자인 하고자 하는 파일을 열어 assets-라이브러리 아이콘 클릭하면, 내가.. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 구글 폰트 설치 안될 때, 폰트 설치 관리자 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 피그마에 글씨체를 설치하기 위해 구글 폰트에서 원하는 서체를 바로 설치했을때 폰트가 지원된다? 그대로 사용하면 된다. 만약 설치를 했음에도 불구하고 설치가 되지 않는다면, 피그마에서 지원하는 폰트 인스톨러를 설치해야한다. 1. 네이버에서 피그마를 검색하고, downlaods 페이지로 이동한다. 2. Font installer -> 컴퓨터 운영체제에 맞는 installer 다운로드 하기. 맥사용자는 맥용 윈도우 사용자는 윈도우용 다운로드. 3. 이후 구글 폰트에서 원하는 폰트를 다운.. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 추천 기초 플러그인 및 설치, 사용방법 플러그인과 파일은 다르다. 파일은 파일이고, 플러그인은 소프트웨어다. 소프트웨어를 이용하면 훨씬 쉽게 피그마를 이용할 수 있다. 먼저 플러그인을 설치하는 방법을 알아보고, 플러그인을 불러오는 방법과 플러그인 사용법에 대해 글을 작성해보겠다. (더불어 기초 플로그인에 대해서도 안내할 것이다) 0. 플러그인 설치하기 피크마 - 커뮤니티 - 플러그인 선택 - 검색어 입력 - 인스톨 기초적으로 사용해야할 목록은 (이미지에는 없지만 아이콘도 필요하다) -Unsplash : 무료 이미지 사이트 -Arrow Auto : 화살표 -Lorem Ipusum : 텍스트 -Similayer : 비슷한 유형의 요소를 선택하는 기능. 포토샵의 마술봉 기능과 비슷한듯? + Material Design Icons : 아이콘 이다. .. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 구글 머터리얼 디자인 플러그인 설치 커뮤니티에서 Material을 검색하거나 https://www.figma.com/community/file/778763161265841481?fuid=763322827958699037 url 하여 바로 duplicate(복제)버튼을 클릭하면 된다. 검색를 한다면, Material을 검색한다면, 공식계정인지 확인을 해야한다. 프로필 이미지에 동그라미 내 사각형 내 세모가 들어간 프로필 계정을 확인해야한다. 이외는 개인이 올린 것들이다. Duplicate 클릭하여 설치한다. recensts나 drafts에서 duplicate된 것을 확인해 볼 수 있다. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 오토레이아웃 단축키 및 여백 주기 웹에서 요소를 클릭할때, 정확하게 그 요소를 클릭하지 않아도 클릭 처리를 해야한다. 작은요소라면 더더욱이 필요하다. 내가 원하는 요소가 클릭이 쉽지 않다면, 사용자는 불편함을 느끼고 다른 사이트를 이용할 것을 예측할 수 있다. 쉽게 클릭하기 위해서 요소에 패딩값을 설정해주어야 한다. (패딩이 설정된 여백을 클릭하더라도 해당 요소에 들어갈 수 있게 만들어 주어야 한다.) 기본적으로 디자인 패널의 우측 TEXT 영역에 양쪽을 가르키는 화살표가 선택되어있을 것이다. 패딩이 설정되지 않은 순수한 텍스트 크기에 맞게 설정된 값이다. 패딩을 주기 위해서 해당 요소를 클릭한 뒤 SHIFT+A를 클릭하여 오토레이아웃(패딩)이 설정되는 것을 확인한다. 사각형 안 사각형이 들어간 아이콘 우측에 표시된 '10'을 확인할 수.. 디자인/UIUX 2021. 12. 23.

• 

  우와! 인기앱 온보딩, 스크린샷 사이트 벤치마킹 여기서 다 한다 Q 안녕하세요!혹시 인기앱들 온보딩, 스크린샷 모아있던 사이트 링크 공유가능하실까요? A.첫번째 wwit(국내) https://wwit.design/ What Was IT 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 쿠팡부터 시작해서 여러가지 사이트들이 있다. 캡쳐상태가 너무 깔끔해서 제작자에게 고마울 따름이다. A. 두번째 mobbin(해외) https://mobbin.design/browse/ios/apps Mobbin - The world’s largest mobile app design reference library Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app sc.. 디자인/UIUX 2021. 8. 24.

• 

  하단 네비게이션 탭바(tab bar)에 대하여 우리는 무의식으로 인지하는 편리함을 얼마나 알고 있을까. 오늘은 네비게이션바. 탭바에 대해 알아보도록 하겠다. https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/ The Golden Rules Of Bottom Navigation Design — Smashing Magazine Design is more than just good looks – something all designers should know. Design also covers how users _engage_ with a product. Whether it's a site or app, it's more like a conversati.. 디자인/UIUX 2021. 8. 19.

• 

  [피그마] 컬러팔레트 색상을 선택하고 더보기 버튼 클릭하면 나오는 create new color style 레이어팝업에서 명칭을 지정해주어야 하는데 아무거나 쓰는 것 대신 / 로 구분해주면 레이어와 마찬가지로 카테고리로 구분을 하기 때문에 / 를 반드시 잘 이용해주는 것이 좋겠다. 그럼 이런식으로 구분이 되어 들어간다. 항목에서는 스타일을 수정도 할 수 있다. 이펙트 스타일도 지정해둘 수 있다. 디자인 2021. 8. 8.

• 

  피그마 기초 용어 (canvas, frame, page) 피그마 용어는 다음과 같다. canvas : 무엇이든 그릴 수 있는 그곳이 캔버스다. 처음에 들어갔을 때 회색 영역인 그 곳. frame : 휴대폰 모양의 크기이든 pc 크기이든간 영역을 잡고 안에 그림을 그리는 그 곳. 이게 오히려 캔버스와 가까워보인다는 생각이 들지만 익숙해져야 한다 frame이다. 액자안(물리적화면)안에서 나타날 수 있는 요소를 그리는 곳이라고. page: 페이지는 다른 canvas를 만들 수 있다. 여러 page가 될 수 있다. 말 그대로 여러개의 canvas를 page로 구분하면 되겠다. 그러니까 page가 가장 큰개념이고 그 다음에 canvas 그 다음이 frame 이다. layer: canvas나 frame 어디서나 나타낼 수 있는 요소다. 그러니까 모양이든 글자든 어떠한 요.. 디자인 2021. 8. 7.