For example, let’s take the case of the second card here: French Pasta. Now let’s create a new page to go into the details of a particular recipe. Follow the same method of using a card from the components, duplicating them and adding all of them to a stack with vertical scroll. They can be personalised based on your design taste. For this exercise, each card for a recipe has four elements – an image thumbnail, rating, name of the recipe and time needed to prepare it.ĭo not worry about the details of each card. 03. Create a vertical stackįramer X lets you introduce horizontal and vertical scrollable stacks (Image credit: Vamsi Batchu)įor the recipe cards, you need to follow a method similar to step 2 but instead of creating a horizontal scroll of cards, you will create a similar vertical one that is essentially a list of the most popular recipes with thumbnails. It works by dragging the mouse pointer to the stack. So simply connect the scroll container to the stack using the arrow prompt on the scroll container. After our scroll container is created we need content for it, which is served by the stack we previously created. Now change the property of the scroll in the right bar by changing the direction arrows in order to make it a horizontal scroll. Just as we created an area with the stack, create a scrollable area on the frame / artboard that’s the same size as the stack. Click on the + icon from the left nav and click the Scroll option. Now that we have created a stack, let’s make it scrollable. You can also personalise these cards by changing the name of the title and background according to your liking. If you want to increase the spacing between the cards, you can increase the width of the entire stack.
Duplicate these cards twice and make sure all the three cards are in the stack.Īs long as they are in the stack, these three cards can be easily rearranged without you having to worry about the spacing.
#FRAMER APP ANDROID#
Now let’s go back to the Components section and under Android kit, search for the Card-5 element and drag it into the stack we just created. After selecting the stack, drag and drop an area of 600 x 300 on the working frame to create a stack. This can be done by clicking on the + icon and selecting Stack S from the menu. Now we can use a new feature of Framer X called Stacks. 02. Create a content stackįor this recent activity block, first add the text ‘Recent Activity’, which is pretty straightforward. Now you can modify properties such as placeholder text, font size and colour using the right bar.
#FRAMER APP INSTALL#
Once you install these packages, you can use the elements from the Components menu on the left.įind the elements you want by searching in the filter – in this case a search bar, which is found under Example Kit. These packages contain elements like cards, buttons, keyboards, sliders, inputs and navigation menu items. The first thing to build is the homepage. We shall keep things simple with the following elements:
To fully appreciate the power of Framer X we’re going to create a real-life project: a simple cooking recipe application with some content and media (assets that are backed up in reliable cloud storage). Check out our user testing (opens in new tab) post for some of the best tools to complement Framer and help build real-world prototypes, and make sure you're using the best web hosting service for you. Testing is a core part of the the prototype building process and while Framer X is great at creating interactive prototypes it needs help to see how good its creations are.
This helps deliver faster load times and better performance. Plus, the use of React components means that users have more scope to add and extend including embedding media players, real-time data and graphs inside prototypes.
The latest iteration, Framer X (opens in new tab), now uses React and JavaScript instead of using CoffeeScript for developing micro-interactions and animation.
0 kommentar(er)
