Prototype and Code iOS apps in Figma

[Music] welcome to this exciting course on designing a sleek and interactive wallet interface using figma in this course you'll learn how to create a visually

compelling Wallet app from scratch we'll cover everything from designing a deck of cards creating a dial and list picker we'll leverage elements from the

design code UI kit and Apple's UI kit kit to build our design these kits provide pre-designed elements and a cohesive design system to speed up our workflow here's what you can expect to

learn learn how to initiate your wallet interface design from a blank canvas build and customize a deck of cards that will be the core element of your wallet design a functional dial and a list

picker to enhance user interaction and ease of use discover how to design and organize multiple screens for a seamless user experience learn to create reusable

components and their variance optimizing your design process and consistency across the interface Master the use of after delay triggers and smart animate for smooth

Dynamic animations and interactions for our YouTube premium members and subscribers from the design code website we offer additional Advanced sections swipe gesture

Implement intuitive swipe actions to navigate and interact with your wallet interface Carousel animation create engaging animated carousels to display content

attractively open overlay learn how to use overlays for presenting additional information or actions without leaving the current screen as a bonus we also provide

different Wallet app design templates and prototypes to inspire and expand your creative toolkit to follow along with this course you will need the figma file provided in

the link below this free version includes the UI design for the wallet app a simple prototype with the after delay trigger and a design system that includes text Styles color styles and

effect Styles in figma click on the community icon located in the top left tab this will take you to the Community page where you can find various resources and

kits use the search bar at the top to type Apple UI kit you'll see a list of results with the newest and most relevant kits appearing first find the latest Apple UI kit and

click on it it on the kits page click the open INF figma button this will automatically create a copy of the kit in your draft section making it easy for you to start using it in your designs

we'll primarily use this for the status bar and home indicator there's no need to reinvent the wheel Additionally you can download the design code UI kit from the figma community search for design

code UI kit by MTO this free version includes text Styles and various components such as buttons menus cards cards icons color

styles effect Styles and more for those interested in more advanced feature we offer exclusive templates in various categories and styles available for purchase you can explore and buy them at

design cod.com next let's explore the design code UI kit to enhance our design in the design code UI kit you'll find a comprehensive

color palette this includes primary secondary and neutral colors primary colors these are the main colors that represent your brand secondary

colors these colors complement your primary colors and add depth to your design neutral colors grayscale colors

used for text backgrounds and UI elements let's talk about how to use colors contextually within your design use lighter shades for backgrounds to reduce eye

strain medium shades are ideal for buttons and other interactive elements to make them stand out make sure your colors complement each other to create a visually

harmonious interface if you click on the canvas and check the right sidebar you will notice local variables text Styles color styles

and effect styles that are already set up these are part of the design system included in the UI kit clicking on the local variable opens a model with

detailed information color variables also known as design tokens store your color values using descriptive names and applying these variables consistently

ensures ease of updates and uniformity across your design users on Professional Organization and Enterprise plans can publish Styles so you can reuse them across your

designs I'll quickly show you how to use the design code UI kit in figma for more in-depth guidance you can visit the website at designcode ui.com press F to

create a new frame and in the right sidebar select the iPhone 14 pro frame size click on the style and variable icon in the fill panel this will open

the panel where you can manage Styles and variables here you can choose background Primary in the layer panel you'll see an icon called change variable

mode click on this to toggle between light mode and dark mode in the figma file go to the assets tab here you'll find all the local components from the design code UI kit

Library browse through the various components available such as buttons cards icons and more you can use the search bar to find specific

elements to use a component either click the insert instance button or drag the component directly onto the canvas once a component is on the canvas you can adjust its properties and

settings for example with a credit card component you can choose different card types and patterns there are other options you can try if you select the screen frame and

change the layer properties to dark mode you'll notice that the text and other elements will automatically update to the dark mode style when you select a text component

you'll see options for color and spacing in the spacing options you can choose different sizes from regular to extra large to change the text style select the text

component go to text properties and click on the text field to apply the desired style go to the fill panel and click the Color Picker to see the available color

styles you can explore more components from the assets and add backgrounds to enhance your design each component has its own settings that you can play with

now that you're familiar with the design system let's get started create a frame for the iPhone 14 pro in figma select the frame tool from

