Natko Hasic @natkohasic Twitter profile

Pinned Tweet

Natko Hasic

@natkohasic

7 days

Redoing my workspace, keep minimal?

49

6

408

Last Seen Profiles

@LindaStrande

@AngelTM_VT

@Twillman83

@rdaneel_

@EAsCorner

@stanerbtw

@XiphiasZ

@erin_huban

@TreeKedua

@jared_nyts

@bayelrey80

@Dijongza

@beefbreen

@melomihani

@UCDavisDateline

@imago_zg

@SPJA

@roselyneberthon

@piyownaah

@_hanawing

@paradelady

@u8tisVOIw0vhOqT

@S6Jet

@DJPAULKOM

@dazeko_

@bemygue48848557

@vuecinemas

@rusophobiacoach

@_LowLeaF

@DiggaD_CGM

@FunkySowetan

@jordztwt

@soramitanbo

@MrPhloxx

@sookaicidio

@cynt29_k

Natko Hasic

@natkohasic

1 month

Surprisingly small amount of motion can add so much life.

36

80

2K

Natko Hasic

@natkohasic

3 months

Glass looks even better in motion, can't get enough of it.

33

49

2K

Natko Hasic

@natkohasic

6 months

Page dividers in Figma is a feature I’m badly missing. Seeing how many projects in the community use the “hack” on the left makes me think I’m not the only one. And yes, this is a Figma prototype of... Figma.

93

132

2K

Natko Hasic

@natkohasic

5 months

Figma technique so simple it's a shame not to learn it. ⚡️ Before & After ✦ No Plugins ✦ Done in 5mins Many of you asked so here it is. Ideal for presenting your work before and after, light to dark transitions and other interactions. Read below, Figma link included.

13

57

850

Natko Hasic

@natkohasic

11 months

When adding a new effect in @figma there is no way of knowing which one you just added. 🤷‍♂️ Solution could be a subtle fade-in of the new layer, to keep the simplicity of Figma's UI we all love. Thoughts?

47

27

659

Natko Hasic

@natkohasic

4 months

New year - new Figma plugin UI. 🌟 Hope everyone is feeling recharged and ready to take on 2024! Last year was big for design on X, can't wait to see what everyone has to share this year.

14

33

590

Natko Hasic

@natkohasic

6 months

@heyirfanaziz It's a really sweet solution, he said in the comments that it uses window.getScreenDetails() (get position of the browser) and local storage (to share the info between two windows probably). So it's one "page" on two windows, viewport changes based on browser position.

11

9

571

Natko Hasic

@natkohasic

2 months

Stacks + waves + motion = 🩶

29

17

525

Natko Hasic

@natkohasic

6 months

This platform is full of talent. Remember the side project app design I shared couple of days ago? Well @lukeska built a Tailwind demo already. And yes, with squircles! Live demo:

12

31

513

Natko Hasic

@natkohasic

3 months

More details, more depth. ✨

17

13

508

Natko Hasic

@natkohasic

6 months

Side project management app design, view variations. 🪄

18

22

499

Natko Hasic

@natkohasic

3 months

Before → After

29

21

475

Natko Hasic

@natkohasic

3 months

Figma plugin design, component handoff screen. Add component parts → define token structure → export style.

12

26

410

Natko Hasic

@natkohasic

3 months

Full view of the handoff card design.

14

10

388

Natko Hasic

@natkohasic

7 months

Weekend design exploration for a startup podcast. Total time 4-5 hours, no existing brand. ✨

17

20

370

Natko Hasic

@natkohasic

6 months

Brand identity for @wirekit , in bento as always. Really proud of this project, can't wait to show you more. Waitlist closing soon, response has been amazing so far.

9

16

366

Natko Hasic

@natkohasic

6 months

Wireframe to tailwind template in Figma with AI - unreal. ✨ Modified the "Build it" project by @jsngr as a starting point, managed to push it pretty far... page is responsive as well. Future is exciting!

11

39

352

Natko Hasic

@natkohasic

5 months

2023 Design Reel (with sound) 🎬 Best of my UI, prototyping, app design, motion and branding work in the past 4 months. Late nights after client work and every weekend were dedicated to these side-projects. Next year will be big, can't wait to show you all. Thank you.

16

20

312

Natko Hasic

@natkohasic

5 months

New UI design for handoff Figma plugin. 🛠️ → Select a component → Add context by selecting parts → Get production-ready React / Tailwind component Works with any design system, once set up it just syncs like magic when you want it to. Open source and free.

4

37

188

Natko Hasic

@natkohasic

5 months

Quick UX / CSS Tip. 🌟 Have the output reflect feedback given to the user. In left case the icon will never be copied (alt tag will) but browser shows it selected. Prevent unintended selections with user-select: none;, in this case on the img element. Output in comments.

