Let Figma Design

오늘은 피그마 오토레이아웃의 Hug, Fixed에 대해 알아볼게요. ​ 피그마 오토레이아웃은 디자이너가 웹 페이지나 모바일 앱 등 다양한 디바이스에서 동일한 디자인을 유지할 수 있도록 도와주는 기능입니다. ​ 이 기능을 사용하면 디바이스의 크기나 방향이 변경될 때 요소의 크기와 위치를 자동으로 조정할 수 있습니다. 이를 통해 디자이너와 개발자는 각각의 디바이스에서 일관된 디자인을 유지하면서도 개발 시간을 단축할 수 있습니다. ​ 피그마 오토레이아웃은 컴포넌트 내부의 요소에 대해 적용됩니다. 적용하려는 요소를 선택한 후, 오른쪽 상단의 "Autolayout" 버튼을 누르면 오토레이아웃이 적용됩니다. ​ 그리고 요소 간의 관계를 설정하려면 요소를 선택한 후, 상단 메뉴에서 "Constraints"를 선택합니..

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

웹디자인 시절엔 디자이너가 퍼블리싱까지 했었던 시절이 있었습니다.​ 그런데 지금 UXUI 디자이너가 퍼블리싱을 하지 않더라도 웹사이트와 앱이 어떻게 동작해야 하는지 css와 html을 알아야 구현 가능한 디자인이 무엇인지 판단할수 있습니다. ​ 그런 의미에서 피그마 작업속도를 올리는 꿀팁 가져와봤습니다. 피그마에서 객체를 화살표로 움직이면 기본적으로 1px씩 움직입니다. 그리고 shift + 화살표키를 누르면 10px씩 움직이죠! ​ 그런데, 그게 다가 아닙니다.​​ ​ Figma > Preference > Nudge Amount에 보시면 Small nudge와 Big nudge 세팅창이 나옵니다. 빅넛지는 shift + 화살표의 이동 픽셀을 커스텀할 수 있습니다.​​ ​ 빅넛지가 조절된다면 스타일가이드..

UXUI 디자이너의 Figma 2023. 7. 3. 16:43

피그마의 강력한 기능이라면 프로토타입도 큰 부분을 차지한다고 생각하는데요. 다양한 화면대응이 가능하고 구현할 기능을 미리 보여줄 수 있다는 점이 큰 장점입니다. 오늘은 피그마에서 드롭다운 메뉴를 간단히 만들어 볼게요~ Component와 Variants만 알면 쉽게 만들 수 있습니다. 먼저 드롭다운 디자인을 만들어 주세요. 마우스 오버 전과 오버 후의 메뉴를 컴포넌트 Variants로 묶어주세요. 화살표도 컴포넌트 Variants로 만들어 줍니다. ​ Component는 재사용 기능한 화면 구성요소이며, 버튼(button), 토글(toggle), 카드(card), 텍스트 필드(text field)처럼 반복적으로 사용하는 요소를 디자인 에셋으로 저장해 두고 사용하면 UI 제작 시 시간을 단축시키는 장점이 ..

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

오늘은 피그마의 핵심 기능인 오토레이아웃(auto layout)에 대해 알아볼게요. 다양한 디바이스에 맞는 자동 리사이징 디자인을 할 때 필요한 기능들이죠~ ​ 오토레이아웃의 자식 요소들의 배치방법을 고정 여백으로 나열(packed), 또는 여백을 자동으로 나열(space between) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다. 적용할 개체를 선택하고 오토레이아웃 패널의 세팅을 눌러주세요~ 9개의 점을 직접 눌러서 활성화 시킨 후 변경할 수도 있습니다, 오토레이아웃의 상하, 좌우 여백을 바꿀 수 있는 패널도 아래에 보입니다. 상, 하, 좌, 우 네군데 모두 다른 값을 입력할 수 있는 옵션도 있습니다. ​ *피그마가 업데이트 되어..

UXUI 디자이너의 Figma 2023. 7. 3. 16:32

