UI Tools

피그마의 배리어블(variable) 기능을 활용해서 다크, 라이트 모드 만드는 팁. (특 생각보다 쉬움)

MOKKOZI 0 483
https://youtu.be/EoHH9ZboODU?si=FamX7-0PVVpFScID  + 949

이번 피그마의 대규모 업데이트로

당황하신 분들이 많으실텐데요(저도 많이 당황했어용) 공부할게 늘었지만, 처음에 오토 레이아웃과 컴포넌트 개념이 낯설었던 것처럼 막연히 낯설고 어렵게 느껴졌던게 아닌가 하는 생각이 들었어요. 직접 테스트해보니 그렇게 어렵지 않았으니, 

여러분도 튜토리얼을 보면서 따라해보세요! 

페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유
0 Comments
Hot
XD
디자인 작업 전 꼭 알아야 할 기능 Stack, Padding, Scroll – 어도비 XD 강좌
어도비 XD 아홉 번째 강좌입니다. 이번 강좌에서는 XD에서 제공하는 기능 중 스택과 패딩을 배워볼게요.레이아웃을 만들거나 인라인 버튼을 만들거나 다양한 상황에서 스택과 패딩을 활…
0
Hot
XD
제플린 사용법은 이걸로 끝 – 어도비 XD 강좌
어도비 XD 여덟 번째 강좌입니다. 이번 강좌에서는 XD에서 제플린을 사용하는 방법을 배워보겠습니다. 예전에 스케치에서 제플린 사용법을 배워봤는데 이번에는 XD! 사용 시 주의해야…
0
Hot
XD
반응형을 위한 반응형 크기 조정 기능 – 어도비 XD 강좌
어도비 XD 일곱 번째 강좌입니다. 이번 강좌에서는 XD에서 반응형 레이아웃을 구현하기 위해 필요한 반응형 크기 조정 기능을 배워보겠습니다. 스케치의 리사이징 기능과 거의 똑같은 …
0
Hot
XD
프로토타이핑 마스터하기 – 어도비 XD 강좌
어도비 XD 여섯 번째 강좌입니다. 이번 강좌에서는 XD에서 프로토타이핑 기능을 배워보겠습니다. 프로토타이핑의 기본인 링크를 걸어줄 요소 선택과 이동할 아트보드를 선택하는 것이죠.…
0
Hot
제플린
[제플린 입문 A에서 Z까지] 4강. 포토샵에서 Asset 설정하기
[제플린 입문 A에서 Z까지]오늘은 '3강. 포토샵에서 제플린으로 내보내기' 편에 이어 '4강. 포토샵에서 Asset 설정하기' 편 입니다.  Zeplin을 열고 함께 따라해보세…
0
Hot
제플린
[제플린 입문 A에서 Z까지] 3강. 포토샵에서 제플린으로 내보내기
[제플린 입문 A에서 Z까지]오늘은 3강. 포토샵에서 제플린으로 내보내기 편 입니다.  Zeplin을 열고 Create Project 버튼을 누른 후 함께 따라해보세요!자세한 내…
0
Hot
제플린
[제플린 입문 A에서 Z까지] 2강. 제플린 다운로드 및 디자인 툴 플러그인 설치
[제플린 입문 A에서 Z까지]오늘은 2강. 제플린 다운로드 및 디자인 툴 플러그인 설치 편 입니다. 
0
Hot
제플린
[제플린 입문 A에서 Z까지] 1강. 제플린 및 워크플로우 소개
[제플린 입문 A에서 Z까지]오늘은 1강. 제플린 및 워크플로우 소개편 입니다.  자세한 내용은 영상에서 확인하세요.
0
Hot
피그마
피그마 배리어블로 인터페이스 전환을? 3분만 투자하면 완전 마스터 가능!
오늘은 피그마 배리어블로 인터페이스 전환하는 것 만들어 봤어요! 아직 배리어블 개념이 낯설어서 적용하기 힘드신 분들이라면 아래 피그마 커뮤니티 파일과 함께 따라해보세요.커뮤니티 파…
0
Now
피그마
피그마의 배리어블(variable) 기능을 활용해서 다크, 라이트 모드 만드는 팁. (특 생각보다 쉬움)
이번 피그마의 대규모 업데이트로 당황하신 분들이 많으실텐데요(저도 많이 당황했어용) 공부할게 늘었지만, 처음에 오토 레이아웃과 컴포넌트 개념이 낯설었던 것처럼 막연히 낯설고 어렵게…
0
Hot
피그마
피그마 오토 레이아웃 리사이징, 이것만 봐도 뽀개기 가능
피그마 오토 레이아웃 리사이징, 이것만 봐도 10분 만에 완전 정복 가능합니다. 피그마 오토 레이아웃 리사이징을 기초부터 차근 차근 살펴보고, 실전에 반영하는 과정을 거칩니다. 아…
0
Hot
피그마
피그마 오토 레이아웃 기초, 이것만 보면 10분 컷 가능!
피그마 오토레이아웃 기초, 이것만 봐도 10분 만에 완전 정복 가능합니다. 피그마 오토 레이아웃의 AtoZ까지 하나 하나 짚어드려요. 4/29(토) 7시에 진행한 오토 레이아웃 수…
0
Hot
피그마
피그마 컴포넌트 클래스 수업 요약_배리언트편
피그마 컴포넌트 이것저것 너무 어려워서 모르겠고 복사했는데 안에 아이콘은 어떻게 바꾸는거에요? 피그마가 처음인 분들을 위한 친절한 컴포넌트 클래스 6/11(일) 7시에 진행한 컴포…
0
Hot
피그마
피그마 컴포넌트 클래스 수업 요약_프로퍼티편
피그마 컴포넌트 이것저것 너무 어려워서 모르겠고 복사했는데 안에 아이콘은 어떻게 바꾸는거에요? 피그마가 처음인 분들을 위한 친절한 컴포넌트 클래스 6/11(일) 7시에 진행한 컴포…
0
Hot
피그마
피그마 컴포넌트 클래스 수업 요약_스왑 인스턴스편
피그마 컴포넌트 이것저것 너무 어려워서 모르겠고 복사했는데 안에 아이콘은 어떻게 바꾸는거에요? 피그마가 처음인 분들을 위한 친절한 컴포넌트 클래스 6/11(일) 7시에 진행한 컴포…
0
Hot
피그마
피그마 컴포넌트 클래스 수업 요약_컴포넌트 기초편
6/11(일) 7시에 진행했던 컴포넌트 클래스 하이라이트 요약입니다. 기초, 스왑 인스턴스, 프로퍼티, 배리언트로 나눠서 순차적으로 업로드할 예정이니 못들으셨던 분들 참고해보세요.…
0
Hot
프로토파이
#2 인터페이스 파악하기 – 프로토파이 강좌
이번 시간에는 프로토파이 인터페이스를 파악하는 시간이에요. 크게 5가지로 나눌 수 있는데요. 상단에 Tool bar, 좌측에 Layer Panel, 가운데 Artboard 영역 우…
0
Hot
프로토파이
#1 프로토파이 강좌 소개 – 프로토파이 강좌
드디어 프로토파이 강좌를 시작합니다!이번 시간에는 프로토파이 강좌 소개를 하는 시간이에요.목적 자체는 유료 강좌로 제작됐지만, 기본적으로 알아두면 좋은 기본 개념인 ’07.Scen…
0
Hot
XD
#6 마우스 오버를?! 컴포넌트 상태 – 어도비 XD 강좌
어도비 XD 다섯 번째 강좌입니다. 이번 강좌에서는 XD에서 강력한 기능인 컴포넌트 상태에 대해 알아보도록 할게요! 상태(states)는 말그대로 UI 엘리먼트 상에서 있을 수 있…
0
Hot
스케치
#5 반응형 웹디자인을 위한 최적화된 그리드 시스템 – 스케치 강좌
스케치 강좌 네 번째입니다. 이번에는 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다.레이아웃을 만들 때는 크게 4가지가 있습니다. 최대폭(max-width), 컨테이…
0
Hot
XD
UI 디자인을 효율적으로 하기 위한 필수 기능! 에셋 컴포넌트 – 어도비 XD 강좌
어도비 XD 네 번째 강좌입니다. 이번 강좌에서는 어도비 XD에서 가장 중요한 에셋 컴포넌트에 대해 알아보도록 할게요! 스케치 툴의 심볼과 비슷한 기능입니다. 자주 사용하는 엘리먼…
0
Hot
XD
XD 포토샵에서 편집하기 – 어도비 XD 강좌
어도비 XD 세 번째 강좌입니다. 이번 강좌에서는 XD의 핵심 기능 중의 하나인 포토샵에서 편집을 알아보겠습니다. 스케치에서 UI 작업을 하다가 배너나 이미지 보정이 필요한 부분은…
0
Hot
스케치
앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌
스케치 강좌 세 번째입니다. 이번에는 앱 UI 디자인을 하기 위해서 알아야 할 가장 기본적인 것을 알아볼 거예요. OS 별 아트 보드 규격입니다. 아이폰 앱, 안드로이드 앱 디자인…
0
Hot
스케치
스케치(Sketch) 툴 인터페이스 파악하기 – 스케치 강좌
스케치 강좌 두 번째입니다. 스케치를 왜 사용해야 하는지를 알아봤으니, 익숙해지려면 인터페이스를 훑어봐야겠죠? 툴이 어렵게 느껴지는 이유는 딱 두 가지인데 진짜 너무 어렵거나 아직…
0
Hot
스케치
UI 디자이너가 설명하는 스케치(Sketch)를 꼭 써야 하는 이유 – 스케치 강좌
스케치 툴 강좌의 첫 단추!드디어 제 현재 직업에 가장 최적화된 스케치 강좌를 시작합니다!! 실무에서 UI 디자이너로 활동하고 있으며, 사용한 지는 4년 정도 됐네요. 스케치도 그…
0
Hot
프로토파이
스크롤 인터렉션 구현하기 - 프로토파이 강좌
안녕하세요. 이번에는 웹 UI 스크롤 인터렉션을 구현하는 방법을 배워볼게요. 해당 예제는 '토스 채용 사이트'에 있는 인터렉션을 보고 좋아서 예제로 만들어 봤습니다. 바로 한번 해…
0
Hot
프로토파이
무한 루프 슬라이더를 만드는 방법 - 프로토파이 강좌
안녕하세요. 이번에는 무한 루프 슬라이더 표현하는 방법을 알려드릴게요! 오픈 카톡 방에서 루프 되는 슬라이드가 어떻게 작업하는지 물어보신 분이 계셔서 강좌로 만들었습니다. 완성된 …
0
Hot
XD
XD 핵심 기능 반복 그리드 (작업 능률 UP) - 어도비 XD 강좌
어도비 XD 두 번째 강좌입니다. 이번 강좌에서는 XD의 핵심 기능 중의 하나인 반복 그리드(Repeat grid)를 알려드리겠습니다. 반복되는 UI 요소가 있을 때 활용하는 기능…
0
Hot
XD
XD 소개 및 인터페이스 파악하기 – 어도비 XD 강좌
어도비 XD 첫 번째 강좌입니다. 어도비에서 스케치의 대항마로 내놓은 XD가 꾸준히 버전업이 되면서 프로토 타이핑과 상태 등 다양한 기능들이 좋아지고 있죠. XD에 대한 간단한 소…
0
Hot
피그마
컴포넌트 인스턴스 빠르게 찾는 플러그인 소개 - 피그마 강좌
안녕하세요! 이번에는 피그마에서 작업할 때 컴포넌트를 빠르게 찾을 수 있는 유용한 플러그인 두 가지를 소개해 드리겠습니다. 디자인 작업을 진행하면서 다양한 컴포넌트를 사용하게 되는…
0
Hot
피그마
구글 시트 데이터를 피그마 UI에 맞춰서 불러오는 극강의 효율 플러그인(google sheets sync) - 피그마 강좌
안녕하세요. 오늘은 디자이너라면 한 번쯤은 맞닥트리는 반복 노동의 현장에서 벗어날 수 있는 구글 시트 싱크 플러그인을 소개해 드릴게요. 피그마에서 컴포넌트를 제작할 때 어떻게 설정…
0
Hot
피그마
한글 잘 안 써질 때 한 번에 고치는 방법 - 피그마 강좌
오랜만에 찾아온 피그마 강좌입니다. 제가 몇 년간 스케치를 쓰다가 현재 다니고 있는 회사에서 최근에 UI 툴을 피그마로 바꿨는데 쓰다 보니 답답한 게 2가지가 있더라고요.. 하나는…
0