4

31

301

Natko Hasic

@natkohasic

6 months

Design docs on the weekend is so relaxing. Any designers that feel like that as well?

16

12

296

Natko Hasic

@natkohasic

5 months

Prototyping in Figma is so simple and powerful. Total time: 10-15mins.

20

11

296

Natko Hasic

@natkohasic

11 months

Designers after paying $3,499 to look at memes.

11

26

282

Natko Hasic

@natkohasic

3 months

It’s that part of the evening when even designing “boring” Gantt charts feels incredibly inspiring. One of the best feelings ever. 🪴

12

5

285

Natko Hasic

@natkohasic

4 months

Empty state for a Figma plugin, one of my favorite things to design.

8

20

282

Natko Hasic

@natkohasic

3 months

Last card design completed, animations next. Didn't think "Gantt chart" concept had a lot of potential but it turned out nice. Gonna do a breakdown for each if people are interested in reading it.

11

7

284

Natko Hasic

@natkohasic

6 months

Nothing like a rainy late night weekend design review. Anyone else caught in bad weather so spending time in Figma? 🌧️

8

4

261

Natko Hasic

@natkohasic

5 months

Design (and dev) friends - please help us choose! We only have time to build one lander for @dashkitHQ launch, analytics tool we are working on. Dark or light mode? Full view in the comments, let me know 👇

50

11

246

Natko Hasic

@natkohasic

4 months

Illustration detail from the empty state design I shared yesterday.

12

7

233

Natko Hasic

@natkohasic

3 months

Illustration for a card representing design values from Figma transferred to a GitHub repository.

10

4

216

Natko Hasic

@natkohasic

4 months

Figma at night is like a cheat code for productivity.

9

6

201

Natko Hasic

@natkohasic

3 months

Not applying but here's a Bookmarks concept I had in mind, did a quick sketch to see what it would look like.

Andrea Conway

@ehikian

3 months

COME DESIGN THE FUTURE OF X the speed that teams are moving rn is insane (&& so much fun). if you're a designer looking to make an impact & help build the everything app, we want to hear from you

94

86

794

11

5

186

Natko Hasic

@natkohasic

2 months

Making progress on the rest of the animations for those cards, can't wait to share them all with you.

8

1

164

Natko Hasic

@natkohasic

3 months

Prompt timeline detail from the AI video editor...

10

4

150

Natko Hasic

@natkohasic

9 months

@sdw Looks like the stock market on a bad day but it was a good attempt for that time.

1

2

128

Natko Hasic

@natkohasic

11 months

Anyone noticed how Notes icon used to have ripped paper at the top? I can't be the only one that missed this.

9

2

128

Natko Hasic

@natkohasic

6 months

Analytics card settings with additional info and preview.

4

6

125

Natko Hasic

@natkohasic

4 months

Finishing the details on the Colors overview for the Figma plugin. Love the thin line between neutral minimal look and touch of personality.

7

3

122

Natko Hasic

@natkohasic

4 months

Analytics cards designs are finished, I'll share the animations as well. Total time around 3 hours, done in Figma.

6

3

117

Natko Hasic

@natkohasic

6 months

Analytics card settings with preview - line chart type.

6

2

114

Natko Hasic

@natkohasic

2 months

First time using @radix_ui for a Figma plugin I'm working on and I love it. Time previously spent on basic functionality and keyboard navigation is now used on things like this icon transition. It's the small things that matter ✨

5

2

119

Natko Hasic

@natkohasic

5 months

We have a winner! 🎉 Dark [18] / Light [13] / Both [7] Thanks for your votes, starting dev next week. For those asking about the effect, everything is done in Figma, super simple to do (post about it coming up).

3

109

Natko Hasic

@natkohasic

4 months

Layers ( @layers_to ) has been an amazing place for designers and I'm happy to share 5 invites. 🎁 Reply with your design work in the comments and I'll DM you the invite! Animation made in Figma.

7

3

104

Natko Hasic

@natkohasic

4 months

Second analytics card illustration done, one more to go.

5

0

97

Natko Hasic

@natkohasic

6 months

@jsngr That is insane. I can also see it being some marketing angle, charging companies to make their landmarks in higher quality.

3

0

91

Natko Hasic

@natkohasic

6 months

@BrettFromDJ @webflow Good luck to anyone without a big audience getting this "mistake" fixed.

5

0

79

Natko Hasic

@natkohasic

4 months

Analytics card design for traffic per country. Extra info when expanded, with customizable slots and metrics.

0

1

71

Natko Hasic

@natkohasic

4 months

Quick analytics card design, line chart type. 📈

5

0

68

Natko Hasic

@natkohasic

