aws-amplify / aws-amplify/amplify-studio

Figma components with size Fill are generated in React with fixed size in pixels

Open
#834 1 comment 0 reactions 0 assignees View on GitHub
bug figma-code studio-ui
Dominant language
No language data
Stars
135
Forks
32
PR merge metrics
No merged PRs in 30d

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React

### Which UI component?

Other

### How is your app built?

Create React App

### What browsers are you seeing the problem on?

Chrome, Firefox

### Please describe your bug.

If I create a component in Figma with vertical and horizontal sizes set to Fill, sync it with Amplify Studio, and then pull it into my React project, the React version of the component has a fixed size in pixels.
This can be worked around by explicitly setting child properties on the component in Studio of `height: unset` and `width: unset`; @awinberg-aws gave me this workaround, and suggested that I should file a bug about the issue so that components aren't generated wrongly.

(If this is an issue with a different part of the stack, feel free to move this bug report; I don't know whether the problem is in primitives in Figma, in the Figma-to-Studio sync, or in the React component generation.)

### What's the expected behaviour?

A component with sizes set to Fill should have either no height and width set, or perhaps height and width set to 100% or unset, so they fill their container. Basically, with the above workaround, `` makes MyComponent correctly be the height of the page; without the workaround, it does not, because MyComponent has a fixed pixel height set in its styles.

### Help us reproduce the bug!

See above; create a Frame in Figma (which will obviously have a fixed pixel size because it's a top level frame); create a component of some kind inside it and set that component's size to Fill both horizontal and vertical, so that resizing the top-level frame resizes the component. Then sync the component to Studio and pull it into a React JS project, and display the component on a page as ``. This should make a component the size of the rendered HTML page, and it doesn't.

### Code Snippet

_No response_

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named. Reproduce the Figma-to-Studio-to-React workflow described in the issue and inspect where the generated component receives its fixed pixel dimensions; the work is done when a component configured with Fill renders without fixed height and width, including in the provided Flex example.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.