When we released Based UI Kit (our first UI Kit), we never expected it to be used by so many people. We heard from Designers, Developers and Product Owners that Based UI really was a great asset.
The only downside to the Based UI Kit was that it wasn’t focused enough on mobile. You could transform the assets into a nice mobile experience with a bit of work, but who wants to do a lot of work on a UI Kit? You may as well start from scratch, right?
I felt we could improve Based and also provide a bootstrap-esque mobile UI Kit that stayed pretty close to Material Design and iOS. Based Mobile provides a foundational template and assets for designing mobile social media apps.
Based Mobile is ready for data! Nearly everything is a symbol in Sketch:
Which allows you to do cool stuff like this:
This makes it really easy to choose different states for each activity. Combine different Avatar & Name blocks with different icons and content; it can all be configured from the symbol panel.
This UI Kit also leverages the fantastic Auto Layout plugin. This plugin works with the symbols to automatically adjust the height between elements as you change the content.
It's awesome:
[/embed]https://www.youtube.com/watch?v=oSPlSkAyCk4\[/embed]
By using the Auto Layout plugin within a symbol, you can add as much text as you like and don’t have to move a single layer. Here is how you do it:
- Drop the type of activity you want to use (there are 6 options)
- Change the “Post Content” attribute in the symbol panel
- Turn on the Post/Guide asset in the symbol panel
- Adjust the height of the symbol so that the “top” of the guide marker aligns with the bottom line of text
- Turn off the Post/Guide asset to hide the guide
You can even pin the corners in the Auto Layout plugin, allowing you to expand your canvas and have the content flow with it. The document wasn’t tested using that feature, but it is there for you to try.
What's included in this Mobile Social Media Kit?
- Six Activity Feed update cards
- Two different post controls
- Five avatar/name handles
- Basic UI components (tabs, inputs, labels, buttons)
- Two different modules for follow relationships
- UI modules for posting activities
- 20 Artboards of feeds, profiles, followers, groups, etc
In total, the new kit includes 80 screens that can help you bootstrap your social media feeds faster than ever.
Interested? Head over to the download page and grab it! Don't forget to tweet about it to all your followers! If you tweet about it, we could select you for a special bonus!