5 months

@darylginn Stock photo of people shaking hands.

0

64

Natko Hasic

@natkohasic

3 months

Rainy Friday, perfect day to review old design system pitch decks.

4

1

63

Natko Hasic

@natkohasic

5 months

Analytics design for the lander done, on to the rest...

3

2

63

Natko Hasic

@natkohasic

4 months

Card design for @dashkitHQ PRO has the graphic at the bottom, but I tried moving it on top and now can't decide which looks better. Standard designer problems. And no Figma this time, both done right in HTML/CSS.

10

1

60

Natko Hasic

@natkohasic

8 months

@Der_DoJo @rsgnl @sdw I'm tech savy and didn't know that... or just didn't think about that. Good info, nothing wrong with displaying it once to raise awareness.

1

0

55

Natko Hasic

@natkohasic

5 months

Couple of months ago this seemed impossible. 300 followers → 14 years 1,000 followers → 5 months 2,000 followers → 1 month Thank you all for the support, 2024 will be big. 🙏

11

0

54

Natko Hasic

@natkohasic

4 months

Late night dark mode exploration ✨

4

0

51

Natko Hasic

@natkohasic

6 months

Crossed 1,000 followers here, I greatly appreciate you all! 🎉 I've been on Twitter for 15 years but never posted anything, just started 5 months ago and it's been great discussing design with everyone. Remember to share your work. ❤️

15

0

49

Natko Hasic

@natkohasic

4 months

Dark mode exploration from last night...

3

1

50

Natko Hasic

@natkohasic

5 months

Having too much fun with shadows and highlights in dark mode. ✨ I recommend opening full view to see the details. Total time: 2-3h in Figma.

3

1

44

Natko Hasic

@natkohasic

3 months

Sunday review over a coffee. Hope you all are having a nice weekend.

1

0

46

Natko Hasic

@natkohasic

3 months

Simple concept design for an AI video generation editor, based on features presented yesterday by OpenAI. 🎥 Prompt with text → choose director style → change camera angle → extend generated videos. Inspired by @nikolasklein 's wireframe.

3

0

39

Natko Hasic

@natkohasic

6 months

Preview of the analytics tool lander design. Can't wait to get the illustrations in motion, going to add some interactivity as well.

5

0

40

Natko Hasic

@natkohasic

6 months

@ilyamiskov Good memories...

7

0

40

Natko Hasic

@natkohasic

5 months

Details are coming along nicely...

4

1

37

Natko Hasic

@natkohasic

2 months

@uiuxadrian

5

0

36

Natko Hasic

@natkohasic

5 months

Design for handoff Figma plugin - colors screen. 🛠️ → Review all colors and variables → Edit output naming format → Get production-ready CSS / Tailwind Once set up it auto-syncs with destination folder or repository as a pull request. Open source and free.

2

0

33

Natko Hasic

@natkohasic

6 months

Glass effect on the settings menu for analytics dashboard, early design concept. 📈

5

2

31

Natko Hasic

@natkohasic

4 months

Exactly two years since I got my MacBook Pro M1 14in, by far the best laptop I've ever used. Every pixel I designed and developed since was done with the help of my buddy here, who always travels with me. Hope you all are having a nice weekend and getting some sun!

7

0

30

Natko Hasic

@natkohasic

1 year

@_TommyMason Expand it to even more unpopular opinion: Jira isn't for people.

1

0

29

Natko Hasic

@natkohasic

11 months

@ilyamiskov How did I not know about this earlier?

2

27

Natko Hasic

@natkohasic

2 months

@layers_to *checks date*

2

0

27

Natko Hasic

@natkohasic

6 months

Experimenting with Figma wireframes to tailwind using AI more. It waits for the user to type in "figma" as password, shows inline errors, thank you screen, etc. Also managed to make is use predefined style of components, meaning it will follow existing theme if provided.

0

1

27

Natko Hasic

@natkohasic

5 months

That's it! 👌 Hope you found it useful, here is the link to the Figma file so you can duplicate it and work from it later.

1

26

Natko Hasic

@natkohasic

11 months

@darylginn —keep old Apple product boxes forever

3

0

26

Natko Hasic

@natkohasic

1 year

@darylginn Inter but with fake mustache and glasses, copy-paste and rename to Outer. 🥸

2

0

24

Natko Hasic

@natkohasic

11 months

@ilyamiskov Right one by far... you can also make it collapsible on mobile only (with the same layout) if you are worried about mobile.

1

0

23

Natko Hasic

@natkohasic

9 months

Sunday evening testing of new tools for presentation... rotato app looking really promising.

0

23

Natko Hasic

@natkohasic

8 months

@sdw @rsgnl Why if it's true? And it's good info, I didn't know that before. When thinking about it on a bigger scale it matters.