the toolbar or press F if you're new to figma click the icon in the bottom right corner of your screen and select keyboard shortcuts this will display shortcuts specific to your

device click and drag to create a frame with Dimensions 393 x 852 on the right side panel you can choose the option for iPhone 14 pro from

the list set the position to the origin with X at Z and Y at Z this helps maintain a clean and organized design select the frame go to the fill section in the properties panel set the

background color to dark or choose from the design system import the status bar and home indicator from the Apple UI kit to do this open the Apple UI kit file

using the status bar from the Apple UI kit in figma ensures design accuracy and consistency with Apple's guidelines saving time and providing a professional native look find the status bar and home

indicator components and copy them paste these components into your frame let's align this component in the properties panel locate the Align section click

align left then align top here on the status bar component property we can enable dark mode down here we can enable the layout

grid next let's go back to the Apple UI kit copy the home indicator and paste the component into the frame let's align the component to the

bottom left in the component properties you can enable dark mode next let's add a title section create a new frame by selecting the

frame tool and drawing a frame with Dimensions 39 350 write the title wallet select the text tool from the toolbar or press T

click on the frame and type wallet for better visibility we can add a fill color and adjust its opacity we can use the design system for

the fonts in the property panel click on the style icon and then choose title one position the title here for now next I want to create a button with

an icon to create A Perfect Circle select the ellipse tool and while holding shift click and drag to draw the circle change the size to 34 make sure the constraint is locked this will keep

the circular proportions next let's search for the three dots icon on the asset panel in the search bar type more then select the

icon a panel of properties will appear for that icon in the properties panel you'll see options to choose between a light or dark version of the icon once you've selected the Des desired version

click the insert instance button we can drag the icon and place it above the ellipse I want to change its outline to a fill next switch to the layers panel in the layers panel hold

down the shift key and click on each of the three dots to select them all next we'll use the white primary color from the design system then select the ellipse and

change its color to light gray by choosing container divider from the list let's hide the frame background since we won't need it go to the fill panel then

click on the I icon to hide it or delete it next let's create a frame by selecting both the icon and the ellipse then press option plus command plus

G make sure to align the icon to the center use Auto layout to organize the title section select the main frame then go to the auto layout panel on the right

to activate it by default resizing is set to hug content which will make the frame as small as possible go to the frame panel and change the resizing option back to fixed size set the value to

393 navigate to the auto layout panel and set the spacing to Auto this will use the available space to fill the frame in the properties panel set the padding to 16 and

8 now let's align this Frame you use a Smart guide to assist you hold down the option key while hovering the mouse over the frame you will see red lines and numbers indicating the space between

elements while holding the option key use the arrow keys to move your frame the space should be set to zero let's fix the ellipse here when

working with a design system in variables you need to consider whether it is in dark or light mode in our case we are working in dark mode let's verify one frame at a

time navigate to the layers panel and click on the variable mode icon select color and set it to dark you will notice that the ellipse changes to light

gray next we are going to replicate this card we'll focus on one card for now and later we'll cover how to create components and

variants start by drawing a rectangle in figma select the rectangle tool from the toolbar or press r on your keyboard click and drag to draw a rectangle with

Dimensions 170x 256 or set the dimensions directly in the frame panel in the properties panel on the right set the corner radius to 14 click on align

horizontal Center let's use the smart guide to help us position this card hold the option key and hover over the frame to see the spacing guides use the arrow keys to adjust the frame until the space

is 32 pixels apply a color of your choice or use one from the design system to do this select the rectangle go to the fill

section in the properties panel and choose a color like Indigo 800 alternatively you can manually add the hex color code next we need a Visa logo in this

figma file the logo is provided on the typography and content page find it then copy and paste it onto your card

the logo is too large so let's scale it down press K to activate the scale tool on the right you'll see the scale property from the list of options choose

0.5x this will scale it down by half while keeping the proportions next select the logo and the rectangle then press option plus command plus G to create a frame this will make

it easier to align the logo position it 12 pixels from the top and 0 pixels from the left add a name using the text tool select

the text tool from the toolbar or press T click on the rectangle and type the name in the text properties panel choose the font to subheadline semibold from

the design system align the text 12 pixels from the left and Center it vertically create an expiration date

frame by drawing a small rectangle press the F key then click and drag to draw a frame in the fill panel click on the style and variable icon then choose

