Alex Widua @alexwidua Twitter profile

Last Seen Profiles

@TheRealMXO

@EV_129

@brandonweekes_

@ai_ai__b

@DominosJack

@niloofar_mire

@ZVreeland

@ohyenna

@SemutMerayap696

@MoromoluwaTike

@socialklab

@dq4ey

@sena__777

@bellintanner

@Ffffff272034520

@LILADHARBENIWA7

@FakeCloutChasin

@smileseto

@rwdyjil

@ManuelaMolinaE

@dakotaliar

@Ahmadzai880

@selicorlulu

@BennyMaverick

@FunkySoulDJ

@Meowtwinkkiss

@RaeTheGoat

@Unicanal

@therealnocy_jay

@dudabeat

@the8prio

@AmberThomp48961

@PHIWarhawks

@cattimenara

@analua_zz

@binokkio

Alex Widua

@alexwidua

1 year

I’ve built a *very* shiny button 🫳🪩

878

6K

74K

Alex Widua

@alexwidua

10 months

Prototyped a little app that allows you to take frames from @figma and 'pull them into space'. The frames stay linked to the canvas and update on any changes

219

2K

13K

Alex Widua

@alexwidua

1 year

Here’s a ‘glow-in-the-dark’ effect achieved by reading the device’s ambient light sensor and partially dimming the UI 💡

48

640

6K

Alex Widua

@alexwidua

1 year

Made a little hourglass prototype in SwiftUI this weekend ⏳ I started with the idea of using a physical flip interaction to start/reset a timer and iterated from that

73

431

5K

Alex Widua

@alexwidua

11 months

Tried to recreate the subtle glass material of the Vision Pro interface in SwiftUI. It adapts the reflections to the room's light source. It’s difficult to capture on video but looks really pleasing in person. It’s very subtle but adds some nice texture and depth to the surface.

56

326

4K

Alex Widua

@alexwidua

8 months

Tried to re-create the new iPhone’s Titanium particle effect last night and made this interactive ‘material sample’ in SwiftUI

65

181

3K

Alex Widua

@alexwidua

2 years

Published a new @figma plugin "Beautiful Shadows" that explores a different way of creating shadows. Instead of adjusting offsets and blur values, you simply drag a physical light source around (parameterized by azimuth, distance etc.) Check it out ☀️

45

305

3K

Alex Widua

@alexwidua

1 year

🪩🔘

37

121

2K

Alex Widua

@alexwidua

9 months

Riffed on @ollybromham 's Incense timer in SwiftUI. A pinch of gestures, haptics, motion, blurs and particles

24

119

2K

Alex Widua

@alexwidua

1 year

Here's a little @Humane -inspired Solar Eclipse built in SwiftUI

20

88

2K

Alex Widua

@alexwidua

3 years

Just published Copy & Rotate, a @figmadesign plugin which allows you to create rotated copies of elements – with preview right in the canvas🙌Copies are componentized, which allows you to make changes to your design anytime.

29

141

1K

Alex Widua

@alexwidua

11 months

"Close All Tabs" in @arcinternet , but with more Oomph

10

18

607

Alex Widua

@alexwidua

4 months

Couldn't resist and had to remix @jmtrivedi 's mesh animation and tried to recreate a 'genie effect' using SwiftUI

12

23

544

Alex Widua

@alexwidua

5 months

Prototyped a subtle Zoom Blur and Motion Blur SwiftUI shader this weekend. It's a little detail that changes the feel of the dragged element entirely (and is fun to play around with)

11

20

524

Alex Widua

@alexwidua

10 months

One little detail is the grid animation while detecting a frame. I wanted to go for something that feels like something is being assembled/constructed. It’s pretty simple and almost entirely driven by a spring delay value (SwiftUI). (Commented gist: )

7

20

418

Alex Widua

@alexwidua

1 year

Played around with dynamic backgrounds too. They’re not so much different from time-based day/night backgrounds but the gradual changes make it pretty interesting.

