In this video, Nathan Manousos creates a prototype that demonstrates the clip group feature in Flinto for Mac. By creating clip groups around a button and a search field, he is able to create a transition that involves an animated shape change from a circle to a rectangle. Using connected layers in the transition designer, he shows how to create an impressive search field expand transition.
- View Offline
- [Voiceover] Alright I'd like to show you…an example of Clip Groups.…So I've created this new document to test it out.…I've got two screens here, one called…Button and one called Field.…The Button Screen has a search button on it,…but it's a square and I want it to be a circle.…So you may wonder why I used a square image.…Well that's because I'm going to use a Clip Group…to round off the corners.…So with any group selected, you can go over…to the Group Options in the Inspector,…and choose Overflow Clip.…When you have a Clip Group, you can re-size…the group and whatever content extends outside…of the group will be clipped off like a mask.…
In this case I'm going to keep it at the…actual size of the content, but I'm going to change…the Radius option here, and I'm going to make that number…bigger until it looks like a circle.…So that looks right.…I've got a nice circular button.…And on the other screen, I'm going to choose this…Field Group and I'm going to set that to clip as well,…and give it a radius of five, so just a nice…
- What is Flinto?
- Importing designs into Flinto for Mac
- Linking screens
- Designing transitions
- Reusing transitions
- Adding scrolling content
- Previewing and sharing your prototype