Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 13:43:03 -05:00
Code Issues Activity

Fix hug in frames (#174)

Browse source 
* fix hug in frames

* changeset

* fixes
This commit is contained in:
Alex Sánchez 2024-06-18 13:10:30 +02:00 committed by GitHub
parent 738ebfeffe
commit beb3caa5e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/lucky-baboons-joke.md Normal file
View file

@ -0,0 +1,5 @@
---
"penpot-exporter": patch
---
Fix Hug in Frames

5
plugin-src/transformers/partials/transformLayout.ts
View file

@ -31,7 +31,8 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
}; };
export const transformLayoutAttributes = ( export const transformLayoutAttributes = (
node: LayoutMixin node: LayoutMixin,
isFrame: boolean = false
): Pick< ): Pick<
LayoutChildAttributes, LayoutChildAttributes,
| 'layoutItemH-Sizing' | 'layoutItemH-Sizing'
@ -43,7 +44,7 @@ export const transformLayoutAttributes = (
| 'layoutItemMinW' | 'layoutItemMinW'
> => { > => {
return { return {
'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal), 'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical), 'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical),
'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE', 'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
'layoutItemMaxH': node.maxHeight ?? undefined, 'layoutItemMaxH': node.maxHeight ?? undefined,

2
plugin-src/transformers/transformComponentNode.ts
View file

@ -34,7 +34,7 @@ export const transformComponentNode = async (
...transformSceneNode(node), ...transformSceneNode(node),
...transformBlend(node), ...transformBlend(node),
...transformProportion(node), ...transformProportion(node),
...transformLayoutAttributes(node), ...transformLayoutAttributes(node, true),
...transformCornerRadius(node), ...transformCornerRadius(node),
...(await transformChildren(node, node.rotation + baseRotation)), ...(await transformChildren(node, node.rotation + baseRotation)),
...transformDimension(node), ...transformDimension(node),

2
plugin-src/transformers/transformFrameNode.ts
View file

@ -45,7 +45,7 @@ export const transformFrameNode = async (
// @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560 // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
...transformBlend(node), ...transformBlend(node),
...transformProportion(node), ...transformProportion(node),
...transformLayoutAttributes(node), ...transformLayoutAttributes(node, true),
...transformCornerRadius(node), ...transformCornerRadius(node),
...transformEffects(node), ...transformEffects(node),
...transformConstraints(node), ...transformConstraints(node),

2
plugin-src/transformers/transformInstanceNode.ts
View file

@ -59,7 +59,7 @@ export const transformInstanceNode = async (
...transformSceneNode(node), ...transformSceneNode(node),
...transformBlend(node), ...transformBlend(node),
...transformProportion(node), ...transformProportion(node),
...transformLayoutAttributes(node), ...transformLayoutAttributes(node, true),
...transformCornerRadius(node), ...transformCornerRadius(node),
...transformDimension(node), ...transformDimension(node),
...transformRotationAndPosition(node, baseRotation), ...transformRotationAndPosition(node, baseRotation),

7
plugin-src/translators/translateLayout.ts
View file

@ -115,12 +115,15 @@ export const translateLayoutAlignItems = (node: BaseFrameMixin): JustifyAlignIte
} }
}; };
export const translateLayoutSizing = (sizing: FigmaLayoutSizing): LayoutSizing => { export const translateLayoutSizing = (
sizing: FigmaLayoutSizing,
isFrame: boolean = false
): LayoutSizing => {
switch (sizing) { switch (sizing) {
case 'FIXED': case 'FIXED':
return 'fix'; return 'fix';
case 'HUG': case 'HUG':
return 'auto'; return isFrame ? 'fix' : 'auto'; // @TODO: Penpot does not handle hug in frames as figma does
case 'FILL': case 'FILL':
return 'fill'; return 'fill';
} }