8

31

381

Alex Widua

@alexwidua

4 months

I’ve made a little AI copilot for Origami Studio. Think of it as a tiny code editor that sits on top of Origami's canvas and lets you generate patches using GPT-4 – all within the same surface. It’s a native macOS app and you can get it here:

16

23

272

Alex Widua

@alexwidua

10 months

It's just a little idea I had while toying around with the visionOS SDK. How it works: it's a Figma plugin that talks to an iOS app via WebSockets. All Figma frames are loaded as AR reference images which makes them detectable by ARKit (works surprisingly well) 1/2

3

7

266

Alex Widua

@alexwidua

4 months

When designing the app icon I learned about ‘crease patterns’ – structural representations of intricate origami folds. The app icon shows the crease pattern for an Origami Crane – a nod to Origami Studio’s original app icon.

9

14

243

Alex Widua

@alexwidua

1 year

Excited to publish a Figma tool *for* Figma developers. Together with @diagram we're publishing Debugger, a Figma plugin for inspecting and debugging Figma layers. Support for all node types, watching and editing values, filtering and some more ✨

4

16

192

Alex Widua

@alexwidua

11 months

Here's the view inside Xcode. Maybe it gives an better idea of how it looks:

4

5

181

Alex Widua

@alexwidua

8 months

It’s an amalgam of SpriteKit particle layers, gradients and blend modes. Together they create a nice materiality. I liked the idea of using a turbulence burst to change between the material's colors

8

7

168

Alex Widua

@alexwidua

1 year

Here are some designs/particles that didn't make the cut. Either because I couldn't get them to flow nicely or they didn't look that good on the device.

3

4

128

Alex Widua

@alexwidua

10 months

...once detected, a high-res version is loaded, mapped onto a plane and stored as a reference for future updates. It's a lot of hot-glue and cobbled together, but it feels pretty magic to just pull frames from the screen like that :-) 2/2

1

125

Alex Widua

@alexwidua

9 months

@ollybromham For the time, I just had a hunch how it should move and feel. I pulled some of the variables into sliders and built a little 'design tool' which allowed me to fidget around with the values and feel it out (this makes SwiftUI such a neat prototyping tool!) :-)

4

1

92

Alex Widua

@alexwidua

11 months

(here's a reference image I snagged from the official announcement video)

1

2

85

Alex Widua

@alexwidua

1 year

and a React-version (using drag instead of the accelerometer) 🌙 →

Solar Eclipse

Solar Eclipse prototype

solareclipse.vercel.app

4

1

74

Alex Widua

@alexwidua

5 months

The blur strength responds to the drag/scale velocity. I'm using @jmtrivedi 's fantastic Wave package which makes it easy to work with the velocity + animate the shader values. The code is up here:

2

73

Alex Widua

@alexwidua

1 year

The demos are not actually reading the ambient sensor though (couldn’t get SensorKit permissions to work). Instead the luminosity is calculated using the device’s camera exposure. I grabbed the snippet from SO user AnuradhaH ().

4

6

68

Alex Widua

@alexwidua

11 months

The prototype's implementation is pretty naive. I’m sampling the camera view and the brightest area (pixels) act as the light source. I wish there was an easy way to access the iPhone’s native AmbientLightSensor via SensorKit and toy around with that :-)

3

0

62

Alex Widua

@alexwidua

9 months

@ollybromham Realized that the thread didn't post, so here's a appendum: The smoke is created with SpriteKit (Emitter and a Turbulence Field). I found that quickly oscillating the strength creates a dispersion effect, which goes nicely together with the device's accelerometer (the…

3

6

57

Alex Widua

@alexwidua

4 months

The animation progressively stretches and squeezes the layer at the same time. One trick was to delay each value a little bit to give each value room to breathe and do its thing... The code is up here:

2

4

55

Alex Widua

@alexwidua

1 year

The effect is a blur of linear gradients, shapes and SpriteKit particles that are mapped to the device's motion sensor :-) (I really like how it ended up resembling one of the iPhone's signature wallpapers.)

