design log...

design log...

  • 분류 전체보기 (43)
    • 우당탕탕 스타트업 일기 (2)
    • Product 디자인 (19)
    • 디자인 관련 (9)
    • 저는 HTML으로 디자인 합니다 (13)
  • 홈
  • 태그
  • 방명록
RSS 피드
로그인
로그아웃 글쓰기 관리

design log...

컨텐츠 검색

태그

피그마왕초보 앱아이콘사이즈 블록체인디자인 figmaautolayout 피그마초보 피그마카드디자인 클론코딩html 블록체인디자이너 피그마오토레이아웃 피그마 디자인시스템제작기 피그마오토레이아웃카드 클론코딩htmlcss 피그마카드UI figmacardUI figmacarddesign 디자인대학원 대학원 UI디자인 디자인시스템시작

최근글

댓글

피그마왕초보(1)

  • [피그마] 왕초보 오토레이아웃(Auto layout)으로 반응형 카드(card) UI만들기

    세로형 카드에서 가로형 카드되는 반응형 카드 UI 만들기! 먼저 프레임을 만들어 준다. card 이름 지어주고 이펙트, 라운드 넣어줘서 디자인해준다. 카드에 rectangle으로 이미지 들어갈 영역 만들어주고 Unsplash 플러그인으로 이미지 넣어준다. (이미지 플러그인은 다음 글에 소개할 예정) 이미지 밑에 Label, Heading, 본문, 프로필 이미지등등 텍스트들을 넣는다. 여기까지는 아직 오토레이아웃 노노! 참고로 Label/프로필 이미지는 레이어가 2개라서 그룹을 해줘야한다. Label 그룹/프로필 그룹 이렇게 각각 그룹 따로! 이제 여기서부터 오토레이아웃 시작! 밑에 순서대로 하면 된다. 1. Label/Heading/본문/프로필 사진 4개 잡고 오토레이아웃을 준다. 2. 카드 프레임한테 ..

    2023.09.04
이전
1
다음
티스토리
© 2018 TISTORY. All rights reserved.

티스토리툴바