Today being the 4th day starts a new week of UI designing learning, instead of creating my own blog, which I found still challenging, I wanted to replicate some UI design with Figma, and I picked mobile twitter as the first target (as I am using it everyday).

And here is the result for today:

Thanks to browser's inspection tool, it makes replicating it much easier. What I did today is:

• create the frame
• create the header
  • inspect element, use computed, to get the actual rendered font, so now we know the Home title is in Segoe UI Black

  

  • use auto layout to place 3 elements (it takes around 20 mins of trial), auto layout is indeed powerful but also difficult, and I found the following post very helpful
• while I was trying to create the bottom nav, I found it is hard to replace icons, until I found the reply here
  • Make each icon a component (assuming you’re using SVGs). Keep set of icons within a frame called icons to keep all neat. Swap out as required.
  • and this is really mind blowing, I understood it immediately (because I realized I watched such operation in learning figma videos), and started to make it. See this youtube video for what I am talking about.

And that's all for today's 1 hour, I'll continue this replication project for the following days, and I'll try to search for the best practices while doing so. I know it will be slow, but I'll learn a lot.

Also, let me know if there is anything I can improve, your feedback will make me a lot more easier to persist.