UX툴인 피그마의 진정한 저력은 바로 플러그인에서 나오는 것 같아요. 꼭 실무에 필요한 플러그인만 앞으로 소개해 드릴게요~ ​ 오늘은 피그마에서 벡터 오브젝트를 3D로 만들어주는 플러그인을 가져와 봤습니다. 플러그인으로 3D가 만들어지는 것도 신기하지만~ 이게 또 아주 쉽게 만들어진다는 사실! 5분만 투자해보세요~ 플러그인 탭에 가서Fig3D를 받아주세요~ 피그마 커뮤니티에서도 받으실 수 있고, 피그마 메인 메뉴에서도 찾으실 수 있어요~ 플러그인을 설치하고 오브젝트를 선택한 채로 플러그인을 실행해 보세요 위 패널이 나타납니다. 꽤나 디테일한 것까지 만지실 수 있어요~ 여러 개의 벡터 오브젝트 각각 각도, 깊이, 쉐도우, 색상, 빛 등등 모두 조절하실 수 있어요. Insert in Figma 버튼을 누르시..

UXUI 디자이너의 Figma 2023. 7. 3. 16:27

피그마는 현재 UXUI툴의 최강자로서 완벽한 협업툴로 그 입지를 굳혀가고 있는 추세입니다. ​ 앞으로 피그마를 사용하면서 실무에 유용한 팁을 공유할 예정입니다. 스케치, XD도 유용한 팁이 있을 때마다 업데이트할게요~ 피그마는 벡터 형식의 작업툴로 비트맵 형식의 이미지 작업은 주로 포토샵에서 작업하고 가져오는 방식이었습니다. 이번 팁은 포토샵에서 굳이 가공하지 않아도 플러그인 하나로 매우 손쉽게 누끼 따는 방법을 공유해 드릴게요. Remove bg 플러그인을 받아주세요. 플러그인은 피그마 커뮤니티에 가서 검색하시거나 피그마 메인 메뉴에서도 받을 수 있습니다. 플러그인을 깔아주시고 해당 플러그인을 구동시키려면 Remove BG 사이트에 들어가셔서 회원가입을 해주세요. ​ 화원가입 후 대시보드에 들어가서 g..

UXUI 디자이너의 Figma 2023. 7. 3. 16:23

피그마와 스케치는 UX툴의 점유율을 1,2위를 다투고 있는 툴입니다. 지금은 피그마가 전 세계 점유율 77%를 차지하였지만 몇 년 전만 하더라도 스케치가 점유율 1위를 차지하고 있었습니다. 스케치는 맥OS에서만 동작하다는 핸디캡이 있으며, 초창기보다 앱이 많이 무거워진 모습도 보입니다. Hand-off 툴임에도 동기화가 느리다는 단점도 있습니다. ​ 그럼에도 스케치는 최초의 혁신을 이룬 툴이니만큼 맥에서 최적화돼있는 앱입니다. ​ 그런 의미에서 오늘은 스케치의 레이아웃 세팅(Layout settings)에 대해 알려드릴게요~ ​ 반복되는 디자인의 가이드라인을 따르기위한 안내선을 레이아웃이라고 합니다. 기본 픽셀, 그리드와이 적합성을 고려하여 대부분 레이아웃은 모바일은 4, 6단을 사용하고, 태블릿은 12..

UXUI 디자이너의 Sketch 2023. 7. 3. 16:18

UXUI 디자이너가 CSS를 알아야 하는 것은 필수적은 아니지만, 알고 있으면 디자인 작업을 더욱 원활하게 처리할 수 있습니다. ​ CSS는 디자인 요소의 스타일링을 담당하는 웹 기술로, 디자인 요소의 레이아웃, 색상, 폰트, 크기 등을 지정할 수 있습니다. 따라서, CSS를 알고 있으면 디자인 요소의 스타일링을 더욱 세밀하게 제어할 수 있고, 개발자와 의사소통을 더욱 원활하게 할 수 있습니다. ​ 또한, 최근에는 UXUI 디자이너가 HTML/CSS/JavaScript 등의 웹 기술을 알고 있어야 하는 경우가 늘고 있습니다. 이는 디자인 요소를 직접 구현할 수 있는 능력이 필요하기 때문입니다. 따라서, 웹 디자인 분야에서 일하는 경우에는 CSS를 알고 있으면 더욱 유리합니다. 피그마에서도 css코드로 내..

UXUI 이야기 2023. 7. 3. 16:12