aws-amplify / aws-amplify/amplify-studio

Figma Strokes are ignored on generated component

Open
#782 2 comments 0 reactions 0 assignees View on GitHub
feature-request 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?

React

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

Chrome

### Please describe your bug.

want to crete this
![Screenshot 2023-01-03 at 16 28 48](https://user-images.githubusercontent.com/17027219/210315299-956ba731-3778-419a-8c77-ee1d806071f6.png)

Used Stroke on Figma
![Screenshot 2023-01-03 at 16 29 13](https://user-images.githubusercontent.com/17027219/210315308-953ad042-bd1c-403c-a5fd-79bca2845385.png)

But amplify UI results with
![Screenshot 2023-01-03 at 16 31 20](https://user-images.githubusercontent.com/17027219/210315347-b9e03589-62e3-4923-a369-a307cd9251f0.png)

Looks like any stroke value is ignored.
I tried with of stroke to 20px without dash

### What's the expected behaviour?

create component with stroke.

stroke is used for design. If it is not working mostly my design sucks and no reason of using Amplify UI to generate UI code

### Help us reproduce the bug!

On figma create Button or line. give stroke to it. and generate component on Amplify

### Code Snippet

```typescript
// Put your code below this line.

```

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue by creating a Button or line with a Figma stroke and generating the component in Amplify Studio. Inspect the generated component output for where the stroke is lost; done when generated components preserve the configured stroke value in Chrome.

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.