[figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기

[figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기

안녕하세요! 당근입니다.

피그마가 최근 22년 5월에 대규모 업데이트를 했어요.

유튜브로 간단히 업데이트 내용을 설명하는 프리젠테이션을 보니까 그동안 불편했던 것이 드디어 개선된 것, 생각지 않았는데 기대 이상으로 편의를 개선해준 것 등 여러 항목이 있었는데요.

figma 5월 업데이트 요약

이번에 저를 흥분의 도가니로 밀어넣은 것은 바로바로 Individual Stroke 항목!!!!!!!

figma border top

이렇게 한쪽 면만 테두리를 남겨 일정한 여백을 가지고 선을 가진 도형, 은근히 쓸모가 많잖아요.

탭의 형태라던가 게시판 형태의 테이블이라던가 말이죠...

그동안 피그마에서는 기존에 Borde라는 플러그인으로 어찌저찌 구현은 할 수 있었는데 오토레이아웃을 쓸 수가 없어서 엄청나게 불편했었거든요.

각설하고, 어디에 어떻게 추가됐는지, 어떻게 세팅하는지 빨리 알아볼까요?

탭 만들기

먼저 사각형 그려서 텍스트 올리고 버튼이든 탭이든 원하시는 크기로 만드세요.

figma stroke

디자인탭에서 Stroke를 추가해줍니다.

figma individual strokes

그리고 이 아이콘을 클릭하세요. 소리질러어어어어ㅓㅇ엌!!

figma border-top

이렇게 원하는 쪽 면으로 설정해주시면 됩니다!

figma individual strokes

아래쪽에 Custom 메뉴를 누르면

두개도 쌉가능

이렇게 굵기를 지정해주고 꼭 한쪽이 아니라 여러 면을 지정할 수 있어요

진짜 붙어있는 버튼 만들때 대박이다...

이렇게 말이죠

그런데 말입니다.

이제 탈 플러그인해야하는 가장 큰 이유!!! 오토레이아웃!!!!!!!!!!!!!! 

당연히 잘 작동하겠지만 그래도 비교+확인해봐야겠죠??

기존 border 플러그인의 불편함

이렇게 기존에 플러그인을 통해서 구현할 때는, 오토레이아웃이 정말로 말을 안들었습니다...

반면에 이번 업데이트를 통해 너무도 깔끔하게 변경...

피그마 한쪽 테두리

이제 사각형 크기에 따라 잘 늘어나고 줄어들고 하는군요... 감격ㅠㅠㅠㅠㅠ

착한 업데이트 인정합니다... ㅠㅠㅠ

이거 외에도 이번 업데이트에서 꽤 편의가 개선되었는데, 관련 프리젠테이션은 아래 유튜브 영상을 참고해보시면 간단하게 훑어보실 수 있을거예요.

https://youtu.be/eA0bpZuRFb4

figma config 2022 Keynote Highlights

 

앞으로도 너무너무 기대가 되는 피그마 ㅠㅠㅠ 정말 갈아타길 잘 했고 따라가기 무서울지경이네요. ㅋㅋㅋㅋ

그럼 오늘도 유용한 팁이었기를 바라며 당근이었습니당!