mirror of
https://github.com/penpot/penpot-exporter-figma-plugin.git
synced 2024-12-22 13:43:03 -05:00
🎉 Support for multi style texts
This commit is contained in:
parent
16e7aa37c4
commit
14a2a4b6fe
3 changed files with 33 additions and 32 deletions
|
@ -89,7 +89,7 @@ As mentioned above, this plugin gets you to a starting point. Things that are cu
|
||||||
- **Frames** (Boards in Penpot).
|
- **Frames** (Boards in Penpot).
|
||||||
- **Groups**.
|
- **Groups**.
|
||||||
- **Fills** (solid colors and linear gradients).
|
- **Fills** (solid colors and linear gradients).
|
||||||
- **Texts** (basic support. No segments. Only fonts available on Google fonts).
|
- **Texts** (basic support. Only fonts available on Google fonts).
|
||||||
- **Images** (basic support)
|
- **Images** (basic support)
|
||||||
|
|
||||||
## Limitations ##
|
## Limitations ##
|
||||||
|
|
27
src/code.ts
27
src/code.ts
|
@ -52,7 +52,7 @@ function traverse(node): NodeData {
|
||||||
fills: node.fills
|
fills: node.fills
|
||||||
}
|
}
|
||||||
|
|
||||||
if (node.fills){
|
if (node.fills && Array.isArray(node.fills)){
|
||||||
for (const paint of node.fills) {
|
for (const paint of node.fills) {
|
||||||
if (paint.type === 'IMAGE') {
|
if (paint.type === 'IMAGE') {
|
||||||
// Get the (encoded) bytes for this image.
|
// Get the (encoded) bytes for this image.
|
||||||
|
@ -91,33 +91,30 @@ function traverse(node): NodeData {
|
||||||
const defaultTextAlignVertical = "TOP";
|
const defaultTextAlignVertical = "TOP";
|
||||||
|
|
||||||
if (node.type == "TEXT") {
|
if (node.type == "TEXT") {
|
||||||
|
const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "fills"]);
|
||||||
let font = {
|
let font = {
|
||||||
fontName: typeof node.fontName === 'symbol'? defaultFontName: node.fontName, //TODO This means a text with several styles
|
fontName: styledTextSegments[0].fontName,
|
||||||
fontSize: typeof node.fontSize === 'symbol'? defaultFontSize: node.fontSize, //TODO This means a text with several styles
|
fontSize: styledTextSegments[0].fontSize.toString(),
|
||||||
fontWeight: typeof node.fontWeight === 'symbol'? defaultFontWeight: node.fontWeight, //TODO This means a text with several styles
|
fontWeight: styledTextSegments[0].fontWeight.toString(),
|
||||||
characters: typeof node.characters === 'symbol'? '': node.characters, //TODO This means a text with several styles
|
characters: node.characters,
|
||||||
lineHeight: typeof node.lineHeight === 'symbol'? defaultLineHeight: node.lineHeight, //TODO This means a text with several styles
|
lineHeight: styledTextSegments[0].lineHeight,
|
||||||
letterSpacing: typeof node.letterSpacing === 'symbol'? defaultLetterSpacing: node.letterSpacing, //TODO This means a text with several styles
|
letterSpacing: styledTextSegments[0].letterSpacing,
|
||||||
textAlignHorizontal: typeof node.textAlignHorizontal === 'symbol'? defaultTextAlignHorizontal: node.textAlignHorizontal, //TODO This means a text with several styles
|
fills: styledTextSegments[0].fills,
|
||||||
textAlignVertical: typeof node.textAlignVertical === 'symbol'? defaultTextAlignVertical: node.textAlignVertical, //TODO This means a text with several styles
|
textAlignHorizontal: node.textAlignHorizontal,
|
||||||
|
textAlignVertical: node.textAlignVertical,
|
||||||
|
children: styledTextSegments
|
||||||
};
|
};
|
||||||
|
|
||||||
result = {...result, ...font};
|
result = {...result, ...font};
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
|
figma.showUI(__html__, { themeColors: true, height: 200, width: 300 });
|
||||||
|
|
||||||
let root: NodeData = traverse(figma.root) // start the traversal at the root
|
let root: NodeData = traverse(figma.root) // start the traversal at the root
|
||||||
figma.ui.postMessage({type: "FIGMAFILE", data: root});
|
figma.ui.postMessage({type: "FIGMAFILE", data: root});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
figma.ui.onmessage = (msg) => {
|
figma.ui.onmessage = (msg) => {
|
||||||
if (msg.type === "cancel") {
|
if (msg.type === "cancel") {
|
||||||
figma.closePlugin();
|
figma.closePlugin();
|
||||||
|
|
36
src/ui.tsx
36
src/ui.tsx
|
@ -167,6 +167,23 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
|
||||||
}
|
}
|
||||||
|
|
||||||
createPenpotText(file, node, baseX, baseY){
|
createPenpotText(file, node, baseX, baseY){
|
||||||
|
const children = node.children.map((val) => {
|
||||||
|
return {
|
||||||
|
lineHeight: val.lineHeight,
|
||||||
|
fontStyle: "normal",
|
||||||
|
textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
|
||||||
|
fontId: "gfont-" + slugify(val.fontName.family.toLowerCase()),
|
||||||
|
fontSize: val.fontSize.toString(),
|
||||||
|
fontWeight: val.fontWeight.toString(),
|
||||||
|
fontVariantId: this.translateFontStyle(val.fontName.style),
|
||||||
|
textDecoration: "none",
|
||||||
|
textTransform: "none",
|
||||||
|
letterSpacing: val.letterSpacing,
|
||||||
|
fills: this.translateFills(val.fills, node.width, node.height),
|
||||||
|
fontFamily: val.fontName.family,
|
||||||
|
text: val.characters }
|
||||||
|
});
|
||||||
|
|
||||||
file.createText({
|
file.createText({
|
||||||
name: node.name,
|
name: node.name,
|
||||||
x: node.x + baseX,
|
x: node.x + baseX,
|
||||||
|
@ -183,25 +200,12 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
|
||||||
children: [{
|
children: [{
|
||||||
lineHeight: node.lineHeight,
|
lineHeight: node.lineHeight,
|
||||||
fontStyle: "normal",
|
fontStyle: "normal",
|
||||||
children: [{
|
children: children,
|
||||||
lineHeight: node.lineHeight,
|
|
||||||
fontStyle: "normal",
|
|
||||||
textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
|
|
||||||
fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
|
|
||||||
fontSize: node.fontSize,
|
|
||||||
fontWeight: node.fontWeight,
|
|
||||||
fontVariantId: this.translateFontStyle(node.fontName.style),
|
|
||||||
textDecoration: "none",
|
|
||||||
letterSpacing: node.letterSpacing,
|
|
||||||
fills: this.translateFills(node.fills, node.width, node.height),
|
|
||||||
fontFamily: node.fontName.family,
|
|
||||||
text: node.characters
|
|
||||||
}],
|
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
|
textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
|
||||||
fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
|
fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
|
||||||
fontSize: node.fontSize,
|
fontSize: node.fontSize.toString(),
|
||||||
fontWeight: node.fontWeight,
|
fontWeight: node.fontWeight.toString(),
|
||||||
type: "paragraph",
|
type: "paragraph",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
letterSpacing: node.letterSpacing,
|
letterSpacing: node.letterSpacing,
|
||||||
|
|
Loading…
Reference in a new issue