container background as the color in the frame panel set the corner radius to five next use the text tool to add the expiration

date choose the caption 2 font style regular from the design system then set the text color to foreground primary we can use Auto layout for this

Frame navigate to the auto layout panel to activate it by default it's set to hug content set the space to zero we don't need any spacing set the horizontal padding to four and the

vertical padding to four align this Frame 12 pixels from the left and 12 pixels from the bottom use the smart guide for assistance by holding down the option

key all right so far so good next let's replicate this dial first let's create a circle use the

ellipse tool from the toolbar or press the o key hold down the option key then click and drag to create a perfect circle with Dimensions 295x 295 in the

frame panel you can adjust the values to maintain the proportions make sure to lock the constraint let's align the circle to the horizontal Center and 60 4 pixels from

the bottom use the smart guide for assistance when you click on the circle you'll see a DOT towards the right this

is the arc tool sweep defines how complete the circle is start specifies where the arc starts ratios defines how full the circle is as you adjust these

settings they will appear in the properties panel in the properties panel set the start value to 90 The Sweep value to

100% And The Ratio value to 80% let's add a color to this ring you can use the hex code for Indigo here or alternatively select Indigo 500 from the design

system let's create an inner ellipse using the ellipse tool draw an ellipse with Dimensions 231 by 231 or adjust the dimensions in the

frame panel position it in the center next create a frame by selecting the two ellipses and pressing option plus command plus

G add color to the inner ellipse from the design system by selecting background primary next we'll draw an outer ellipse for the knob select the ellipse tool and

draw an ellipse with Dimensions 58x 58 set the fill color to foreground primary from the design system align the ellipses to the

horizontal Center press command plus d to duplicate the outer ellipse navigate back to the frame properties and change the size of the duplicated ellipse to 44x

44 set the fill color to Indigo 500 from the design system now select the two ellipses and press option plus command plus G to create a frame this will make it easier

to align them to the center name the layer for better organization now select the inner ellipse and align it to the center next we'll replicate this list

picker similar to what you see in a calendar app to do this we will need the inner ellipse from the dial press command plus

d to duplicate it then move this layer out of the frame it's better to name the frame to avoid confusion next create its own frame by pressing option plus command plus

G set up the frame select the frame tool from the toolbar or press F and create a frame with Dimensions 231 by 34 make sure that the new frame is not

inside the dials frame to avoid confusion it's better to name the layers align this Frame to the horizontal Center add a fill color to the frame set

the color to white with an opacity of 16% for now let's import an icon from the asset Library Search for Credit in the search

bar I choose this one in the properties panel choose choose dark mode then click on the insert instance button move the icon inside the frame next add a text field by pressing

T and name it credit card align the icon to the horizontal and vertical Center in the text properties panel set the font to headline and the style to semibold from the design

system next let's add an auto layout first select the List's frame in the properties panel activate Auto layout in the frame panel set the horizontal resizing to fixed width with a dimension

of 231 align the list frame to the left and vertical Center in the auto layout panel set the vertical padding to eight and the spacing to

20 I want to set the horizontal padding separately to do this click on the corresponding icon set the left padding to 30 and the right padding to

16 I want to change the color to one from the design system choose container background tertiary let's name this Frame list next

duplicate this Frame by pressing command plus d move the duplicated frame above with zero spacing duplicate the initial frame

again and move it under the center for these lists I want the center one to be in active mode and the rest to be in inactive mode to do so select the

last one then navigate to The Fill panel click on this icon to detach the variable then click the I icon to hide the fill color repeat this process for the frame at the

top afterward we can change the names one to debit card and the other to Transit card let's change the text style to foreground

secondary change the center frames text style to foreground primary change the last one to foreground secondary now it's time to change the

icon while selecting the icon go to the component properties click on the drop- down menu you can choose from the list or use the search bar to find the

icon change the color style to foreground secondary repeat the same process for the other icon as you noticed the knob is behind the list picker let's move the knobs

layer above the list picker how we order the layer is very important as you noticed the list frame extends beyond the ellipse to solve this let's use the clip content feature

select the list picker frame then go to the frame panel click the check boox for clip content this will serve as a mask set the corner radius to 116 and more to shape it as a circle next we will create

a gradient with the previously duplicated ellipse this will create a fade in Fade Out effect first move the layer above the

