Figma 플러그인으로 머리 말리기.

개발 중인 건조라는 개념이 있다.이것은 당신 자신을 중복하지 말고 공유 자원을 성명하고 재사용함으로써 코드를 줄이는 것을 의미한다.예를 들어 Figma 플러그인에 있는 모든 정확한 노드 유형을 검사해서 조정할 수 있는지 확인하는 간단한 조건문이 있습니다.나는 다음과 같은 몇 가지 일을 할 수 있다.

if (node.type === "FRAME") {  
  const frame = figma.createRectangle()  
  frame.width = node.width  
  frame.height = node.height

// and so on

}

if (node.type === "GROUP") {  
  const frame = figma.createRectangle()  
  frame.width = node.width  
  frame.height = node.height

// and so on

}

if (node.type === "ELLIPSE") {  
  const frame = figma.createRectangle()  
  frame.width = node.width  
  frame.height = node.height

// and so on

}

그러나 내가 그곳에서 한 것은 같은 정보를 여러 차례 새롭게 정의하는 것이 얼마나 계산 능력을 낭비하는가이다.그래서 나는 이것들을 하나로 포장할 수 있다.사용하기 어렵다!==성명은 배제해야 할 것이 너무 많기 때문에 가장 좋은 방법은 우리 친구.includes()를 사용하는 것이다.

const nodeTypes = ["FRAME", "GROUP", "ELLIPSE"] 
  if (nodeTypes.includes(node.type)) {     
  const frame = figma.createRectangle()     
  frame.width = node.width     
  frame.height = node.height   

// and so on

}

// ...

디자인에서 우리는 원자 부품을 사용하여 유사한 일을 할 수 있고 중용 자산을 레고 블록으로 구축하여 새로운 자산이 끊임없이 생성되는 것을 피할 수 있다.하지만 Figma 플러그인을 사용하여 설계의 생산성을 더욱 높일 수도 있습니다.

Figma 플러그인, 어떻게 된 거예요?
알았어, 위에 있는 Figma 플러그인 코드를 훔쳐봤어.Figma 플러그인은 엔진 덮개 아래에 Typescript를 사용하여 Figma 프로젝트를 만들고 수정하며 향상시킬 수 있습니다.
너는 알다시피 나는'디자이너는 코드를 인코딩해야 한다'는 이념의 전파자이다. 적어도 나는 디자이너가 코드를 이해해야 한다고 생각한다.나는 자바스크립트를 충분히 만들어서 자신의 Figma 플러그인을 구축하는 방법을 아는 것이 모든 디자이너들이 노력해서 이용해야 할 슈퍼 능력이라고 믿는다.
Figma 플러그인을 사용하면 설계자가 관리 부담 없이 최적의 운영 능력을 발휘할 수 있습니다.현재 Figma 커뮤니티에는 많은 플러그인이 있지만, 이것은 당신의 문제를 해결할 수 있는 방법을 찾을 수 있다는 것을 의미하지는 않는다. 어떤 문제는 당신의 용례에 있어서 너무 독특하다.
HomeHero에서, Google 파일을 더 잘 유지하기 위해 제가 작성한 사용자 정의 Figma 플러그인 (실제 발표한 플러그인 포함) 을 사용하고 있습니다.다음은 내가 그중의 일부를 소개할 것이다.
결국 Figma 플러그인은 일반적인 관리 작업을 반복해서 수행하여 파일을 정리하지 못하게 하고, Google 콘텐츠를 구성하는 것이 아니라 최상의 디자인 체험에 전념할 수 있도록 합니다.

플러그인 작동 원리의 "요점"
그 중 일부 GIST는 자신의 API가 있기 때문에 일부 위치를 간소화하고 그것을 잡기 위해 Scripter 플러그인을 사용한다. here물론 일반적인 Figma API를 사용하여 이러한 작업을 수행할 수도 있습니다. 다만 좀 더 상세할 수도 있습니다.

HomeHero TextLint
우리가 작성한 첫 번째 플러그인 중 하나는 텍스트 필터를 간소화하기 위한 것이다.우리 업계 덕분에 우리는 디자인에서 짧은 말을 자주 쓸 수 있고 잘못 걸면 제품에 영향을 줄 수 있다(어머, 세상에!).이런 상황을 피하기 위해서, 나는 문서를 분석하고, 그룹과 일치하는 모든 텍스트 문자를 업데이트하는 아주 간단한 linter를 만들었다.이것은 가장 깨끗하거나 가장 좋은 코드는 아니지만, 그것은 우리를 위해 많은 시간을 절약해 준다.

const find = ["Move in", "move in", "Homehero", "wifi", "Wifi", "WiFi"];
const replace = ["Move-in", "move-in", "HomeHero", "Wi-Fi"];

const layers = figma.currentPage.findAll((node) => node.type === "TEXT");
figma.currentPage.selection = layers;
const { selection } = figma.currentPage;

