본업은 디자이너인 준유입니다.
피그마가 2022년 5월 10일경 업데이트를 했는데...!
정말 수많은 디자이너들이 원하고 원하던 소소하진 진짜 찐으로 필요했던
기능들이 추가되었습니다...!
보통 Tool 업데이트나, 피그마 업데이트는 관심이 없었거든요..?
어차피 작업하는데 큰 문제나, 도움이 비약적으로 올라가지 않아서?
근데 이번 업데이트는 정말로~ 다시 익혀야할 정도로 필요하고 소중한 기능들이라서
굳이 소개차 포스팅을 하게되었습니담😁
그럼 바로 시작하겠습니다.
1.
Auto layout Property
오토 레이아웃 속성 패널 업데이트!
우선 피그마를 들어오면, 업데이트된 것을 광고합니다.
요기서 Auto layout [New]를 눌러보시면...! 따단
창이 좀더 직관적이고
사용하기 쉽게 변했습니다! 사실 오토레이아웃 기능은
그래도 익히기 쉬운 편이었는데 더욱 편해졌어요!
왼쪽 위의 레이아웃 방향, 레이아웃 간격 창은 그대로입니다.
표시한 부분이 기능이 새롭게 선보이는 기능인데, 바로 직접 마진을 넣어주는 기능입니다!
지금 이 이미지대로 양옆80/ 위아래10을 넣게되면,
아래와 같이 마진을 줍니다!
너무 편리하죠?ㅠ 직접 간격 일일히 띄우고 그랬는데...!
또한 Hug와 Fixed 도 알기 어려운 괴상한 옵션 중 하나였는데요...
이젠 그냥 Frame 옵션 바깥으로 빠져나와서 바로바로 체크할 수 있게 변했습니다.
따라서 오토레이아웃 옵션에서 마진을 넣다가, Frame자체는 고정시키고
마진만 변경하고 싶으면
Frame 옵션에서 Hug를 Fixed로 바꿔주면 됩니다!
(반대로 마진에 따라 Frame의 크기도 유동적이고 싶다면~ Hug!)
이렇게 직관적으로 바로~ 이해할 수 있도록
hug, fixed 옵션이 밖으로 나왔습니다 짝짝👏
2.
Absolute Position
프레임 내에서 고정 위치 설정하기
이 기능 드디어 나왔습니다.
프레임에 오토레이아웃 걸어두면
오른쪽 끝에 라벨같은거 붙이려면 일일히 프레임에서 떼서 위에다가 붙여넣곤
했는데요...요게 은~근히 번거로웠단 말이죠?
세상 모든 디자이너들의 염원을 이루어주셨습니다!
이 기능을 통하면 프레임 밖으로 빼지 않아도 자유롭게 위치 선정이
가능합니다!....! 드디어....😂
요 버튼을 누르면 객체가 프레임 나가지 않고도
절대 위치를 정할 수 있다는 사실이죠..!
(몇주전부터 강력히 염원하던 기능인데 진짜 추가되서 놀랐습니다;)
즉, 프레임 하위 요소로 들어가면서!
오토 레이아웃으로부터 벗어나는 단독 위치를 설정할 수 있습니다.
보통 맨 끝에 뱃지같은 것을 붙일때 매우 유용합니다.
원래는 이런 식으로 별 모양을 오른쪽에 붙이는게 불가능하고
무조건 오토레이아웃으로 들어가므로 굉장히 번거로웠는데
이번 업데이트로
이렇게 UI 맨 끝에도 걸칠 수 있다.
같은 Frame의 하위요소지만, 오토레이아웃으로부터
벗어날 수 있다는 의미!
3.
Negative Spacing
음수로 간격을 줄 수 있게 업데이트!
요번 피그마 업데이트로 또 하나 재밌는건
숫자로 간격 줄 수 있었던 부분에서 음수가 가능하게 변했습니다!
음수를 넣으면 데칼코마니처럼 음수 간격으로 좁아집니다. (약간 기괴)
심지어 이렇게 모양들이 겹쳤을 때,
앞으로 겹치게 할 지, 뒤로 겹치게 할 지
Auto layout [...]버튼을 눌렀을 때 나오는
Advanced layout에서 조절할 수 있다.
(Spacing mode, Strokes는 굳이 설명이 필요없을 정도로 직관적이긴 함)
4.
Storkes in layout
스트로크를 간격에 포함할 지, 말 지 선택가능
요거 은근히 CSS퍼블리싱 하시는분들 빡쳐하는 포인트였죠?
보더 또는 스트로크가 레이아웃에 포함되어 있어서 계산해야하는건지,
아니면 안쪽 보더로 넣어서 계산해야하는건지...
매번 달라지고...
근데 이번 업데이트로 확실히 스트로크를 안쪽으로 넣어서 간격 계산할 지,
바깥쪽으로 넣어서 간격 계산할 지 정하게 되었습니다!
요 부분은 아마 개발자들이 더 좋아할 업데이트 같습니다!
(참고로 저 이미지 맨 하단 옵션인 Text baseline alignment는 간략하게 설명하면,
아이콘과 텍스트의 정렬을 맞춰주는 기능입니다! 아이콘-텍스트를 가운데 정렬할 지, 아이콘과 텍스트를
텍스트 기준 아래로 맞출지! 옵션창 보시면 직관적이라서..!따로 포스팅은 하지 않았습니다. spacing mode도요!)
5.
Component property기능!
Variants에서만 가능하던 property기능이 컴포넌트에도 가능해짐!
이 기능은 좀 한참 헤맸습니다...
근데 개인적으로 은근 자주사용할거 같은데!! 간단히 말하면,
component덩어리들 Variants에서만 가능한 property기능이
단독 component에서 가능하다! 라는 겁니다!
1. 컴포넌트를 하나 생성하는데요,
이해가 쉽도록, 버튼 하나를 만드실때 앞에 shape하나를 넣어주세요. (위 사진처럼 별+버튼)
2. properties의 +버튼을 누르시고, 우선 Boolean을 선택해주세요.
(Boolean은 간단하게 참/거짓을 뜻하는 단어입니다. True-False라고 보시면 됩니다.)
아마 이 기능은 굳이 거대한 디자인 시스템 또는 Variants를 만들지 않고도, 컴포넌트 자체적으로 On/Off가 가능하도록
하는 데에 의의가 있는 것 같아요.
3. 우선 Boolean을 먹이면,
요렇게 뜹니다. 저 느낌표는 Boolean (참/거짓)을 구별할 값이 지정되지 않았다는 안내입니다.
즉, 우리가 이 별+버튼 컴포넌트에서 참/거짓을 해줄 대상을 선택해야되는데요, 그 대상은 => 별을 On/Off하는 것으로 정해봅시다!
4. 그럼 이번에는 저 별+버튼에서 "별"만 따로 선택한 다음에, Layer에 보시면 요상한 버튼이 있어요 요걸 눌러서
이 별모양 Layer에 Boolean값을 씌워줍니다.
5. 저렇게 뜨면 성공!
그럼 이제 이 별+버튼 컴포넌트를 복사해서 사용하면 저렇게 Variants에 property 먹였던 것처럼 On/off 가 생겨서
별모양을 On/Off할 수 있게 된다!
아마 요 기능은 버튼 컴포넌트보다는...뭔가 좀 특별한 컴포넌트들 (버튼으로 분류하기 애매한 것들)을 위한 기능같은데
꽤 유용하게 사용할 수 있을 거 같다는 생각이! 꽤 유용한 기능일거 같은 component property 기능 업데이트입니다!
5-1. Text property와 instance swap property는?
같은 Component property기능으로 Text도 있는데, 얘는 말그대로 텍스트에다가 씌우는 기능입니다.
컴포넌트 내에 있는 Text를 변경해주는 기능! (위에 boolean설명에서의 별모양을 -> Text로 치환하면 됩니다)
그리고 Text property는 Content에서 집어넣을 수 있습니다! Layer로는 못 넣습니다!
instance swap은 한술 더 뜨는 기능인데요,
Component 안에 Component를 넣은 경우, 그 안에 있는 Component를 다른 컴포넌트로 치환하는 기능입니다.
1. 아까 만든 별+버튼에, 위 이미지에 있는 Star7이라는 컴포넌트를 넣는다.
2. 위에서와 똑같이 컴포넌트에 프로퍼티를 눌러, instance swap을 누른다.
3. 별+버튼 오른쪽에 있는 star 7을 누르고 오른쪽 창을 보면, Star7 오른쪽에 또 프로퍼티를 넣는 아이콘이 생겨있는데
거기서 instance를 선택해주면!
4. 이제 컴포넌트를 복사해서 보면, 오른쪽에 Instance property가 생겨있고, 해당 드롭다운으로
다른 컴포넌트, 위 이미지에서는 Polygon 보라색 삼각형을 선택해서 치환할 수 있습니다! 쉽지요!
이 간단한 걸 ㅠ 헤맸습니다~!!
내부 요소들에게 property 속성을 부여하는 거였어요!
6.
Individual Strokes
상, 하, 좌, 우 에 stroke를 같이 줄 수 있어요!
이 기능은 진짜...너무 필요했죠? ㅠ stroke를 이제 이렇게 요소들을 잡고
동시에 상, 하, 좌, 우에 생성할 수 있습니다 ㅠ 마치 엑셀처럼요😭
왜 이제나왔냐 ㅠㅠㅠㅠ 너무 원하던 기능이었습니다...
두께 조절은 하단 Custom누르면 수정이 가능합니다!
간단하지만 정말 임팩트있는 피그마의 새 기능입니다!
요번 피그마 새 업데이트 새 기능들은...!
정말 필수적이고 그동안 약간~ 2% 부족해서 살짝 아쉬웠던 부분을
크게 개선해주었습니다...! 갠적으로 진짜
좋은 업데이트 같아요...제가 불편하다고 생각한 부분이 전부 바뀌어서 감동입니다 피그마!!
이 외에도 살짝살짝씩 바뀐 것들이 있는데
애니메이션 기능이나, 텍스트 크기 기능들은 있는데 아마 보통분들에게 크~게 활용성은 없을 것 같구,
가장 중요한 피그마의 새 기능 업데이트 내역만 다루었습니다!
요번엔 저도 포스팅하면서 약간 새 업데이트 공부가 되었네욤!
다음에 또 좋은 디자인 포스팅으로 돌아오겠습니담😁
'디자인 레슨 런' 카테고리의 다른 글
| 포토샵에서 5분만에 종이 질감 텍스쳐 느낌 내기, 종이 텍스쳐 넣는 법! 포토샵 텍스쳐넣기 꿀팁! (0) | 2023.11.18 |
|---|---|
| 일러스트레이터에서 색깔 한번에 일괄적용으로 바꾸는 방법, 색상 한꺼번에 일괄 변경하기 - 일러스트레이터 꿀팁! (0) | 2023.09.24 |
| Figma nested instances 네스티드 인스턴스 10분만에 원리 이해하기! 네스티드 인스턴스가 무슨 옵션인지 알아보자! (4) | 2023.06.22 |
| 일러스트레이터 아트보드 바깥 안보이게 자르기, 대지 밖 안보이게, 대지만 보이게, 아트보드만 보기 - 일러스트레이터 꿀팁! (2) | 2023.02.24 |
| Figma hug, fixed 피그마 허그 auto layout 완벽 이해하기! (0) | 2023.02.20 |
