large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://blog.framer.com/create-an-ios-news-app-in-4-simple-steps-2b3fc3bb5780?source=rss----a40a6ad4b5fc---4">Framer &#8211; Medium</a> | Framer Team 
<h4>A step-by-step tutorial for easily designing interactive mobile prototypes in <a href="https://framer.com/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">Framer</a>.</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KjC-ZDL2KgbLgCz1OrdR2w@2x.png">
Over the last five months we’ve released a steady set of <a href="https://blog.framer.com/10-reasons-to-switch-to-framer-design-991db512004d">powerful design features</a> to make Framer perfect for both visual design and creating high-fidelity prototypes. You can now easily design an iOS app with built-in resources like the <a href="https://feathericons.com/">Feather icon set</a>, pre-made Artboards for iOS devices, and support for the native <a href="https://developer.apple.com/fonts/">San Francisco Typeface</a>.
This tutorial will teach you how to bring a news app to life by adding interactive components, flows, gestures, and native-level animations to create a prototype that feels like the real thing. By the end, you’ll be able to:
<ul>
<li>Trigger a like animation on click</li>
<li>Connect screens together to create a proper user flow</li>
<li>Fine tune a simple interaction with spring animations</li>
</ul>
<h3>Three Framer basics</h3>
Before we get started, here are a few things to understand about Framer.
<h4>1. Layers</h4>
<a href="https://framer.com/getstarted/guides/design/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#layers">Layers</a> are the building blocks of Framer. You can insert, manipulate, and style rectangles, oval, text, images, and gifs using the toolbar. To make the Layers you designed in Framer usable in the Code tab you have to enable targeting. You can find out more about targeting Layers <a href="https://framer.com/getstarted/guides/design/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#targeting">here</a>. If you’d like to get more comfortable with our code tab you can read about it <a href="https://framer.com/getstarted/guides/code/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">here</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*IEFFj4y7oNRJ7D_FXJPGKw@2x.png">
<h4>2. Events</h4>
Events are “things that happen” like a tap or a device rotation. You can listen and respond to these, and when you connect Events to a Layer, the Layer will react to the Events assigned to it. Read more about tap events <a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#events.tap">here</a>.
<blockquote>Pro-tip: You don’t have to worry about differentiating between Click / Tap / Touch events because Framer will update the event based on whether you’re designing for desktop or mobile.</blockquote>
To describe what we’d like to do on tap, we’d say something like this:
“When tapping this icon, let us know we tapped the icon”
This is what that statement looks like when translated to code:
<pre>like.onTap -&gt; print "Tap is succesful"</pre>
<h4>3. States</h4>
States allow you to define a Layer’s appearance. Layers can have multiple States, each with a different set of properties. You can also think of States as a way to manage multiple properties. Read more about States <a href="https://framer.com/getstarted/guides/code/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#states">here</a>. Start by adding the States and then animate them or cycle between them using <a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#example-cycle-through-states">stateCycle()</a>.
<pre># Create state like.states.liked = scale: 1.1 color: "#05F"</pre>
<pre># Like or unlike on tap like.onTap -&gt; like.stateCycle()</pre>
That’s it! Now let’s use these three basics to build our prototype.
<h3>Let’s get started.</h3>
First, download the Framer Design file <a href="https://framer.cloud/ZnuPY">here</a>, and if you haven’t already, download a free 14-day trial of <a href="https://framer.com/download?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">Framer</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*awRDPfmc6rBlbcEcKQcTDQ@2x.png">Our design file contains these three screens. (<a href="https://framer.cloud/ZnuPY">Download file</a>)
Now, take a moment to look around the file.
You’ll notice that each artboard has a description above it that explains its role in the animation. There’s also a code block below each artboard that shows how it translates into code. Refer back to these if you get lost or confused at any point.
<h4>1. Setting up the Home screen</h4>
We’ve set up an artboard in Design mode featuring a long list of articles that users can scroll through.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G__cxiuT-1Ffdb8NnMm-Yw@2x.png">(<a href="https://framer.cloud/vycSn">Download file</a>)
Let’s start by connecting our screens together and making our list of articles scrollable. We can do this by creating a <a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#flow.flowcomponent">FlowComponent</a> and showing our home screen as our first screen.
<pre># Set-up FlowComponent flow = new FlowComponent flow.showNext(home)</pre>
And voila, we have the first screen of our prototype. If you play around with the screen you’ll notice that you can scroll through the list of articles.
This is where the FlowComponent truly shines because it automatically detects when a Layer is longer then the default screen height and will create a scrollable container and insert the Layer. This makes it possible to scroll through the Layer without adding any extra code.
FlowComponent also recognizes that the tab bar at the bottom of the screen likely has to be fixed—standard behavior in iOS—and does so for us!
<h4>2. Setting up the article screen</h4>
In design mode you’ll notice that we’ve set up an article screen that users can read through.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nTaSvk3D1U7Sof3adYyALg@2x.png">
Let’s make the article accessible by adding a tap event.
<pre># Show our "article" on tap article1.onTap -&gt;</pre>
Next, let’s show the article screen on tap.
<pre># Show our "article" on tap article1.onTap -&gt; flow.showNext(article)</pre>
The article appears and the FlowComponent has made it scrollable for us yet again.
Now that we can navigate to the article screen, we should also be able to return to our home screen by tapping the back arrow in the top left corner.
<pre>back.onTap -&gt; flow.showPrevious(home)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*-jIpwLV4sy3gmNKjmBxXIQ@2x.png">(<a href="https://framer.cloud/TWMaA">Download file</a>)
<h4>3. Trigger the cover photo</h4>
The turtle photo is pretty stunning, so why not give people the ability to see it at a higher resolution.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*92P5ngYAKMmNaJoYCtkTXg@2x.png">
The default pattern in iOS is to treat this like an Event and use our FlowComponent to make it appear like an overlay:
<pre># Show "overlay" on tap cover.onTap -&gt; flow.showOverlayBottom(overlay) </pre>
That works, but we also need to be able to dismiss the overlay. We can do this by using the X icon and connecting it to the previous screen (like in the previous step):
<pre># Hide the "overlay" on tap exit.onTap -&gt; flow.showPrevious(article)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*GfM-T_isA5O5KWJ8ReHdGg@2x.png">(<a href="https://framer.cloud/TzvWu">Download file</a>)
<h4>4. Animate the like icon</h4>
Now it’s time to complete our user flow by adding the ability to like an article.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e4UQ0Z-NCMhHTQYuk0lgBA@2x.png">
In this case, a liked article will display a blue thumbs up icon that’s a bit bigger than its default State.
To achieve this, let’s create a State for the like button that has a blue color that matches our blue theme. Then we’ll make the icon a tad bigger by increasing its scale from 1 to 1.1.
<pre>like.states.liked = scale: 1.1 color: #05F</pre>
In order to like or unlike the Article we need to be able to tap the same like button. To do so we have to cycle through the liked and the default States of our like icon, for which we can use the stateCycle() function. Read more about stateCycle() <a href="https://framer.com/getstarted/guides/code/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#states">here</a>.
<pre>like.onTap -&gt; like.stateCycle()</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*aGrxaCJ0X1RNcujc_zsSGg@2x.png">(<a href="https://framer.cloud/nLVry">Download file</a>)
<h3>Advanced section</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e4UQ0Z-NCMhHTQYuk0lgBA@2x.png">
Our animation is working great! We can fine tune it even more to add small little details that will increase the clarity of our design and make our prototype feel even more real. For example, we could update the counter with our active blue color to emphasize that it’s been liked. We could also add our avatar to the row of pictures to show everyone that we liked the article.
To summarize what we can add:
<ul>
<li>Make the icon bounce when we tap it</li>
<li>Update the counter with an active blue color</li>
<li>Add the user’s image to the liked list, just to make it extra social</li>
</ul>
<h4>Making the icon bounce</h4>
In order to make the icon bounce when we press it, we’ll have to change the way it’s animated by adjusting the animation curve. In this case we’ll use the Spring curve and adjust the damping function to tweak the curve’s bounciness. Let’s make all our animations use this Spring curve so that our prototype feels bouncy and consistent:
<pre>Framer.Defaults.Animation = curve: Spring(damping: 0.7) time: 0.5</pre>
<h4>Animate the counter</h4>
Let’s use the same blue color from our like animation to create an active State for the counter and then trigger it with the same tap event used for the icon.
<pre>counter.states.liked = backgroundColor: "#05F"</pre>
<pre>like.onTap -&gt; like.stateCycle() counter.stateCycle()</pre>
<h4>Animating our profile picture</h4>
As a finishing touch, let’s add our picture to the liked list. If you take a look at our design file, you’ll notice that our user’s picture is already set up inside to be animated, with 0 opacity so it’s not visible.
In order to animate this, we’ll make our user’s picture slide in and make the last user in the row disappear. We can do so by moving each picture 18 pixels to the right and revealing our picture while hiding the last.
<pre># Create liked states avatar1.states.liked = opacity: 1 x: avatar1.x + 18</pre>
<pre>avatar2.states.liked = opacity: 1 x: avatar2.x + 18</pre>
<pre>avatar3.states.liked = x: avatar3.x + 18 opacity: 0</pre>
Tie all of this together with a tap event:
<pre># Tap to like like.onTap -&gt; like.stateCycle() counter.stateCycle() avatar1.stateCycle() avatar2.stateCycle() avatar3.stateCycle()</pre>
We now have a pretty complex interaction that looks really smooth! But you can probably tell that a lot of our code is getting repetitive. If you look at our code, we created five Layers all using stateCycle() and two Layers sharing a State with the same properties.
A general rule of thumb with code is to keep in mind that there’s a simplified way of writing your code when you’re repeating the same code. A For-Loop can help you avoid writing repetitive code. Read more about Loops &amp; Arrays <a href="https://framer.com/getstarted/guides/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#loops-and-arrays">here</a>. First, we’ll need to create an Array containing our layers and then assign properties to the Layers in that Array.
<pre>for layer in [avatar1, avatar2] layer.states.liked = x: layer.x + 18 opacity: 1</pre>
We create this with the syntax [avatar1, avatar2], you can add as many Layers to the Array as you like. The layer is a Variable that represents the count in the array for that iteration of the loop. Read more about Variables <a href="https://framer.com/getstarted/guides/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#variables">here</a>. It starts as avatar , then becomes avatar2 . We then use the layer variable to assign States to our avatar Layers. If you would like to find out more about this then you can read our <a href="https://framer.com/getstarted/guides/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">programming guide</a>.
We can use the For-Loop for practically everything, including our stateCycle() :
<pre>like.onTap -&gt; for layer in [like, counter, avatar1, avatar2, avatar3] layer.stateCycle()</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*JBfVmp9eEL9-RDQUPoUzcg@2x.png">(<a href="https://framer.cloud/ZnuPY">Download file</a>)
<h3>Summary</h3>
You can create common iOS patterns and micro-interactions with three basic functions of Framer:
<ul>
<li><a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#layer.layer">Layers</a></li>
<li><a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#layer.states">States</a></li>
<li><a href="https://framer.com/docs/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#events.events">Events</a></li>
</ul>
You can use <a href="https://framer.com/getstarted/guides/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial#loops-and-arrays">For-Loop</a> to avoid writing repetitive code.
We hope you’ll apply what you’ve learned to all your future prototypes! If you’re still hungry for more knowledge, we have a lot of resources to help you learn Framer.
<h4><a href="https://framer.com/getstarted/tutorials?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">Framer Tutorials</a></h4>
Watch our beginner tutorials featuring in-app walkthroughs, voiceovers, and downloadable projects to follow along with.
<h4><a href="https://framer.com/getstarted/examples?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">Free Examples</a></h4>
This section features nine different prototypes with native iOS interactions including loading, notifications, transitions, scroll, and more. Open each project to view it in Framer Cloud, then click the Download to Framer button to open the file in Framer. You can reuse the designs and code from each prototype to get a head start on your own projects.
<h4><a href="https://framer.com/getstarted/guides/programming/?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial">Programming Guide</a></h4>
Get the basics of programming and learn how to improve your skills.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F73c5bb%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F73c5bb%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F73c5bb%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/fed1d539220c6c663da1655d0e50de3b/href">https://medium.com/media/fed1d539220c6c663da1655d0e50de3b/href</a></iframe><a href="https://framer.com/features/design?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial&amp;utm_content=footer"><img alt="" src="https://cdn-images-1.medium.com/max/600/1*sdtKFiW1YN4FaMrHeNgUQQ.png"></a><a href="https://framer.com/group"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*PHGNn6aQzjMXnmTEYat9GQ.png"></a><a href="https://framer.com/download?utm_source=medium&amp;utm_medium=blog&amp;utm_campaign=ios_newsapp_tutorial&amp;utm_content=footer"><img alt="" src="https://cdn-images-1.medium.com/max/353/1*axq8Dl8TDS3uoNDd9JzwVg.png"></a><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2b3fc3bb5780" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.framer.com/create-an-ios-news-app-in-4-simple-steps-2b3fc3bb5780">Create an iOS news app in 4 simple steps</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create an iOS news app in 4 simple steps

Create an iOS news app in 4 simple steps

A step-by-step tutorial for easily designing interactive mobile prototypes in Framer.

Top Stories