list frame then add a gradient go to the fill panel click on the Color Picker and choose the gradient option add one more color stop at the

Center set the third color stop to Black with 100% opacity set the second color stop to Black at 0%

opacity lastly set the first color stop to Black at 100% opacity Let's test it out click on the first list frame then hold down the shift key while holding

shift click on the third list frame this will select all three frames together then press the up Arrow key to move them to the top while holding shift this will move them by 10

pixels and there you have it you've just created a card design a dial and a list picker in the next section I'll show you how to create components and variants to prepare you for

prototyping in this section I'll guide you through creating and using components and variants and how to integrate them into a prototype additionally I'll demonstrate how to utilize the after delay trigger F

which allows you to start an action after the user has spent a set amount of time on a frame let's create a component from the card design we made earlier select the

card frame you can do this by selecting it from the layers panel or clicking on the card in the canvas hold down the option key click and drag the card on the canvas and then release it this will

create a copy of the card you'll notice that the card changes to light mode by default we can add another frame to change the mode mode press f for the frame tool click drag and release to

create a new frame click on the change variable mode icon in the layers panel select colors then choose dark to switch the card back to dark mode go to the fill panel and click on the style and

variable icon change the background color to Blue from the design system now let's create a component you can do this by selecting the card in the canvas or from the layers panel there

are three methods to create a component in figma first click create component in the toolbar at the top second rightclick on your selection and choose create

component from the context menu third use the shortcut keys on Mac press option plus command plus K figma will Nest the layers within a special

component frame in the layers panel components are marked with a purple icon components are reusable elements in figma they allow you to create

consistent designs by reusing elements across your project for example a button component can be used in multiple places and updated simultaneously by editing the main

component next let's add a variant to our component select your component then go to the toolbar at the top and click add variant alternatively rightclick on your selection and choose add variant

from the context menu this will create a new variant next to the original component variants are grouped together in a single component set variants are

different versions of a component they help you manage variations of a design such as different states of a button default hover press let's add Auto layout to organize

our components better select the frame navigate to the auto layout panel and activate it set the vertical and horizontal padding to 40 add Auto layout to the component

select the component then go to the auto layout panel and activate it use a horizontal layout for better organization you'll notice a plus icon here click on this icon to add new

variants add three more variants to create a total of five credit card variants add one more variant this sixth variant will be used for the expanded

and transformed landscape mode when tapped adjust the properties of the new variant to create different states such as changing the color select each variant and rename them in the text

field next to property one rename the first five variants to card one to card five rename the sixth card to landscape now let's modify the sixth

card to be a landscape card rotate the card by 90° select the card and use the rotate tool or set the rotation angle to 90 in the properties panel use the scale

tool to adjust the height press K to activate the scale tool then scale the height to 240 while while keeping the proportions remove any decimals in the dimensions from the frame panel to keep

it clean adjust the position of the elements on the card select the logo and

change its rotation angle back to zero align it 20 from the left and top select the name set its rotation

angle back to zero align it horizontally Center and position it 20 from the left select the valid date set its rotation angle back

to zero and align it 20 from the left and bottom use the smart guide for assistance by pressing the option key this will help align the elements

precisely change its padding to four let's remove the decimals for a cleaner design click and drag on the vertical rulers to pull guides onto your canvas this will assist you in aligning with

other elements remove any remaining decimals from the text and frame settings for a cleaner design next let's add color to our cards

you can use the hex codes provided here at the bottom select the first card and go to the fill panel click and choose orange 500 for the color for the second card choose red

500 for the third card choose teal 700 for the fourth card choose purple 700 for the fifth card choose Indigo 800 we can also change the logo by

selecting the components and using the parent component panel click on the drop- down menu in the parent component panel and choose master card for the logo let's name this Frame components

it's also a good idea to add the section title frame as a component select the frame then go to the toolbar and click on the create component

icon next duplicate this component by pressing command plus d this will create an instance finally drag the parent component frame into the component

frame it's better to change this Auto layout to a vertical layout remember to name your layers properly for better organization next replace the current card with the

component we created earlier on the component's frame select the first card and press command plus C to copy it go back to the screen frame

and select the card you want to replace right click on your selection and choose paste to replace this will automatically delete the old card and replace it with the new instance it's a copy of the main

