airbnb / airbnb/react-sketchapp
Symbol Master Layout options for resizing with overrides
- Dominant language
- TypeScript
- Stars
- 14.9k
- Forks
- 797
- PR merge metrics
- No merged PRs in 30d
Description
I'm trying to accomplish a button that resizes based on the text override. The react component works correctly when used in a react project. When imported into sketch the button widths are set based on the width of the original text that was used to create the override.
However changing the override on an instance of the symbol the doesn't resize the shape of the button. I can manually make this work in Sketch by applying "Auto Width" to the text property and editing the Symbol Layout property to "Horizontal" resizing.

However as I work on other components (or any update, really) these selections get reset by the updated import in sketch, so I have to manually set them all again, every time, forever? Is there a way to add `autoWidth` for text (I tried resizeContstraints fixedWidth = false to no avail) and Layout mode `horizontal` during `makeSymbol`?
Contributor guide
Research direction
Start at the makeSymbol entry point and review how text resizeConstraints and Sketch Symbol Layout settings are represented during import. Verify whether autoWidth and horizontal resizing can be preserved for symbol overrides; done means changing the text override resizes the button without manual Sketch adjustments.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100