1

53

Alex Widua

@alexwidua

1 year

Having a lot of fun with these little SwiftUI explos recently. I’m learning a lot by just taking apart and remixing @philipcdavis ’ and @jsngr ’s prototypes — totally worth to check out Philip’s prototyping kit and Jordan’s repos

1

3

50

Alex Widua

@alexwidua

2 years

The plugin spawned from a small exploration of "intuition-based" inputs where I added a interactive light source directly to the Figma canvas. Ex. for intuition: creating more diffuse shadows → simply scale the light source up

1

2

45

Alex Widua

@alexwidua

1 year

@sdw @raunofreiberg

3

44

Alex Widua

@alexwidua

9 months

@ollybromham The stick itself is a spline that gets more flexion the longer it gets (like a flimsy piece of wood). It's a v subtle detail that gives the interface more materiality and makes it feel less like a slider – even if you're not consciously aware of it

1

0

39

Alex Widua

@alexwidua

11 months

(a little swiftui prototype) Sometimes closing all tabs is a little celebratory act, so I wanted an interaction that punctuates the moment

0

27

Alex Widua

@alexwidua

9 months

@ollybromham I liked the idea of having a flick 'matchstick' gesture to start the timer. It punctuates the moment and contrasts the otherwise calm and ephemeral feel. Relying on drag velocity alone to detect a flick wasn't enough – I found that flick gestures fired less touch events, so I…

1

26

Alex Widua

@alexwidua

2 years

Last but not least, I'm yet again again delighted by @yuanqinglim 's create-figma-plugin toolkit (). For every headache there is a utility function and the new docs are pretty sweet. Allowed me to go from idea → publish in just a few afternoons.

0

26

Alex Widua

@alexwidua

1 year

I'm excited to venture more into the Figma Developer space next year... 👀🔩⚙️

1

26

Alex Widua

@alexwidua

1 year

@RhysKentish @Humane of course ✨ the code is up here

GitHub - alexwidua/prototypes: little monorepo of swiftui prototypes

little monorepo of swiftui prototypes. Contribute to alexwidua/prototypes development by creating an account on GitHub.

github.com

1

22

Alex Widua

@alexwidua

3 years

This was also the first time I used @yuanqinglim 's create-figma-plugin toolkit and wow – what a comprehensive and thought-out library. Allowed me to have the first prototype up and running in just an hour. A staple for building Figma plugins from now on😌

0

22

Alex Widua

@alexwidua

2 years

The idea was then cultivated by @JoshWComeau 's amazing read and resource about 'Designing Beautiful Shadows in CSS' (). The credits for the smooth shadows, tint and some other fun interactive bits basically go to him 🙌

1

0

19

Alex Widua

@alexwidua

4 months

Make sure to check out @jmtrivedi 's post as well As always, thank you so much Janum for open-sourcing these prototypes; I'm learning so much from them 🥂

Janum Trivedi

@jmtrivedi

4 months

Curious how the Dynamic Island app morph animation works? I built a similar mesh transform animation in SwiftUI, and open-sourced it! It’s simple, interruptible, runs at 120hz, and doesn’t use any private APIs:

9

25

454

2

0

19

Alex Widua

@alexwidua

2 years

The collaboration so far has been so much fun! Super excited for what's to come 🙌

jordan singer

@jsngr

2 years

Alex is collaborating with us @diagram on ✨

0

23

1

0

17

Alex Widua

@alexwidua

4 months

PS. little accidental find: You get a directional Motion Blur for free if you blur the layer *before* applying the distortion shader. The shader compresses the blur horizontally but stretches/emphasizes the blur vertically

1

15

Alex Widua

@alexwidua

1 year

@duyluongdesign yup, SwiftUI :-) The code is up on GitHub

2

13

Alex Widua

@alexwidua