component that you can place anywhere in your design instances are linked to the main component meaning they inherit any updates made to the main component you can customize instances to

some extent without breaking their connection to the main component next we will recreate this deck of cards to do this we will use an oval as a guide press the o key then

click and drag to create an oval set the dimensions to 623 by 470 make sure the ellipse is placed inside the screen's

frame align it horizontally to the center and position it at the bottom of the card now let's use layout grids for precise alignment first select the screen activate the layout grid by

selecting the frame and clicking on the plus icon next to layout Grid in the properties panel in the grid panel choose columns from the drop- down

menu set the type to left and adjust the column width to 64 change the gutter value to

one adjust the color opacity to 20% for better visibility set the offset value to 47 this will help us to align objects within a

frame with the guide set up let's create a deck of cards select the card and press command plus d to duplicate it in the frame panel change the angle to minus 10° to rotate the card to the

right remove any decimals in the rotation for a clean design click and drag the new card to the right placing it next to the second grid

column just above the oval while the card is selected go to the component panel in the property

section choose card 4 from the drop-down menu rename the layer to credit card 4 duplicate the initial card by pressing

command and plus d rename the layer to credit card 2 in the component panel change to card two rotate the card to 10° to tilt it to the

left move credit card 2 to the left placing it on the first grid column just above the oval remove any decimals in the frame

panel select the center card and rename it Credit Card 3 in the component panel change to card three duplicate credit card 2 by

pressing command plus d change the order so that card one is beneath card 2 rename it to credit card

1 in the component panel change to card one change the angle in the frame panel to 20° move credit card 1 to the left

following the alignment pattern remove any decimals duplicate credit card 4 by pressing command plus d rename it to

credit card 5 in the component panel change to card 5 change the angle in the frame panel to minus 20° move credit card 5 to the right placing it next to

the third grid column just above the oval remove any decimals once our deck of cards is arranged we can remove the

guides select the screen on the layout grid panel click the I icon to hide the Grid in the layers panel on the left select the oval then click the I icon to

hide it or delete it and there you have it you've just created a deck of cards design before we set up the screens for the Prototype make sure to organize your

layers and name them properly once the first screen is set we will duplicate it select the screen hold down the option key click and drag on the canvas then

release this will create a copy of the screen keep the first screen as the original let's rename this screen to screen one now let's work with the duplicated

screens for the Prototype duplicate screen one by pressing command plus d by default this new screen is named screen 2 move screen two next to screen one

ensuring there's a 200 pixel space between them duplicate screen two in the same way by default this new screen is named screen

three now let's customize screen one we'll Center one card while hiding the others click on credit card 5 and while holding the option key click on credit card 1 to select all the cards with all

cards selected go to the layout properties change the angle to 0° set the Y position to 141 and line

them horizontally to the center next we'll work on screen two here we want to show a stack of colorful credit cards overlapping each other start by selecting all the cards again

click on credit card 5 and while holding the option key click on credit card one in the layout panel click on the Align horizontal Center icon this will automatically stack the cards just the

way we want and that's it you've successfully set up and Custom customized multiscreen prototypes in figma for our first prototype we'll create an intro animation using the

after delay trigger to automate the transition between screens the after delay trigger lets you transition to the next frame after a

specified time for example in an introductory screen you can set a 3,000 RS Ms 3 seconds delay to move to the main content automatically

now let's create a prototype connection to build the interaction click the Prototype tab on the right sidebar to switch to prototyping mode this setting allows you to preview your prototype with a

selected device click on the play icon here to preview from the device dropdown menu choose iPhone 14 pro you can choose the

model that best suits your project set the background color for your preview as desired hover over the screen one frame this is a hotspot a hot spot is where

the interaction happens it can be the entire frame or any object within it such as a button icon or heading next we have the connection click the blue plus sign on the edge of the button this is

the arrow or noodle that links the Hotpot to the destination here you define the interaction trigger actions and adjust animation settings then drag

the connection to screen two frame this is where the connection ends TP typically the destination is a top level frame unless you're using the scroll two action which can Target elements within

the same top level frame this opens up the interaction details modal first let's talk about triggers triggers Define what type of interaction will cause your prototype to move

forward this could be on tap a mouse click a touch gesture or even a key press for this tutorial we'll be choosing the after delay feature this parameter controls the length of the

