Let Figma Design

오늘은 이번에 새로 업데이트된 Variables로 쇼핑몰 개수선택 프로토타입 예제를 만들어 볼게요. ​ Variables 기능을 사용하면 반응형 프로토타입을 더욱 쉽게 구현할 수 있습니다. 디자인 요소의 속성 값을 변수로 지정하여, 다양한 크기와 해상도에 맞춰 자동으로 조정되도록 할 수 있습니다. Variables를 이용하면 프로토타입의 일관성을 유지하면서도 시간을 절약할 수 있어, 디자인 작업의 효율성을 높일 수 있습니다. 이와 관련하여 더 많은 정보를 찾아보고 포스팅하도록 할게요~ 피그마 Variables로 만든 프로토타입 예제 플러스 버튼을 누르면 갯수가 1만큼 증가하고 마이너스 버튼을 누르면 개수가 1만큼 감소하고, 상품금액이 증가하는 쇼핑몰형 프로토타입을 만들어볼게요~ ​ 일단 원화 단위안의 쉼..

UXUI 디자이너의 Figma 2023. 7. 8. 15:18

오늘은 피그마 신규 업데이트 Variables 기능 중 Boolean을 알아볼게요. 현재 Variables 기능은 무료플랜에서는 지원되지 않고, 유료플랜에서만 사용가능합니다. ​ Variables 타입에는 Color, Number, String, Boolean이 있습니다. 모두 변수 지정 가능한 항목들이죠. 하나의 트리거에 여러 가지 변수를 지정할 수도 있습니다. ​ 피그마에서 Variable Boolean으로 만든 알림 뱃지 버튼을 누르면 알림뱃지가 활성화되고 카드에 물건이 담길 때마다 숫자가 늘어나는 프로토타이핑을 해볼 거예요. ​ 1) 아이콘 뱃지 비활성화, 활성화 (Boolean) 2) 뱃지 안의 숫자 증가 (#Number) 3) 장바구니, 구매하기 버튼에서 제어 ​ 의 프로세스를 생각해 봤습니다..

UXUI 디자이너의 Figma 2023. 7. 8. 15:10

2023 Figma Config와 함께 업데이트되었던 피그마의 Variables로 Dark Mode와 Light Mode를 만들어봤습니다. ​ Variables란? Variables는 색상, 숫자 및 문자열과 같은 다양한 디자인 속성에 할당할 수 있는 스타일과 같은 재사용 가능한 정의입니다. 그러나 스타일과 달리 Variables는 적용되는 테마에 따라 전환할 수 있습니다. 피그마에서 Dark Mode, Light Mode 만들기 에전에 위와 같은 Dark Mode와 Light Mode를 작업하려면 각각 두벌의 작업을 진행해야 했습니다. 그런데 이번 2023 Config Variables(변수를 이용한 디자인속성 변환)를 사용하여 간단하게 다크 모드와 라이트 모드로 전환할 수 있습니다. 다크 모드를 적용..

UXUI 디자이너의 Figma 2023. 7. 8. 13:00

오늘은 지난 22일 업데이트되었던 피그마의 Dev Mode(개발자 모드)를 살펴볼게요~ 내용을 보니 역시 진정한 핸드오프 툴의 최강자 다운 업데이트였습니다.​​ ​ 개발 모드는 개발자를 염두에 두고 특별히 설계된 Figma 파일과 상호 작용하는 방법입니다. 우리는 디자인 핸드오프의 마찰을 줄이고 더 나은 커뮤니케이션 및 디자인 구현을 허용하는 방법으로 이 모드를 만들었습니다. 개발자 모드라고 하지만 디자이너가 이해하는 것도 중요합니다. 개발자 모드는 디자이너가 개발자가 볼 수 있도록 파일을 준비했을 때 가장 잘 작동합니다. 화면을 잠깐 살펴볼게요. 상단에 토글버튼을 올려도 전환되지만 단축키 shift + D를 눌러도 전환됩니다. 개발자 모드에서는 이제 개발자가 파일을 보다 쉽게 ​​탐색할 수 있도록 돕기..

UXUI 디자이너의 Figma 2023. 7. 7. 10:48

바로 오늘 2023 Figma Config가 막을 내렸죠. 어제로 피그마 기능이 대규모로 업데이트되었는데, 그중에 오토레이아웃 최소, 최대 사이즈 설정기능이 업데이트되었습니다, ​ 업데이트 중 Dev mode(개발자 모드)도 흥미로우니 다음에 포스팅할게요~ 피그마에서 autolayout min, max 설정하기 이제 레이아웃의 최소단위와 최대단위를 고려하여 작업할 수 있어요. Width, Height 전부 설정 가능하며 거의 css작업이 가시화되는 단계라고 볼 수 있겠네요~ 우선 오토레이아웃으로 프레임을 디자인해줍니다. 프레엠 패널 안에 Width 설정 메뉴를 누르면 위와 같은 Min width, Max widt 설정창이 나타납니다, Height도 마찬가지로 설정해 주시면 됩니다. ​ 우선 min, ma..

UXUI 디자이너의 Figma 2023. 7. 7. 10:41

2023 6월 22일 오늘 Figma Config 2023 콘퍼런스가 열렸습니다. 그에 따라 피그마에도 대규모 업데이트가 있었는데요. 오늘 업데이트된 사항 간단히 정리해드리자면 ​ 1.Prototype Variables 2. Autolayout Wrap 3. Dev mode 4. Advanced prototyping features ​ 이 중에서 프로토탑입 배리어블스 기능이 궁금하여 한번 예제로 만들어봤어요~ 피그마에서 Variables로 장바구니 담기 프로토타입 만들기 아직 더 살펴봐야 하겠지만 모르는 부분들이 많아서 스터디를 더 해봐야겠어요. 변수를 지정하여 경우의 수를 뻗어나가게 하는 구조인 것 같습니다. Variables 타입에는 Color, Number, String, Boolean이 있는데,,..

UXUI 디자이너의 Figma 2023. 7. 7. 10:36

오늘은 피그마에서 자동으로 슬라이드 되는 프로토타입을 만들어봤어요~ 비핸스에서 디자인 레퍼런스를 찾다가 이 디자인의 인터렉션은 이렇게 나오면 좋겠다 싶어서 가져와 봤습니다. ​ 디자이너의 크리에이티브 플랫폼인 비핸스에서 많은 도움 얻어가시길 바랍니다. https://www.behance.net/ Search Projects | Photos, videos, logos, illustrations and branding on Behance Photoshop 7일 무료 체험판 시작하기 데스크탑 또는 iPad에서 세련된 이미지, 그래픽, 페인팅 및 3D 아트워크를 제작하세요. www.behance.net 피그마에서 자동 슬라이드 Prototype 만들기 우선 위와 같은 디자인을 만들어 둡니다. 프로토타입이 될 화..

UXUI 디자이너의 Figma 2023. 7. 7. 10:30

오늘은 피그마의 프로토타입을 이용하여 텍스트 애니메이션을 만들어볼게요~ 의외로 피그마의 프로토타입으로 만들 수 있는데 다양하다는 사실 알고 계신가요? 쉽고 간단하고 빠르게 프로토타입을 만들어 공유도 가능하고 플러그인도 다양해서 배워가는 재미가 있습니다. ​ 그런 의미에서 피그마의 이번 온라인 콘퍼런스도 참석해 보는 건 어떨까요? https://config.figma.com/ Config 2023 | Figma’s Annual Conference Config is Figma’s global annual conference. Join us June 21-22 in San Francisco, and virtually. Register to attend today. config.figma.com 피그마에서 텍스..

UXUI 디자이너의 Figma 2023. 7. 7. 10:24