0

21

Natko Hasic

@natkohasic

5 months

[ 4/4 ] Duplicate the entire frame (⌘+D or Ctrl+D) and rename it by adding "After" to it. Select only the line and mask layers and move them over to the right. Now enter prototype mode and connect these two frames by selecting "Smart Animate".

1

0

22

Natko Hasic

@natkohasic

1 year

As someone who's been working with Photoshop for almost 20 years, Generative Fill is the biggest breakthrough that I've seen so far. Here are some examples of how it could change the game.

1

0

23

Natko Hasic

@natkohasic

5 months

@CharlesPattson Charts and some more charts!

1

0

23

Natko Hasic

@natkohasic

9 months

Quick lander design I did for @wirekit , has a couple of details I am happy about. ⏱️ 2-3 hours (wireframe animation not included) Done in Tailwind, you can check it out live: #uidesign #buildinpublic

1

0

21

Natko Hasic

@natkohasic

9 months

Fun animation and illustration concept for the @wirekit website design (Figma wireframe kit). ✦ Create for desktop - get a bonus mobile experience. #buildinpublic #uiuxdesign

1

2

21

Natko Hasic

@natkohasic

4 months

@BenGeskin Not far from my prediction.

Natko Hasic

@natkohasic

11 months

Designers after paying $3,499 to look at memes.

11

26

282

0

22

Natko Hasic

@natkohasic

7 months

Piece by piece, small part of a design for a hero section.

0

20

Natko Hasic

@natkohasic

6 months

Dark mode coming along nicely. ✨

2

1

21

Natko Hasic

@natkohasic

5 months

We are cooking something fresh over at @dashkitHQ 🤌

Zoran Ugrina

@zugrina

5 months

With the new WordPress Admin UI redesign in 2024, we are excited to refresh the analytics as well.

14

10

166

2

0

21

Natko Hasic

@natkohasic

8 months

✨ Pitch deck for design system tooling I did a while back. Copy is a bit outdated by now but the deck performed well at getting the message across and visualizing the process.

2

0

19

Natko Hasic

@natkohasic

5 months

Hope everyone is having nice holidays, perhaps relaxing with some classics and a cup of tea. 🎄 Anyone got any new design books for Christmas?

5

0

20

Natko Hasic

@natkohasic

5 months

@FonsMans I don't see it so black and white. Tools are easy to learn, design isn't. Everything you said above that design isn't, applies only if you are making Framer portfolio templates. Just jump right in, I agree. Process matters, knowing how to communicate matters, structure matters.

0

1

19

Natko Hasic

@natkohasic

5 months

Interesting how much Apple product boxes changed in the last 10 years, from my first iPhone and iPad to the latest. I'm not the only one that keeps the boxes for no reason, right?

5

0

19

Natko Hasic

@natkohasic

6 months

A lot of you liked the side project app design so here is dark mode and few design updates. 🌗

1

0

17

Natko Hasic

@natkohasic

9 months

Nothing better than a Friday design review. Have a fun weekend designers! 🤘 #uidesign #buildinpublic @wirekit

1

0

17

Natko Hasic

@natkohasic

10 months

🌟 UX process can look good too. Wireframes done in Figma, a perfect Friday. #uiuxdesign #buildinpublic

3

2

17

Natko Hasic

@natkohasic

8 months

Testing color coding per category for the weekend. 🧪

2

0

16

Natko Hasic

@natkohasic

9 days

@concept_central Yeah that's pretty seamless... kinda overkill but I respect it.

0

17

Natko Hasic

@natkohasic

8 months

@ninopiamonte @figma @joshmillgate I wrote about the need for this while back.

Natko Hasic

@natkohasic

11 months

When adding a new effect in @figma there is no way of knowing which one you just added. 🤷‍♂️ Solution could be a subtle fade-in of the new layer, to keep the simplicity of Figma's UI we all love. Thoughts?

47

27

659

1

0

16

Natko Hasic

@natkohasic

6 months

Thanks for the comments everyone! Wireframes made with Wirekit for Figma - .

Wirekit - Figma Wireframe Kit

Ultimate Figma wireframe kit, with auto-layout and variables.

wirekit.com

0

2

15

Natko Hasic

@natkohasic

4 months

@darylginn It's a cycle of creating beautiful things that you will hate the next day.

0

16

Natko Hasic

@natkohasic

4 months

@concept_central Community notes is really the best feature I've seen on any social platform, this use case seals the deal. My favorite use case is when I get an ad on X and community notes say it's a scam, don't click it. 🤌

1

0

14

Natko Hasic

@natkohasic

5 months

Any input is greatly appreciated, thanks! #buildinpublic

1

0

15