delay preceding the start of the animation next we have actions actions define what happens when a user interacts with the Hotpot this could be moving to another frame opening an

overlay or even playing an animation now let's look at destinations the destination is where your interaction leads usually this is

another screen in your prototype but it could also be an overlay that appears on top of the current screen animation settings determine how your prototype moves from one frame to

another you can choose from various transitions like fading sliding or even custom animations in our case let's use Smart animation smart animation is a feature

in figma that creates smooth visually appealing transitions between different frames or states of your design it intelligently animates the changes in position scale rotation and opacity of

objects making your prototype feel more Dynamic and interactive by using smart smart animate you can seamlessly replicate various Dynamic effects including loading

sequences Parallax scrolling touch gestures sliders toggles switches expanding content pull to refresh easing beier

presets easing functions adjust the speed of an animation during its runtime making it start quickly and then slow down or start slowly and then speed up depending on the chosen curve

these effects are controlled using beeser curves which graph the progression of the animation over time you can find more information on their Help Center website at

https help. fig.com

https help. fig.com hcn us let's use gentle gentle easing is all about

creating smooth subtle animations that feel natural and comfortable for the user this type of easing is particularly effective when you want transition to be seamless and barely noticeable providing

a pleasant and fluid user experience let's check out our first interaction by clicking the play button at the top right it's awesome it rotates nicely you

can press R key to refresh to start playing your prototype click on Flow one on the left side of screen one flow one represents the sequence of screens and interactions

you've set up alternatively click on the flow starting point to add a live preview in the Prototype tab on the right sidebar next let's try other spring

animation spring animation mimics the behavior of a spring causing an object to move back and forth before settling into place this creates a bouncy elastic effect that makes the animation Lively

and engaging now let's test the quick version of the spring animation this animation is fast and bouncy with minimal damping perfect for

small playful interactions next let's try slow this animation is slow and smooth with significant damping ideal for gentle and subtle

transitions try switching to instant and notice how the movement is sharp and immediate compared to the smooth bouncy effect of the spring animation instant animation moves the

object directly to its final position without any bounce or delay this creates a sudden Snappy effect ideal for transitions where speed and immediacy are

needed try applying the movein animation and observe how the object gracefully slides into position this animation causes the object to slide into view from a specified Direction it's smooth

and Visually pleasing ideal for introducing elements gradually into a scene changed spring animation presets to Gentle and switching movein animation

to Smart animation for the duration leave the default value you can controls how long it takes in milliseconds Ms to complete the transition try these

settings and observe how they affect the flow and feel of your animation notice how the gentle spring animation offers a soft bounce and the smart animation provides a seamless and intuitive

transition we can increase the delay by 1200 milliseconds Ms this adds a 1.2 second pause before the animation begins allowing for a more

controlled and intentional start try lowering the delay and observe how it affects the timing and pacing of your animation return to 800 milliseconds I

find that this timing is perfect for the animation next let create an interactions for screen two to screen three select screen two click on the Blue Anchor Point small circle on the

right edge of screen two Drag The Anchor Point and connect it to screen three this will create a link between the two frames after connecting the frames the interaction details modal will appear

automatically choose after Delay from the trigger drop-down menu this means the transition will start after a brief delay set the delay duration to 100

milliseconds Ms this brief delay allows for a smooth visual transition select navigate to from from the action dropdown this tells

figma to move to the next frame ensure screen 3 is set as the destination frame choose smart animation to enable Advanced animations that smoothly

transition properties between the frames select the gentle preset this ensures the animation will start and end softly providing a natural and comfortable user

experience keep the duration at the default value of 800 milliseconds click on flow one in the left panel to start playing your prototype flow one represents the

sequence of screens and interactions you've defined alternatively you can click the play icon in the top right corner of the figma window to launch the Prototype

preview and there you have it you've just learned how to create and apply components and variants in figma design a deck of cards and set up a multiscreen prototype with after delay and smart

animation as a special bonus will also include an extra design with a unique prototype stay tuned for more creative insights and techniques exclusively available to our premium members on

YouTube and subscribers on the design code site in the next section we'll cover some exciting topics learn how to implement smooth and responsive swipe

interactions create engaging Carousel animations for dynamic content display explore how to add Dynam dnamic overlays to your designs