1 year

@NickADobos Kinda! I'm using a timer to drive the animations and the sand levels show the remaining and elapsed time. For the sake of the demo I sped up the timer and displayed arbitrary minutes :-) It's just a prototype, but if anyone cares to jump into the code:

0

12

Alex Widua

@alexwidua

11 months

@sdw always been a fan of @nandocosta_art 's material explorations for Microsoft Office (e.g. ) Would love to see some of these textures/materials make their way to visionOS' spatial surfaces

Office Apps in Windows 11 — Nando Costa

nandocosta.com

0

1

11

Alex Widua

@alexwidua

2 years

Check out what we've been working on and sign up for the waitlist 👇✨

jordan singer

@jsngr

2 years

powerful prototyping with code in @figma is coming soon from @diagram

52

72

1K

0

1

11

Alex Widua

@alexwidua

11 months

@raunofreiberg great job on the scene setup as well, looks fantastic

0

8

Alex Widua

@alexwidua

11 months

@jmtrivedi @DLX really nice, thank you for open-sourcing it!

2

0

7

Alex Widua

@alexwidua

10 months

@tarngerine @parkerhendo @diagram yea we had to abandon it for reasons, but I still believe in the idea behind it. One pattern I love is that the code is stored on the Artboard itself, so to iterate on a prototype you'd just option-drag/duplicate the frame – it's like visual versioning, felt p great & natural

1

0

6

Alex Widua

@alexwidua

4 months

In my day-to-day prototyping I use it mostly to create little utility patches and ‘jigs’ for all sorts of things (transforms, validate strings, randomize this and that etc.) Just describing the desired inputs and outputs of a patch helps a lot – it makes you break down the logic…

1

0

6

Alex Widua

@alexwidua

1 year

@jmtrivedi Super fun to think about how that'd play out for different apps! (Was just thinking about Calender with an 'Add event' action and/or 'Next Up' view)

1

0

4

Alex Widua

@alexwidua

1 year

@warpling yeah, would be fun to build some web prototypes with it :-) Yesterday I learnt that there used to be a DeviceLight API many years ago (). Never made it past the experimental feature flag though...

0

1

4

Alex Widua

@alexwidua

8 months

@laurentdelrey Glad you're back, looking forward to what's next!

1

0

4

Alex Widua

@alexwidua

1 year

@mortenjust These are fantastic! cc @7luyuhang

0

3

Alex Widua

@alexwidua

1 year

@vincentmvdm @joshm @jsngr @browsercompany - open a boost's popup.html in a split-view tab

1

0

3

Alex Widua

@alexwidua

9 months

@hturan This is brilliant, thank you for sharing!

1

0

2

Alex Widua

@alexwidua

1 year

@guidorosso @rive_app this is super cool, thank you for sharing!

0

2

Alex Widua

@alexwidua

2 years

@philipcdavis Thank you for sharing Philip! Big fan of your prototypes, they've been suuuper inspiring🙏

1

0

2

Alex Widua

@alexwidua

1 year

@nickarner Thank you Nick. I tried going from a bright room into a dark room first but it was difficult to tell what's going on

0

1

Alex Widua

@alexwidua

2 years

@_hraymond Thank you Hugo! 🙏

0

1

Alex Widua

@alexwidua

1 year

@yuanqinglim @figma @FigmaPlugins Thank you so much for your continuous hard work @yuanqinglim 🙏

0

1

Alex Widua

@alexwidua

1 year

@williamchanner @theloversmag @framer This looks lovely William. Congratz!

1

0

1

Alex Widua

@alexwidua

2 years

@stevenschafer thanks for the s/o, steven! 🙏

0

1

Alex Widua

@alexwidua

1 year

@stevenschafer @duyluongdesign Ran into the same issue w/ SensorKit. I'm not sure if the entitlements are only needed for publishing or for general sensor reading. I'll poke this a little bit more this week and will keep you posted Steven :-)

0

1