반응형

피그마 3

[Figma] 피그마 컴포넌트 프로퍼티 (Component Properties), 피그마 베리언츠 (Variants) 사용 법 기초

안녕하세요 ! 오늘은 피그마 컴포넌트 속성 (Property) 기능을 사용하는 간단한 예제를 보여드리겠습니다 ^^ 컴포넌트 프로퍼티는 서비스의 디자인 시스템이 고도화되고 사용되는 컴포넌트들이 다양해질 때 유용하게 사용되는 피그마 기능인데요! 저도 최근까진 단순히 컴포넌트들을 독립적으로 만들고 최대한 컴포넌트들이 일관성있게 유지되게 수작업으로 해주는 방법밖에 사용해보지 않았는데, 컴포넌트가 많지 않으면 괜찮지만 비슷한 모양의 컴포넌트들이 많아지고, 디자인 수정사항이 자주 발생할 경우 또 일일히 맞춰줘야하는 번거로움이 있는데, 컴포넌트 프로퍼티를 이용하면 훨씬 효율적으로 작업할 수 있고, 너무 많은 컴포넌트를 각각 관리해주지 않아도 되는 장점이 있습니다. 처음에 개념을 이해하는 것이 조금 어려웠지만, 예제로..

UX Design 2023.03.18

[Figma 팁] 쉽게 곡선형태의 이미지 캐러셀 (Curved Carousel)구현해보기 (매우 쉬움!)

안녕하세요! 피그마를 사용한 웹사이트 이미지 캐러셀을 만드는 간단한 방법을 소개해보고자 합니다! 아래와 같이 곡선의 형태로 이미지를 좌우로 넘겨볼 수 있는 캐러셀 방식이에요! 웹사이트 디자인과 어울린다면 이렇게 디자인해볼 수도 있겠네요! 따라하기 쉬우니 순서대로 따라해보세요! 1. Frame을 그려준다. 세로로 조금 더 긴 직사각형의 프레임을 하나 그려준 후 Ctrl+D 를 통해 복제 합니다. 2. 프레임 전체 선택 후, Unsplash 플러그인을 켜준다. 플러그인을 켜면 중간 메뉴의 Preset을 선택하면 한꺼번에 비슷한 주제의 사진을 랜덤하게 넣을 수 있습니다. 필요하면 나중에도 이미지를 바꿀 수있으니 일단은 빠르게 해보기 위해 원하는 이미지 카테고리 선택한 후, Insert Random 을 눌러주세..

UX Design 2023.01.11

[UX/UI] Daily UI : 001

Sign Up 화면 디자인하기 Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image. www.DailyUi.co Daily UI Design Challenge, Inspiration, and Resources Daily UI design challenge. Become a better designer in 100 days. www.dailyui.co 필라테스나 요가 수업 같은 경우 단체 수업이어도 한 타임당 정원이 정해져있어 미리 예약하..

UX Design 2021.06.14
반응형
LIST