Learn UI in 100 Days - Day 4 - Replicate Twitter (1)
Posted: March 03, 2021
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 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.