async function lintTextNodes(): Promise {    
  figma.root.children.flatMap((pageNode) =>        
  pageNode.selection.forEach(async (node) => {          
  if (layers.length > 0 && node.type === "TEXT") {              
    await figma.loadFontAsync(node.fontName as FontName);              
    node.characters = node.characters.replaceAll(find[0], replace[0]);              
    node.characters = node.characters.replaceAll(find[1], replace[1]);              
    node.characters = node.characters.replaceAll(find[2], replace[2]);              
    node.characters = node.characters.replaceAll(find[3], replace[3]);              
    node.characters = node.characters.replaceAll(find[4], replace[3]);              
    node.characters = node.characters.replaceAll(find[5], replace[3]);          
   }         
  return Promise.resolve("Done!");       
  })  
 );    

if (layers.length === 0) {          
  return Promise.reject("No layers selected");  
}}  

lintTextNodes();  
figma.notify("All linted");  
figma.closePlugin();

가정의 영웅 크루파르
두 번째 방법은 모든 이미지를 "FILL" 모드로 빠르게 설정하고 크기 조정 제약을 적용하는 것이다.이것은 완전한 증거는 아니지만, 모든 이미지에 기본적인 출발점을 준다.우리는 1톤의 이미지를 가지고 있기 때문에, 우리는 우리의 정선 기능을 사용하고, 그들은 대역폭을 줄일 때 응용 프로그램에 제공하기 위해 같은 크기로 설정해야 한다.
네가 400장이 넘는 사진을 가지고 있을 때, 너는 이것을 원한다.

const layers = figma.currentPage.findAll(isImage);
figma.currentPage.selection = layers

for (let shape of await find(selection(), n => isImage(n) && n)) {
// Update image paints to use "FILL" scale mode  
shape.fills = shape.fills.map(p => isImage(p) ? {...p, scaleMode: "FILL",} : p)  
shape.resize(375, 375)}

HomeHero 슬라이드 내보내기
마지막으로 우리는 Figma에서 일하고 우리의 투자자 슬라이드 그룹과 다른 슬라이드를 만들어 우리의 디자인 진도나 점심과 학습을 공유한다.이것은 좋지만, 이 슬라이드들을 내보낸 슬라이드집으로 바꾸어야 할 때, 이것은 매우 짜증스럽다.
다행히도, 우리는 Figma 플러그인을 사용하여 간단한 설정을 적용한 다음, 이 프레임을 다른 사람이 사용할 수 있도록 내보낼 수 있다. (심지어는 내 Lazy PDF 프로그램으로 그것을 무손상 PDF로 압축할 수도 있다.)

const layers = figma.currentPage.findAll(); 
const frames = layers.filter(isFrame);   

async function renameFrames() {     
 let items = frames; if (items.length > 0) {     
 for (const node of items) {       
  if (node.type === "FRAME") {         
    node.name = ((node.name).substr(0,2) != 'Slide/') ? node.name = "Slide" + "/" + node.name : node.name; }       
  }     
 }}         

renameFrames();     

figma.currentPage.selection = layers.filter((n) => n.name.startsWith("Slide/"));     
const { selection } = figma.currentPage;

function hasValidSelection(nodes) { return !(!nodes || nodes.length === 0); } 
const settings = [ 
{ format: "PNG", suffix: "@1x", constraint: { type: "SCALE", value: 1 } }, 
{ format: "PNG", suffix: "@2x",constraint: { type: "SCALE", value: 2 } }, 
{ format: "PNG", suffix: "@3x", constraint: { type: "SCALE", value: 3 } }, 
{ format: "SVG", suffix: "" },]; 

async function main(nodes): Promise {   
  if (!hasValidSelection(nodes)) return Promise.reject("No valid selection");   

  for (let node of nodes) {     
    node.exportSettings = settings;   
  }     

return Promise.resolve("Done!"); 
} 

main(selection).then((res) => figma.closePlugin(res));

플러그인이 릴리즈됨
이외에 나는 디자이너의 업무를 간소화하기 위해 일련의 소형 실용 프로그램 플러그인을 짰다.너는 나의 Plugins.run 사이트에서 그것들을 볼 수 있지만, 너도 나의 here 사이트에서 그것들을 찾을 수 있다.

마지막으로 이 모든 것은 시간을 절약하기 위해서이다
결국, 우리는 매일 끊임없이 반복되는 임무를 하는 것이 아니라 시간을 절약하고 싶다.Figma 플러그인 및 작성 지식이 있어 솔루션을 제공합니다.나는 자신의 플러그인을 작성하고 다른 사람도 작성한 플러그인을 사용함으로써 내가 얼마나 많은 시간을 절약했는지 계산할 수 없다.
만약 당신이 Figma 플러그인을 사용하기 시작하고 싶다면 제Gists를 시험해 보거나 제this awesome tutorial를 따라가세요. 그는 제가 디자이너와 코드에 대한 많은 느낌을 공유했습니다.
만약 당신이 최종적으로 정말로 당신의 팀을 위해 무언가를 창조했다면, 저에게 메모를 보내고 조언을 나누어 주십시오.나는 사람들이 무엇을 하고 있는지, 그리고 내가 그들이 하는 일에 어떻게 적응하고 이용하는지 보는 것을 좋아한다. 마치 내가 사람들이 내 주식으로 하기를 바라는 것처럼.