하자!고유한 Figma 코드 생성기✨
27271 단어 FigmaReactTypeScripttech
며칠 전에는 Figma에서 React 코드를 생성하는 플러그인이 공개됐다.
그리고 이 소스 코드는 이쪽 창고에 공개되어 있습니다.
재밌으면 꼭 스타!⭐️
상기 창고는 React를 생성하는 데 쓰이지만 React 이외에도 다양한 형식으로 View를 쓰는 곳이 있죠.따라서 이 글은 상기 창고의 코드를 확장하고 편집하며'자기만의 Figma 코드 생성기'에 대한 해설을 작성할 예정이다.
그나저나 포크가 만든 물건이라도 Figma Community에서 자유롭게 퍼블리시 같은 것을 받을 수 있다.나는 원망할 것이 없다.하지만 "했어요"라는 보고를 받으면 즐거울 것 같으니 알려주세요!
개시하다
나만의 Figma 코드 생성기를 만들고 싶을 때 혼자 만들고 싶은 것은 대략 3가지 유형이죠.
Figma Plugin의 아키텍처
Figma Plugin의 운영 환경은 Figma의 sandbox 환경과 플러그인이 실행되는 환경 두 부분으로 나뉜다.
전자는 figma 대상에 접근할 수 있고 실제 Figma에 있는 대상의 위치 정보, 스타일 정보 등을 얻을 수 있으며 새로운 대상을 만들 수 있다.
후자는 플러그인 자체를 만드는 UI로 일반적인 웹 프런트엔드 개발과 대체로 같다.외부에 요청을 보낼 수도 있습니다.
이 두 환경은 메시지 함수를 통해 데이터를 교환한다.
예를 들어 이번 Figma to React의 처리 절차는 다음과 같습니다.
figma.ui.postMessage 함수를 통해 UI 스레드에 전달더 자세히 알고 싶은 사람은 아래의 문서를 보십시오.
중간 표시된 해설 - buildTagTree 함수
type buildTagTree = (node: SceneNode): Tag | null
이 함수는 지정한 노드를 트리에서 쉽게 성형되는 대상으로 변환합니다.
앞으로 추가 속성이 추가될 수 있습니다. 현재 Tag의 유형은 다음과 같습니다.
type Property = {
name: string
value: string
notStringValue?: boolean
}
export type Tag = {
name: string
node: SceneNode
isImg: boolean
isText: boolean
textCharacters: string | null
properties: Property[]
css: CSSData
children: Tag[]
}
그리고 원래 node를 넣었기 때문에 최악이라도 할 수 있어요.
구성 요소별로 Tree-modify TreeForComponent 다시 쓰기
type modifyTreeForComponent = (tree: Tag, _figma: PluginAPI): Tag
예를 들어 코드 기반 구성 요소
Spacer의 설정은 다음과 같다.{
name: 'Spacer',
matcher: (node: SceneNode) => {
return node.name === 'Spacer' && (!('children' in node) || node.children.length === 0)
},
modifyFunc: (tag: Tag) => {
if (tag.node.width > tag.node.height) {
tag.properties.push({ name: 'height', value: tag.node.height.toString(), notStringValue: true })
} else {
tag.properties.push({ name: 'width', value: tag.node.width.toString(), notStringValue: true })
}
tag.isComponent = true
return tag
}
}
matcher 섹션에서는 Tag의 노드에 어떤 속성이 있으면 Spacer 구성 요소로 판정되는 조건을 기술합니다.modifyFunc Tag 재작성 방법을 지정합니다.예를 들어, 노드의 폭이 높이보다 크면
width 속성을 Proops로 그립니다.이렇게 독자적인 구성 요소 정의 등을 덧붙이고 싶다면, 여기에 보충한다.
코드 섹션 생성 문자열 - buildCode
React의 코드 생성 섹션입니다.자세한 내용은 생략되었지만, 시작 탭과 아이의 탭을 그리기 위해 함수를 하나씩 씁니다.
다른 뷰의 작법용 물건을 만들고 싶을 때 이것과 비슷한 것을 만들도록 노력하세요.
function buildJsxString(tag: Tag, cssStyle: CssStyle, level: number) {
const spaceString = buildSpaces(4, level)
const hasChildren = tag.children.length > 0
const tagName = getTagName(tag, cssStyle)
const className = getClassName(tag, cssStyle)
const properties = tag.properties.map(buildPropertyString).join('')
const openingTag = `${spaceString}<${tagName}${className}${properties}${hasChildren || tag.isText ? `` : ' /'}>`
const childTags = buildChildTagsString(tag, cssStyle, level)
const closingTag = hasChildren || tag.isText ? `${!tag.isText ? '\n' + spaceString : ''}</${tagName}>` : ''
return openingTag + childTags + closingTag
}
export function buildCode(tag: Tag, css: CssStyle): string {
return `const ${tag.name.replace(/\s/g, '')}: React.VFC = () => {
return (
${buildJsxString(tag, css, 0)}
)
}`
}
출력 CSS 문자열 - buildCssString
마지막으로 CSS 섹션을 생성합니다.
이번 예는 태그를 차례로 재구성해 CSS의 배열을 만드는 것이다.
그런 다음 문자열을 생성합니다.
어떤 CSS 기재법에 대응하고 싶으신 분들은 여기서 열심히 다루세요.
Tag의 CSS는buildTagTree에서 CSS의 대체Figma의 속성을 처리합니다.이러한 속성 이름: 값은 기본적으로 웹 브라우저에서 이동하는 CSS 값입니다.다른 플랫폼에서 만들고 싶은 사람이 있다면 여기서 열심히 만져보세요.
export function buildCssString(tag: Tag, cssStyle: CssStyle): string {
const cssArray = buildArray(tag, [])
let codeStr = ''
cssArray.forEach((cssData) => {
const cssStr =
cssStyle === 'styled-components'
? `const ${cssData.className.replace(/\s/g, '')} = styled.div\`
${cssData.properties.map((property) => ` ${property.name}: ${property.value};`).join('\n')}
\`\n`
: `.${kebabize(cssData.className)} {
${cssData.properties.map((property) => ` ${property.name}: ${property.value};`).join('\n')}
}\n`
codeStr += cssStr
})
return codeStr
}
const Hoge: React.VFC = () => {
return (
<Hoge>
<div className="fuga">aaaaaa</div>
</Hoge>
)
}
const Hoge = styled.div`
color: black;
> .fuga {
color: white;
}
`
또한 원래 가입한 CSS의 속성이 눈에 거슬리는데, CSS 이외의 것을 사용하려면 이쪽의 속성을 저에게 줄 수 있을 것 같아요.
끝말
지금까지 Figma 코드 생성기의 내용입니다.
여러분의'나만의 Figma 코드 생성기'제작을 최대한 지원하는 품질 코드가 됐으면 좋겠습니다.
재미있으면 꼭 해보세요.그럼 Figma 잘 살아라!!
Reference
이 문제에 관하여(하자!고유한 Figma 코드 생성기✨), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/seya/articles/105ab3e2864178텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
