Learn UI in 100 Days - Day 4 - Replicate Twitter (1)
By: Jeff Hu
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 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.