You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been testing Instatic for a few days now and I think it's absolutely fantastic — exactly the kind of tool I've been waiting for. Huge thanks and a lot of respect to the whole team!
For context: I'm a web designer without much of a technical background, and GitHub is new to me too. But a few small things stood out to me while using the tool, and I thought I'd share some ideas and suggestions from a user experience perspective — hopefully some of it is useful.
This is all specifically about how tokens are handled in Instatic.
Properties Panel
In the token selection dropdown for inputs, it would be great to also display the underlying stored values, so you can see what each token actually resolves to. I often reference Figma as a best practice when it comes to UI, so I've attached a few screenshots showing how they handle these things.
When a token has been set somewhere, it would help to highlight it visually — something like a chip — so it's recognizable at a glance and clearly distinguishable from other manually entered values. I'm not sure to what extent this is already being addressed by the in-progress redesign of the Properties Panel.
Framework Panel
When I design in Figma first and then implement that in Instatic, I naturally want to enter my variables 1:1. Because of that, I often use the manual option in the Framework panel to set up spacing scales — and I ran into a couple of issues there:
When creating scales manually, there should be a way to adjust the number of steps, i.e. remove or add rows.
There are some inconsistencies in how token names are handled. For example, when I create a spacing scale manually, the naming of the individual steps is completely ignored and they still get auto-numbered (visible in the selection dropdowns in the Properties Panel).
These all seem like relatively small fixes and adjustments to me, but I think they could noticeably improve the user experience. I can't help on the code side due to my lack of a technical background, but if there are any questions or if I can help in any other way, hit me up.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
I've been testing Instatic for a few days now and I think it's absolutely fantastic — exactly the kind of tool I've been waiting for. Huge thanks and a lot of respect to the whole team!
For context: I'm a web designer without much of a technical background, and GitHub is new to me too. But a few small things stood out to me while using the tool, and I thought I'd share some ideas and suggestions from a user experience perspective — hopefully some of it is useful.
This is all specifically about how tokens are handled in Instatic.
Properties Panel
Framework Panel
When I design in Figma first and then implement that in Instatic, I naturally want to enter my variables 1:1. Because of that, I often use the manual option in the Framework panel to set up spacing scales — and I ran into a couple of issues there:
When creating scales manually, there should be a way to adjust the number of steps, i.e. remove or add rows.
There are some inconsistencies in how token names are handled. For example, when I create a spacing scale manually, the naming of the individual steps is completely ignored and they still get auto-numbered (visible in the selection dropdowns in the Properties Panel).
These all seem like relatively small fixes and adjustments to me, but I think they could noticeably improve the user experience. I can't help on the code side due to my lack of a technical background, but if there are any questions or if I can help in any other way, hit me up.
All reactions