Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-21 21:23:06 -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 = (
node: LayoutMixin
node: LayoutMixin,
isFrame: boolean = false
): Pick<
LayoutChildAttributes,
| 'layoutItemH-Sizing'
@ -43,7 +44,7 @@ export const transformLayoutAttributes = (
| 'layoutItemMinW'
> => {
return {
'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal),
'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical),
'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
'layoutItemMaxH': node.maxHeight ?? undefined,

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

@ -34,7 +34,7 @@ export const transformComponentNode = async (
...transformSceneNode(node),
...transformBlend(node),
...transformProportion(node),
...transformLayoutAttributes(node),
...transformLayoutAttributes(node, true),
...transformCornerRadius(node),
...(await transformChildren(node, node.rotation + baseRotation)),
...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
...transformBlend(node),
...transformProportion(node),
...transformLayoutAttributes(node),
...transformLayoutAttributes(node, true),
...transformCornerRadius(node),
...transformEffects(node),
...transformConstraints(node),

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

@ -59,7 +59,7 @@ export const transformInstanceNode = async (
...transformSceneNode(node),
...transformBlend(node),
...transformProportion(node),
...transformLayoutAttributes(node),
...transformLayoutAttributes(node, true),
...transformCornerRadius(node),
...transformDimension(node),
...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) {
case 'FIXED':
return 'fix';
case 'HUG':
return 'auto';
return isFrame ? 'fix' : 'auto'; // @TODO: Penpot does not handle hug in frames as figma does
case 'FILL':
return 'fill';
}