Aprenda Figma para iniciantes absolutos 2022 | Shehar Yar | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Aprenda Figma para iniciantes absolutos 2022

teacher avatar Shehar Yar, UI/Ux Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      introdução

      1:04

    • 2.

      Usando os arquivos de exercícios

      0:44

    • 3.

      O que é Figma?

      1:29

    • 4.

      Inscreva-se no Figma

      1:20

    • 5.

      Configurando fontes no Figma

      1:49

    • 6.

      Entendendo o espaço de trabalho

      2:03

    • 7.

      Configurando o primeiro arquivo no Figma

      1:10

    • 8.

      Trabalhando com quadros

      1:24

    • 9.

      Trabalhando com formas

      4:03

    • 10.

      Trabalhando com a ferramenta Caneta

      2:57

    • 11.

      Trabalhando com máscara

      3:58

    • 12.

      Trabalhando com texto e fontes

      2:58

    • 13.

      Trabalhando com componentes

      2:47

    • 14.

      Trabalhando com restrições

      1:54

    • 15.

      Versões

      2:05

    • 16.

      Entendendo e criando diretrizes para iOS

      2:22

    • 17.

      Visão geral do aplicativo

      0:28

    • 18.

      Tela de respingos de UI

      3:20

    • 19.

      Tela de login da UI

      6:12

    • 20.

      Tela de recuperação de conta

      1:08

    • 21.

      Redefinir a tela

      1:15

    • 22.

      Tela de inscrição

      2:12

    • 23.

      Tela inicial 1

      6:56

    • 24.

      Tela de perfil 1

      3:51

    • 25.

      Tela inicial 2

      0:52

    • 26.

      Tela da lista de produtos

      1:01

    • 27.

      Tela de detalhes do produto

      6:00

    • 28.

      Tela do carrinho

      4:55

    • 29.

      Tela de pagamento

      3:35

    • 30.

      Colocar a tela de pedidos

      4:09

    • 31.

      Tela de pesquisa

      2:45

    • 32.

      Tela do favorito

      2:17

    • 33.

      Tela de perfil 2

      3:37

    • 34.

      Editar a tela de perfil

      3:10

    • 35.

      Tela de meus pedidos

      2:56

    • 36.

      Tela de meus cartões

      1:30

    • 37.

      Adicione tela de cartão

      2:11

    • 38.

      Minha tela de endereço

      2:25

    • 39.

      Tela do suporte

      2:27

    • 40.

      Criação de protótipos

      10:30

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

536

Estudantes

--

Sobre este curso

Figma é uma das ferramentas de design mais incríveis e líderes da indústria usadas para UI/UX e prototipagem para aplicativos web e móveis.

Neste curso, a instrutora Shaher Yar vai ensinar você a usar o Figma e como criar um aplicativo Nike Shopping junto com aprender todos os novos recursos do Figma demonstrando um fluxo de trabalho completo de design de aplicativos. Ao usar os ativos e cores do arquivo de exercício, você poderá configurar o espaço de trabalho e começar criando mais de 15 telas do aplicativo Nike Shopping. Você poderá criar uma interface de usuário impressionante aplicando habilidades artísticas que vão melhorar a experiência do usuário do aplicativo.

No final, você vai aprender a prototipar seu aplicativo criando conexões entre quadros que vão dar vida ao seu aplicativo e depois você pode compartilhar seu protótipo com seus amigos, desenvolvedores, clientes e outras partes interessadas.

Ao final deste curso, você poderá criar designs eficientes de aplicativos para dispositivos móveis com o Figma.

Conheça seu professor

Teacher Profile Image

Shehar Yar

UI/Ux Designer

Professor

Hello, I'm Shehar.

Visualizar o perfil completo

Habilidades relacionadas

Adobe XD Design Design de UI/UX Prototipagem
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá. Neste curso, vamos construir um aplicativo do mundo real com protótipo em ajuste com recursos e estética projetada. Meu nome é Maria e sou designer de UI UX. Tenho mais de cinco anos de experiência na indústria de design. Através deste curso, eu vou orientá-lo sobre como criar um aplicativo de compras Nike na FISMA com o mais recente princípio de design e estética de design. pontuações são divididas em três seções, em duas sessões FISMA, UI, UX seção e seção Prototype. Na interseção, veremos o que é sigma e como usar suas características. Na seção UX UX, vamos começar a criar e estruturar, embora Nike app. E no final, vamos ligar todas as impressões digitais. Então parece que a sobreposição. E por último, mas não menos importante, vamos ver como compartilhar com outros membros da equipe são partes interessadas. Não tenho que te mostrar. Então, sem mais delongas, vamos começar. 2. Como usar os arquivos de exercício: Neste vídeo, vou mostrar como você pode começar com arquivos de exercícios. Os arquivos de exercícios para este curso estão incluídos nesta palestra. O arquivo de exercícios que enviei contém um sigma s, é um arquivo. Ele contém todos os S que é usado neste curso. Por favor, baixe este arquivo para que possamos continuar nossa jornada criando um aplicativo do mundo real em sigma. Este arquivo de exercício não contém um arquivo de figura. Então, para isso, apenas me acompanhe através desta cláusula. Então vocês sabem como criar seu próprio projeto Fichman. Isso é tudo por este vídeo. Vejo vocês no próximo vídeo. 3. O que é Figma?: Sigma é um aplicativo de design de interface do usuário e UX baseado em navegador e, principalmente, ferramenta de prototipagem baseada na web com recursos off-line adicionais habilitados por aplicativos de desktop para Mac OS e Windows é atualmente a principal ferramenta de design de interface no indústria. Aqui está a pergunta. É que existem muitas outras ferramentas como Adobe XD, esboço, Marvel, e muitos outros do que por que estamos usando sigma, a resposta é que as outras licenças de software são caros em comparação com sigma. Porque sigma está disponível gratuitamente, você pode simplesmente ir para o site de demonstração, inscrever-se, e agora você pode facilmente usar sigma em qualquer lugar e a qualquer momento, pois é um aplicativo baseado na web, embora seja a versão desktop também está disponível, mas depende da escolha. E também sigma é muito fácil de aprender. E se você tentar, você pode apenas aprender Friedman dentro de hoje e dentro de sete a dez dias, você pode dominar a FISMA. A melhor coisa sobre FDMA é supor que você está viajando para algum outro país e você não tem seu laptop, viajando para algum outro país e você não tem seu laptop, você pode facilmente acessar seus arquivos entrando no portal web através de algum outro laptop e acessar todos os seus arquivos facilmente. Então agora acho que vocês têm algum conhecimento sobre FDMA. Vejo vocês no próximo vídeo, vamos ver como criar uma conta online sigma. 4. Como fazer o cadastro no Figma: Para se inscrever no fema, basta acessar www.sigma.com e clicar em Cadastre-se. Aqui. Basta digitar seu e-mail e senha e clicar em criar conta. Você também pode se inscrever com suas credenciais do Google. Depois de clicar no cadastro, ele está perguntando sobre meu nome e meu trabalho. Introduza alguns dados. E se você quiser se juntar à lista de e-mails de sigma, você pode marcar esta caixa de seleção por agora, eu estou vivendo. E depois disso, clique em Criar Conta. Agora o nosso libertado minha conta foi criada. É hora de editar a equipe do meu Fichman. Vou escrever para você, membro da equipe de eixos. Uma equipe tem muitos membros. Você pode colaborar facilmente com eles. Discutiremos isso mais tarde. Agora aperte Próximo. Você também pode fazê-lo mais tarde. Neste momento, há dois planos para Pittman. Escolha o plano, é SU 2. Mas se você é um iniciante, sugiro que você escolha o plano de inicialização. E agora uma conta fema é configurada com sucesso. Isso é tudo por este vídeo. Vejo vocês no próximo vídeo onde vamos entender o espaço de trabalho da FISMA. 5. Como configurar fontes no figma: Neste vídeo, vamos ativar telefones locais em nosso MOM louco. Caso contrário, se você quiser trabalhar com fontes, você não terá uma grande seleção. E também, se você importar coisas como arquivos de esboço, esse texto pode não funcionar. Pode não parecer certo em sigma. Quando você está em sigma.com, no site, você já está logado. Venha para o canto superior esquerdo aqui com um menu é, e venha para as configurações da conta. Aqui você verá muitas coisas que podemos fazer, incluindo coisas como trabalhar com a API, que você pode expandir. Fisma, faça todos os tipos de coisas, aplicativos conectados, etc. Aqui em baixo, você vai ver que nós temos tribunais locais atualmente não estão habilitados por padrão. Clique em Baixar instalador para habilitar um formulário local. Vai baixar isso dependendo do seu sistema operacional, que não pode baixar um arquivo pequeno. E o que você vai fazer é basicamente abrir isso e instalá-lo. Eu posso ver que eu tenho o pacote bem ali. Só vou clicar nisso. Você tem que clicar em continuar, ir e instalar isso. Certifique-se de que está instalando. Não preciso mais do instalador. E você verá agora que as fontes locais estão habilitadas. Tenho tantas forças disponíveis em Pima. Caso contrário, você estará trabalhando com menos telefones. Há algo que quero ter certeza de que fizemos antes de entrarmos aqui. Agora você pode voltar aos recentes e ver todos os arquivos. O próximo passo é entendermos o espaço de trabalho FISMA. Vejo vocês no próximo vídeo. 6. Entendendo o espaço de trabalho: Bem-vindo de volta. Neste vídeo, vamos entender o espaço de trabalho ou Fichman. Esta é a nossa página inicial. Por padrão, pigmento nos dá três projetos. Você pode mantê-lo são excluídos. É totalmente baseado na sua escolha. Em seguida, no canto superior direito, temos duas opções. Esta opção de importação é usado para importar diferentes projetos fema diretamente para caber ma. Você também pode importar seus arquivos de esboço clicando neste item de importação. E à direita temos uma vantagem. Eu posso apenas clicar neste ícone para criar um novo arquivo. Aqui, no canto superior esquerdo, temos uma barra de ferramentas. Ele contém ferramentas como Retângulo, Elipse, ferramenta Caneta. Você pode desenhar formas diferentes usando essas ferramentas. Por baixo está a aba em camadas. Aqui você pode ver todas as suas camadas. próximo passo é o passo do ativo. Ei, você pode armazenar todos os seus ativos que você está usando em todo o projeto. E mais tarde, sombra com os membros da sua equipe. No centro, temos nossa tela onde podemos criar e trabalhar com nossas saídas. Lembre-se, nossos aeroportos agora são chamados de quadros em Fichman. Então, nas próximas lições, sempre que eu digo quadro, isso significa que eu estou falando sobre citações de arte depois disso. Mas do lado direito, temos um painel Propriedades. Você pode alterar as propriedades de diferentes elementos. Atualmente, não está mostrando nada. Mas quando eu desenho na tela, você vê todas as propriedades agora estão visíveis. Vamos discutir tudo isso nos próximos vídeos. Em seguida, no canto superior direito, temos um botão Compartilhar para compartilhar este projeto com outros membros da equipe, parte com clientes. Temos também um botão de reprodução para visualizar ou um design e um botão de zoom para ampliar ou diminuir o zoom do quadro. E isso nos leva ao final deste vídeo. Vejo vocês no próximo vídeo. Vamos ver como configurar nosso primeiro arquivo no FISMA. 7. Como configurar o primeiro arquivo no figma: Bem-vinda de volta. Neste vídeo, vamos configurar nosso primeiro arquivo em pragma para configurar um arquivo. Em primeiro lugar, fiz um novo arquivo. E aqui no topo central renomeie o primeiro projeto para seu projeto de equipe. Depois disso, renomeie esse arquivo de direito para o aplicativo Nike clicando nele. Os projetos Sigma são criados em quadros. Então, para criar um quadro, basta pressionar a tecla f do teclado ou clicar aqui no canto superior esquerdo. Depois disso, aqui no lado direito, temos muitas opções para quadros. podemos criar aplicativos diferentes para telefones, Tambémpodemos criar aplicativos diferentes para telefones, tablets, web e publicações de mídia social. Mas para este curso, vamos trabalhar com aplicativos iOS. Então, precisamos escolher o iPhone 11 pro max frame sugere clique nele. E agora um quadro é criado e testar como você configura um arquivo no Fichman. Vejo você no próximo vídeo. Vamos ver como trabalhar com páginas. 8. Trabalhando com quadros: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com quadros são páginas. Basicamente, quadros são telas para seu aplicativo ou site. Você pode adicionar quantos quadros forem necessários em um projeto. Então, só depois da tecla F. E aqui estão muitas opções para seus amigos. Sugira que o iPhone 11 pro max frame em outro quadro. E agora, se vemos em nosso painel Camadas, as camadas dos quadros são empilhadas. Se passarmos o mouse sobre essas camadas, vemos que temos duas opções. Podemos ficar trancados nele ou endireitar a moldura. Ao bloquear o quadro significa que você não pode movê-lo. Agora, para renomear um quadro, basta clicar duas vezes nas camadas e renomeá-lo para o que quiser. Ao nomear o quadro, é fácil para nós encontrar a saída específica. Agora, se eu clicar no quadro, veremos todas as propriedades desse quadro. A partir do topo, temos opções de alinhamento. Então temos a opção de coordenadas x e y. Aqui estão as opções de rotação e raio de canto. Em seguida, temos grade de layout, preenchimento e opções de efeito também. Descobriremos todas essas opções à medida que avançarmos neste curso. Vejo vocês no próximo vídeo. Vamos trabalhar com formas diferentes em sigma. 9. Como trabalhar com formas: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com diferentes formas fornecidas em sigma. Você pode usar formas para criar diferentes elementos de um design. Então, em primeiro lugar, desenhe retângulo sobre este primeiro quadro. Você pode alterar o raio da borda desse retângulo adicionando um valor na guia do raio do canto. Você também pode alterar o canto de sites independentes clicando aqui e inserindo algum valor aqui. Vamos desfazer isso pressionando o controle C. E agora na janela Propriedades, você pode alterar sua cor aqui e muitas opções de cores. Neste menu suspenso, você pode adicionar cor linear, cor gradiente, cores angulares. Mas, por enquanto, vamos manter cores sólidas. Aqui você pode adicionar uma cor hexadecimal copiando Xcode. Ou se você quiser trabalhar com cor RGB, você pode escolher isso também clicando aqui. Este 100% é a opacidade da cor. Se eu mudar isso, você pode ver que a opacidade do nosso retângulo também muda. E aqui na parte inferior, temos nossas cores locais que usamos neste arquivo. Agora, se fecharmos isso, podemos adicionar mais preenchido a este retângulo clicando neste ícone de adição. Depois disso, vamos passar para o acidente vascular cerebral. Aqui você pode adicionar traçado ao retângulo. Você pode aumentar o tamanho do traçado e também alterar sua orientação para dentro, fora ou centro. Se clicarmos nesses três pontos, você pode mudar as maiúsculas, encadear o santuário na borda ou adicionar traços a essa borda também. Não apenas acendeu o traço clicando neste ícone. Depois disso, vamos trabalhar com elipses. Então, para isso, apenas desenhe uma elipse aqui. E se você não pressionar a tecla Shift, você não pode desenhar um círculo perfeito. Então, pressione a tecla Shift ou vesta art e shift keyed juntos para manter essa proporção desses lábios. Agora, se selecionarmos esta elipse, você verá este círculo branco. Você pode movê-lo para a esquerda para desenhar gráficos e pegar este ponto central e movê-lo para baixo para desenhar uma forma perfeita. Por gráficos. Depois disso, desenhe um polígono. E, e aqui neste polígono, você pode mudar o raio do canto deste polígono agarrando-o de cima e movendo-o em direção ao centro. E se você quiser aumentar ou diminuir seus cantos, você pode simplesmente pegá-lo a partir deste canto direito e movê-lo em direção ao topo para mudar seu canto. Você também pode fazer isso adicionando um valor aqui no painel de propriedades. A próxima é a estrela. Então, basta escolher e desenhar uma estrela neste quadro. Agora há três círculos brancos na estrela. Se você segurar esses círculos, você vai começar a conhecer primeiro o seu propósito. O primeiro é o raio do canto. O segundo é o rácio. E o terceiro é para aumentar a contagem na estrela. Vamos encher isso com um pouco de cor. E parece legal. E teste como você pode brincar com formas e ensinar coisas diferentes para o seu design. No próximo vídeo, veremos como a ferramenta de caneta é usada no Fichman. Vejo vocês no próximo vídeo. 10. Trabalhando com a ferramenta de caneta: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com a ferramenta caneta. A ferramenta de caneta é a ferramenta mais importante em gráficos. Usando a ferramenta caneta, podemos projetar gráficos, criar formas e ícones, e muitas outras coisas também. Então, em primeiro lugar, assim como esta ferramenta de caneta na parte superior são passados para cima picos do seu teclado. E aqui você vê que temos uma caneta como seno. Está se movendo livremente. Mas se você pressionar a tecla Shift, ela se moverá proporcionalmente. Agora, quando clicamos, ele cria um caminho. Em seguida, clique novamente. Grande apoio. E quando clicarmos no ponto de partida, pressione enter, ele se fechará e a nave está criando. Agora, clicando neste filme, você pode adicionar uma cor de preenchimento a esta forma. Ou você pode aumentar ou diminuir a borda clicando aqui. Vamos fazer nosso design de enumeração clicando com a ferramenta caneta. E aqui você vê, você pode desenhar até formas complexas com uma ferramenta de caneta. Agora, estes são flagships menos terra, como você pode desenhar curvas com a ferramenta caneta a partir de diante. Por favor, assista ao vídeo com cuidado porque esta é a ferramenta mais importante, não só sigma, mas também no Photoshop. Illustrator, XD também. É um pouco difícil ferramenta, prática unitária para dominar esta ferramenta. Então vamos começar curvas por logotipo tranquilo ou Nike. Então, em primeiro lugar, selecione a ferramenta Caneta e aqui, basta clicar novamente, clicar nela abaixo dela, e não solte o mouse. Clique com o botão esquerdo e mova o mouse para a direita para dar-lhe uma curva. E agora está curvando a parte. Mas daqui precisamos de um caminho reto. Então volte e clique neste círculo para escolher o caminho da curva. E a partir daqui, clique aqui e feche-se sem soltar o botão do mouse. E mova o mouse para cima para desenhar um toque Nike perfeito. Lembre-se, se você acidentalmente criar um caminho errado, não entre em pânico. Você ainda pode apenas no caminho, clicando sobre esses círculos brancos e obtendo as alças e movê-los, você quer que eles sejam. É muito simples e fácil. E depois de obter a forma, pressione enter para alterá-la para uma forma adequada a partir de um caminho. E agora você pode jogar com ele em uma cor removedores. Porter também lhe deu uma sombra. Então agora vocês têm algum conhecimento sobre a ferramenta Caneta. Por favor, pratique esta ferramenta tanto quanto você pode , porque ela irá ajudá-lo a projetar seus projetos complexos. Isso é tudo por este vídeo. Vejo você no próximo vídeo. Vamos ver o que está mascarando e como o usamos em nosso design. 11. Trabalhando com mascaramento: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com mascaramento. Fisma nos permite importar um monte de tipos de imagens em seu projeto de design. Podemos importar PNGs, JPEGs, SVG, dá, e muitos outros. Neste vídeo, vamos ver como importar imagens do seu PC para FISMA e como mascarar imagens com chips. Então, em primeiro lugar, para colocar uma imagem neste segundo quadro, venha aqui. E a partir daqui, escolha colocar imagem sob este menu suspenso retângulo. Você também pode pressionar o controle de tecla de atalho Shift e k. e agora um pop-up virá. Escolha a imagem desejada. Vou escolher esta imagem. E agora você vê que um cursor é transformado em um ícone de adição. Por isso, basta clicar onde pretende que a sua imagem seja colocada. Agora a nossa imagem está colocada. Vamos redimensionar essa imagem. Para redimensionar essa imagem, basta pressionar a tecla ALT e Shift para se usar do teclado e movê-la em direção ao centro para dimensioná-la para baixo. Agora coloque-o corretamente. Aqui. Olhe para o lado direito. Quando importamos uma imagem, podemos alterar seu modo de mesclagem assim como fizemos no Photoshop. E Sigma. A imagem é apenas uma barbatana. Você pode excluí-lo removendo seu derramamento. Você pode adicionar efeitos diferentes a esta imagem, como sombras de traçado. E se você quiser alterar as propriedades da imagem, basta clicar na imagem. E a partir daqui, você pode ajustar o contraste de exposição e você pode alterar seu ajuste nas propriedades também. E agora vamos adicionar algumas imagens. Mas antes disso, vamos clicar nesta grade de layout e adicionar duas colunas, poderia, e alterar sua margem para 16. Agora, vamos colocar alguns retângulos aqui e, em seguida, colocar imagens para esses retângulos. Então, primeiro, desenhe três a quatro retângulos aqui. Agarrando a ferramenta Retângulo. Alinhe-os corretamente. Agora vamos adicionar quatro imagens a esses retângulos. Então coletor, lugar, ferramenta de imagem ou pressione a tecla Control Shift do teclado. E a partir daqui, selecione para imagens. E agora você pode simplesmente clicar, clicar, clicar e clicar nesses retângulos para colocar as imagens automaticamente. E agora que as imagens são colocadas, mas são grandes para reduzi-las. Essa é a tecla ALT e clique duas vezes na imagem. Agora, pegue-o dos cantos, encolhe-o para baixo para colocá-lo corretamente. E agora vamos adicionar uma elipse aqui. E depois disso, coloque uma imagem aqui pressionando a ferramenta de imagem de lugar para cima. E agora esta imagem é colocada na frente desta elipse. É hora de colocar esta imagem nesta elipse. Por isso, basta clicar neste botão de massa no topo central. E agora vou mostrar que é colocado dentro dos lábios. Então é assim que você mascara imagens no shell. E se você quiser remover essa máscara, basta pressionar o botão do mouse mais uma vez para remover essa máscara. E isso nos leva ao final deste vídeo. Vejo vocês no próximo vídeo, vamos trabalhar com o texto e as fontes. 12. Trabalhando com texto e fontes: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com texto e fontes em sigma, você pode usar todas as fontes do Google. Mas em primeiro lugar, você deve habilitar fontes locais em sigma. Para habilitar fontes locais no FDMA, vá ajudar uma conta. E a partir daí, escolha conta e configuração. E agora role para baixo. E aqui, habilite formulários locais. Depois de habilitar os telefones locais, você terá acesso a quatro fontes mais, que estão disponíveis por padrão no Fichman. Então é hora de brincar com o texto. Em primeiro lugar, pegue uma ferramenta de texto e escreva algum texto aqui. Diga olá, como vai? E agora à direita, você tem todas as propriedades de texto. partir daqui, você pode alterar a fonte para diferentes telefones desde que eu escolher o meu debaixo dele, você pode alterar o peso da fonte e tamanho da fonte. Se você clicar nessa caixa de fonte, pressione a tecla Shift e a seta para cima no teclado. Você pode aumentar o tamanho da fonte com um íntimo de dez. E se você não pressionar a tecla Shift, a fonte aumentará com um incremento de um. Depois disso terá altura de linha e espaçamento de caracteres. Em seguida, temos espaçamento de parágrafos e diferentes opções de alinhamento que veremos à medida que avançamos neste curso. E aqui você vê esses três pontos. Se você clicar nele, você terá muitas outras opções de edição de texto. Vamos explorar isso quando criarmos o nosso aplicativo nike nos próximos vídeos, A dica mais importante que eu vou dar-lhe um teste relativo é que vamos supor que temos três camadas de textos aqui. Quando eu clicar neste texto à esquerda, você vê que ele está alinhado à direita. Então mude-o para alinhado à esquerda. Da mesma forma, encadeie o alinhamento do texto central ao centro e à direita ao lado da linha direita. Para que os testes parecem bons quando você colocá-lo em um botão que é colocado no centro, direita ou esquerda. A última coisa que vou dizer é sobre as vidas do painel Camadas na parte mais importante de cada design. Então, aqui no painel de camadas, sempre organize suas camadas. Assim, você pode facilmente encontrar suas camadas quando precisar delas. Suponha que se você selecionar duas ou mais de duas camadas e pressione controle G, Você pode agrupar essas camadas e renomeá-los o que quiser. Digamos que grupo de botões. E lembre-se, as camadas são uma parte importante do trabalho com designs da Web e de aplicativos, pois mantêm seu conteúdo balkanizado. E isso facilita as camadas finais e quem trabalha, e é assim que você trabalha com texto e fontes no FISMA. Vejo você no próximo vídeo. Vamos trabalhar com componentes. 13. Trabalhando com componentes: Bem-vindo de volta. Neste vídeo, vamos ver o que nossos componentes e como trabalhar com componentes. Os elementos que são utilizáveis no sistema de design são chamados de componentes. Na maioria dos programas, também é chamado de símbolos. Mas na FISMA, esses elementos reutilizáveis são chamados de componentes. Então, neste vídeo, vamos explorar como criar um componente de edição. Em primeiro lugar, vamos fazer uma barra de status na parte superior e um botão na parte inferior do segundo quadro. Depois disso, selecione estas barra de status superior e, a partir daqui, clique neste Criar componente. Você também pode pressionar a tecla de atalho alt e K. E agora você vê que é o nosso componente principal ou pai. Lembre-se, existem dois tipos de componentes. Mestre, nosso pai e um componente filho. Atualmente temos componente mestre para criar seu componente filho, copiar e colado no terceiro quadro. E aqui você vê esse componente vazio, que significa que ele é um componente filho para cima primeiro barra de status. Agora a melhor coisa aqui é que se eu mudar as propriedades do componente mestre, digamos cor para vermelho. Essa mudança também refletirá sobre seu filho. Enquanto que se eu mudar a cor da criança, isso não afetará seu pai. E se você tiver um grande número de componentes filhos e quiser saber sobre seu componente pai. Para isso, basta clicar com o botão direito do mouse nessa criança e, a partir daqui , basta selecionar, ir para o componente principal. Então isso irá levá-lo diretamente para o pai daquela criança. É tão simples assim. E se você quiser que as alterações no pai não reflitam em seu filho, você pode desanexar a instância, o que significa que isso não será atualizado se atualizarmos a instância mestre. Então, para fazer isso, basta clicar com o botão direito do mouse na instância filho e desanexar instância. E agora todas as alterações do componente mater não refletirão na criança. Distância. Componentes em sigma podem ser muito poderosos só porque permitem que você reutilize o conteúdo. Então eu vou sugerir que se você tem coisas que você está indo para reutilizar uma e outra vez, criar componentes a partir delas. A próxima coisa que vamos dar uma olhada é que vamos olhar para algo chamado restrições. Vejo vocês no próximo vídeo. 14. Trabalhando com restrições: Bem-vinda de volta. Neste vídeo, vamos ver como trabalhar com restrições em 1000 de dispositivos no mercado. Cada dispositivo tem sua própria resolução. Projetar para todas essas telas seria uma tarefa agitada. Em vez disso, queremos que nosso design seja flexível e responsivo para que eles possam se adaptar a novas telas. Vamos testá-lo. Em primeiro lugar, adicione uma elipse de 200 por 200 e coloque-a no centro. Agora aqui no painel de propriedades, temos diferentes restrições opção no eixo x. Podemos adicionar restrições à esquerda, direita , esquerda e direita, centro e escala. E no eixo y podemos adicionar restrições de escala superior, inferior e central. Atualmente, nossas reticências são definidas como padrão. Se verificarmos isto, vamos acabar com este quadro. Aqui você vê como nós escalamos o grito para cima ou elipse vai esticar com ele. Considerando que se esticarmos este quadro para a direita ou elipse não se esticará com ele. Se mudarmos a restrição esquerda também, certo? Você vê, ele se estende para a direita quando começamos o quadro e ele não vai ficar para a esquerda desta vez. E se verificarmos essa posição fixa ao rolar, ela consertará sua posição se estudamos ou não. E é assim que é fácil aplicar restrições. Esse recurso é muito útil na criação de sites responsivos, aplicativos e outros designs. Então estamos trabalhando com restrições é ótimo. Se você tem que colocar conteúdo em telas de tamanhos diferentes ou escala são exibidos, por exemplo. E isso nos leva ao final deste vídeo. Vejo vocês no próximo vídeo, vamos ver o que é Virgin e Sigma apps. 15. Versionamento: Bem-vinda de volta. Neste vídeo vamos ver o que é persa e história de variantes em Fichman. Sigma oferece muito descontrolado dentro de cada um dos arquivos que você cria. E esta é uma boa maneira de ser capaz de visualizar a versão salva anterior, restaurar uma versão anterior, comentar sobre as coisas. Então neste vídeo vamos falar sobre controle de versão para ver o histórico de versões, certificar-se de que nada está selecionado. E você pode ver o nome do arquivo aqui em cima, clique na seta para a direita, e você verá mostrar o histórico de versões. Agora à direita, você vê o histórico de versões. A melhor coisa sobre isso é que à medida que você faz movimentos ou mudanças ou coisas assim, ele vai salvá-lo automaticamente para você. Se você olhar para trás aqui, você vai ver todos os diferentes momentos em que você fez coisas. E se você clicar em um destes anteriores, você vai ver que vai mostrar-lhe o que vai parecer aqui. Agora, isso está apenas nos dando uma prévia. Se realmente queremos fazer desta a versão que conversão. Se você chegar à elipse aqui, você pode ver a restauração desta versão. Você também pode duplicá-lo ou copiá-lo link ou dispersão nomeada. Digamos que você está testando uma nova função em um design de aplicativo e você nomeou este brilhante dizer, testando menu lateral. Adicione uma descrição se quiser. E vamos bater em Salvar. Isso permitirá que outros membros da equipe vejam que a Sharia está testando o menu do site. Agora você pode adicioná-lo esta informação de versão. Digamos que o menu de hambúrguer está pronto. E agora você completa esta informação de versão também. Então, é apenas uma maneira de nós meio que se quiséssemos colaborar com as pessoas e dizer-lhes o que estamos fazendo e o que estamos olhando. E isso nos leva ao final deste vídeo. Vejo você no próximo vídeo, vamos ver quais são as nossas diretrizes para iOS e como usá-las em nosso próximo projeto de aplicativo Nike. 16. Entendendo e criando diretrizes para iOS: Bem-vindo de volta. Neste vídeo, vamos ver o que são diretrizes e como usá-las em nosso próximo projeto de aplicativo Nike. As diretrizes são um conjunto de recomendações sobre como aplicar princípios de design para proporcionar uma experiência positiva ao usuário. Diretrizes de uso dos designers para criar designs atraentes e atender e exceder as necessidades do usuário. Este curso se concentra principalmente nas diretrizes do iOS. Portanto, não estamos cobrindo o material ou as diretrizes do Android neste curso. Então vamos começar este vídeo criando um sistema de orientação de design para o nosso próximo projeto Nike Air. Para criar uma diretriz de design. Em primeiro lugar, crie um quadro. Agora vamos adicionar réguas neste quadro. Então, para adicionar réguas, importador, tecla de atalho, Shift R para habilitar réguas. E agora pegue duas réguas da esquerda e mais uma para a direita e outra para a esquerda com um espaçamento igual de 16 pixels. Para adicionar réguas precisas, desenhe um retângulo aqui, altere a cor para preto para que fique visível. E agora mude sua largura para 16 pixels e alinhe as réguas com esse retângulo. Da mesma forma, mova esse retângulo no centro superior e altere sua altura para 44 pixels. E agora mais outro governante aqui. Mova este retângulo para baixo e adicione outra régua aqui. Esta primeira parte é para a barra de status do iPhone. E a segunda parte é para o título e botão Voltar. Agora mova esta cidade retangular e adicione duas réguas aqui, uma para o ícone do indicador inicial e outra para o menu com abas. Abençoe, com o mesmo espaçamento no fundo. E agora nossas diretrizes para iOS foram criadas com sucesso. Eu forneci este arquivo com este curso, tipo de baixá-lo e usá-lo. Ele também inclui a fonte, imagens, ícones e cores que estamos usando em nosso projeto. Então, por favor, baixe este arquivo e nos próximos vídeos, vamos começar a obter o aplicativo Nike em Fichman para que vocês saibam como obter um acúmulo real no FISMA. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 17. Visão geral de aplicativos: Bem-vindos minutos extras. A partir deste vídeo, começaremos a criar nosso aplicativo do mundo real em FISMA. O aplicativo que vamos construir é aplicativo de carrinho de compras Nike, onde você pode comprar diferentes tipos de sapatos. Além disso, vamos vincular as telas para criar interação entre as telas do aplicativo Nike. Então parece um aplicativo do mundo real. Então, no próximo vídeo, vamos criar nossa tela inicial do aplicativo. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 18. Tela de Splash UI: Bem-vindos de volta a isto. Neste vídeo, vamos criar nossa tela inicial do aplicativo. Os Arquivos de Exercício que forneci contém toda a fonte e tipografia. Então, em primeiro lugar, vamos colocar isso em nosso arquivo demo. Selecione a cor um por um. E aqui do lado direito, clique sobre estes pontos coloridos Phil. E a partir daqui, clique neste ícone de adição para criar nossos estilos de cores e dar-lhe um nome também. Digamos haxixe triplo para triplo para. Agora clique neste botão Criar estilo. Da mesma forma, novamente, pressione o botão de adição e adicione as cores restantes a esta lista. Agora, nossas cores são colocadas nos estilos locais. Vamos adicionar fonte ao estilo local também. Da mesma forma, faça o mesmo que fizemos com as cores. Desta vez, no nome da fonte com seu tamanho, nome S. Copie o nome da fonte. Clique nessas portas, clique no ícone de mais, e agora cole esse texto para que saibamos que é uma manchete de 49 pontos. O mesmo processo com todas as outras fontes também. Daqui, estou acelerando o vídeo. E agora, se eu selecionar este texto aqui à direita, veremos todos os nossos estilos locais que vamos usar no app Nike. E agora vamos começar a criar a tela inicial para o nosso aplicativo. Em primeiro lugar, quadro popular que é fornecido com este curso Exercício Arquivos. E agora vamos mudar isso para tela inicial. Primeiro de tudo, leve a barra de título e o menu tocado. Depois disso, clique duas vezes no quadro no painel Propriedades e renomeie-o para uma tela inicial. É uma técnica muito boa para renomear seu quadro para que você possa trabalhar com ele facilmente. Agora aqui, selecione a ferramenta Retângulo e desenhe retângulo sobre este quadro e altere sua cor para cor escura. E aqui o painel Propriedades, mova esse retângulo para baixo e altere seu nome para Packer. Como isso mudou a cor do indicador e da Barra de Status para branco? Então eles parecem visíveis. Mais quente que importam o logotipo Nike dos arquivos de exercícios e colá-lo aqui e alinhá-lo no centro horizontal e verticalmente. Agora, bem-aventurança criada, há esperança para este vídeo. Vejo você no próximo vídeo. 19. Tela de login de UI: Excelência bem-vinda. Neste vídeo, vamos criar uma tela de login. Em primeiro lugar, copiar faz configuração prim e movê-lo para a direita pressionando a tecla all. Agora basta copiar o logotipo da Nike e movê-lo para cá. Encolher para cerca de 78 por 28. E agora a barra de título Cellectis e este local pressionando a tecla Shift e alinhar seu centro horizontal e verticalmente. Agora basta excluir este título par. E depois disso, faça uma elipse de cerca de 220 por 220. Fora disso a arte e movê-lo juntos e fazer uma cópia desta elipse e encolhê-lo para baixo para cerca de 166 por 1-6, 5-6. Agora deixe os dois e alinhe-os no centro. E basta mudar a cor de ambas as elipses para esta terceira cor da nossa lista. Depois disso, altere a opacidade da elipse externa para 20%. Então parece bom. E também agrupá-los, selecionando-os com a tecla Shift e pressione o controle G. Agora basta colocá-los menos 90 na saída e menos 80 no eixo y. E depois disso, no painel Propriedades renomeou esse grupo para Grupo elipse e mova-o para baixo no painel Propriedades. Agora apenas pressionado em Tiki e login seco e mudar seu telefone para saber Nieto e seu tamanho para 40 semi placa. E aqui mude sua largura, 23 AD2 e sua altura para 109, e coloque-o no centro. Depois disso, alinhe o texto ao centro também. E agora mova-o para cima com uma margem superior de 25 pixels. Depois disso, edite a camada de texto, à direita. Introduza o seu e-mail e palavra-passe. Altera a fonte, o tour, a fonte do aplicativo e seu tamanho para 16, semi negrito e coloque-o com uma margem superior de 0. Agora altere sua largura para 382 e sua altura h2, 44, e sua cor para terceira curva forma de biblioteca. Depois disso, vamos adicionar campos de login para economizar tempo. Copie isso dos arquivos de exercícios e cole-o aqui. E basta organizar esses campos corretamente e provocar a fonte para saber nato e tamanho da fonte para 16 e agrupar esses campos também. Depois disso mudou a cor deste texto de senha esquecer, cor tema fluido. Agora é hora de adicionar um botão de entrada. Então desenhe um retângulo de cerca de 350 por 44, mude seu raio de fronteira para 20. Alinhe seu centro horizontalmente e preencha-o com uma cor escura para nossa biblioteca. Agora pressione que Tiki e escreva, faça login neste fardo e mude seu telefone para 16 extra entediado. Depois disso, altere a cor do texto para cor branca. Agora exibe este botão com uma margem superior de 50 pixels. Depois disso, pressione a área de texto Tiki e escuro. E aqui, certo, não tenho uma conta cadastrada. Alterada a fonte deste primeiro texto para 16, semi negrito. E este texto de inscrição2, 16, extra negrito. E também mudar sua cor e dar-lhe um subjacente, NÃO apenas uma linha, todo este texto centralizar verticalmente e colocá-lo com uma margem superior de 20 pixels. Agora, faça uma cópia deste texto, mova-o 30 pixels para baixo e renomeie-o para largura de entrada. Depois desse ponto linhas iguais de 116 pixels e coloque uma linha à esquerda e uma à direita com um espaçamento de 16 pixels dos sites. E agora selecione essas linhas e este texto e alinhe-os no centro verticalmente. E também altere a cor do traçado para esta forma de cor C6 de uma lista. E aqui e seus itens de mídia social, ícones de mídia social cobia dos arquivos de exercícios e colados aqui. Depois disso, coloque-os com uma margem superior de 30 pixels. Por último, mova este texto para baixo e substitua-o por ignorar. Agora texto, alinhe centro e e muda de cor, cor de luz azul. E renomeie esse quadro para tela de login. E isso nos leva ao final deste vídeo. Vejo você no próximo vídeo. 20. Tela de recuperação de conta: Bem-vindos minutos extras. Neste vídeo, vamos criar uma tela de recuperação de conta. Em primeiro lugar, copie o quadro anterior e mova-o para a direita pressionando todos os Qis. E depois disso, renomeie esse quadro para a tela de recuperação da conta. Depois disso, mude o nome deste início de sessão para a recuperação da conta. E este segundo X2 I reset link será enviado em seu e-mail. Depois disso, exclua este campo de e-mail e este texto de senha dobrado, e agora acabou de renomear este surdo para inserir seu e-mail. Depois disso, vamos descer. E aqui, apenas lidere tudo isso, exceto com este botão. E por último, renomeie este botão para enviar. E agora a nossa tela está completa. Vejo você no próximo vídeo. 21. Redefinição de tela: Bem-vindos alunos de volta. Neste vídeo, vamos criar tela de reinicialização. Em primeiro lugar, copie a tela de login e mova-a para a direita pressionando a tecla ALT e renomeie-a para redefinir a tela. Depois disso, mude o nome deste início de sessão para repor e este segundo texto para introduzir a sua nova palavra-passe. E agora renomeado este campo de e-mail para inserir nova senha e senha Tx2 e confirmar senha. Agora só colocou estes senha esqueceu e tudo isso abaixo deste botão passado deixando tudo isso e apertando a tecla delete do seu teclado. Por fim, renomeie este texto de botão para redefinir. Alinhe seu centro corretamente. E agora a nossa tela está completa. Vejo você no próximo vídeo. 22. Tela de inscrição: Bem-vindos aos expoentes. Neste vídeo, vamos ter uma tela de inscrição. Em primeiro lugar, copie a tela anterior e mova-a para a direita pressionando a tecla ALT e renomeie-a para a tela de inscrição. Depois disso, renomeie esta redefinição para inscrição. E este segundo texto para primeiro criar sua conta. Agora, vamos adicionar mais dois campos aqui. Então, mova este botão para cá. Basta mover este segundo campo para baixo passando a tecla ALT e shift juntas e fazer duas cópias dele. Depois disso, renomeie este primeiro campo para fullname, segundo campo para email. Terceiro campo para senha. Não mude o quarto. Agora vamos adicionar um ícone com esses campos de senha. Então, basta pegar o ícone dos arquivos de exercícios e empurrá-lo aqui. E agora voando-os corretamente. Depois disso, copie esta linha de texto dos logins e do paciente aqui, mova-a sob este botão e altere o texto para já ter uma conta. Login. Por último, basta alterar esse texto e o espaçamento dos botões para 20 pixels. E mova esses dois para cima. E mova esses dois para cima com uma margem superior de 50 pixels. E agora a nossa tela está completa. Vejo você no próximo vídeo. 23. Tela em casa 1 1: Bem-vinda de volta. Neste vídeo, vamos criar uma tela inicial. Esta é a tela inicial antes de um usuário entrar no aplicativo. Então, em primeiro lugar, copie a tela anterior e mova-a para a direita pressionando a tecla ALT e, em seguida, renomeie-a para tela inicial um. Depois disso, basta excluir todos esses, exceto este logotipo e barra superior. E agora basta pressionar que Tiki e escrever categorias. É 0.222 e coloque-o com uma margem superior de 20 pixels. Agora, apenas deixe essa ferramenta em particular e desenhe um retângulo de cerca de 85 por 100. Depois disso, desenhe uma elipse de cerca de 66 por 66. Alinhe-os no centro vertical e horizontalmente. Agora faça três cópias disso e coloque-as com um espaçamento igual entre elas. Agora incomoda Tiki e Snickers direito. Tin é telefone para 12, semi-negrito. E coloque-o dentro deste primeiro retângulo com uma margem superior de dez pixels. Em seguida, faça quatro cópias dele também. Depois disso, é hora de adicionar imagens a essas elipses. Selecione estas quatro elipses. E a partir desta Barra de Ferramentas, escolha a imagem local e, a partir dos arquivos de exercícios, escolha as imagens desejadas. E agora aqui, clique neste círculo para colocar sua imagem de desejo nesse círculo. Para encaixar esta imagem nestes lábios. Pressione para cima e clique duas vezes nessa imagem para entrar nessa imagem. E daqui, corretamente. Depois disso, selecione estas quatro elipses e dê-lhes um toque de cor clara. Mude seu tamanho para dois. E aqui dez nomes também. Agora, altere essa primeira cor de elipse e texto para uma cor de tema. Portanto, parece proeminente e o usuário sabe que esta categoria está selecionada no momento. E agora basta deixar tudo isso e colocá-los com uma margem superior de 30 pixels. Depois disso, oculte esses retângulos clicando no ícone no painel Propriedades. Agora vamos adicionar produtos aqui. Então, primeiro, mova isso acima do texto para baixo. A margem superior de 30 pixels e renomeie para calçado drenante. Depois disso, desenhe um retângulo de cerca de 181, mas 211, altere seu raio de borda para 20. Desenhe outro retângulo de cerca de 139 por 107, coloque-o com uma margem de 15 pixels e altere seu raio de borda também. Depois disso, copie, o ícone do coração dos arquivos de exercícios. Torná-lo componente aparente clicando neste botão componente e fazer uma cópia dele e colocá-lo aqui. Depois disso, nerd aliado às mudanças de nome do produto, telefone para 16 Board. Abençoe, com uma margem esquerda de dez e uma margem superior de cinco pixels. Depois disso, faça duas cópias deste texto. Segure-o e escreva o segundo nome da categoria dx2. E o terceiro texto ao preço. Também mudou o segundo telefone x para ficar em negrito, e mudar esta primeira cor retangular para uma cor clara com 30% de opacidade da nossa lista. Depois disso, vamos adicionar um botão de carrinho. Então desenhe um retângulo de cerca de 41 por 41. É um raio de fronteira para cinco de três lados, mas 20 da parte inferior direita. Coloque-o corretamente. E vai acabar. Tim Keller. Também adicionar mais ícone sobre este botão. Copie o ícone das pilhas de exercícios e coloque-o sobre. Isso o colocou adequadamente estruturado israelense, fazer três cópias dele e colocá-lo nesta moldura corretamente. Aqui no fundo. Vamos adicionar o nosso menu de dez. Copie isso dos arquivos de exercícios e cole-o aqui. Por fim, vamos adicionar imagens, ir retângulos, e encadeados preços e nomes dos artigos. Então este é um processo demorado. Então, estou acelerando o processo aqui. E agora a nossa tela está completa. Decimal para este vídeo. Vejo você no próximo vídeo. 24. Tela de perfil 1 1: Deixe-os minutos extras. Neste vídeo, vamos criar uma tela de perfil, uma. Esta é a tela de perfil antes de um usuário fazer login ou se inscrever no aplicativo. Então, em primeiro lugar, copie a tela anterior e mova-a para a direita pressionando a tecla ALT e renomeie-a para a tela de perfil. Um. Depois disso, basta liderar tudo isso, exceto esta barra superior e essas guias. E agora basta desenhar retângulo de cerca de 404 por 100 para mudar sua cor para o quarto enchimento com 20% de opacidade e mudar seu raio de borda. Cantos inferior esquerdo e direito para 40. Depois do Senado atrás desta barra de cima no painel de camadas. Depois disso, pressione que Tiki e clique direito plug-in, crie conta, mude seu telefone para 18 e coloque-o com uma margem inferior de 25. Agora fez duas cópias dele, moveu-as para baixo. Tinder telefone para 16, regular e renomear os dois primeiros, minhas ordens. E o segundo Centro de Ajuda X2. E agora vamos adicionar ícones aqui. Então pegue os itens dos arquivos de exercícios. Ou talvez você possa adicionar este apartamento. Eu posso plug-in em seus ícones freqüentes e importar a partir daí. Depois de importar os ícones, é hora de colocá-los corretamente. Então, basta pegar um retângulo de cerca de 33 por 29, fazer uma cópia dele e movê-lo para baixo. Agora coloque os itens sobre esses retângulos. Imprima os ícones na frente e alinhe-os corretamente. Agora agrupe esses ícones com esses retângulos e alinhe esse texto com esses ícones corretamente. E altere o espaçamento interno entre texto e retângulos para 20 e o espaçamento horizontal para 40 e menos pressionando para 24. Por fim, faça uma cópia do texto acima, Moby para baixo, renomeá-lo para termos e condições. E esses retângulos clicando neste ícone no painel Propriedades. E agora altere a cor deste item de perfil de guia inferior para uma cor de tema para que um usuário saiba que o controle está no ícone Perfil. E agora a nossa tela está completa. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 25. Tela em casa 2: Bem-vindos alunos de volta. Neste vídeo, vamos criar uma tela inicial também. Esta é a tela depois que o usuário faz login no aplicativo. Então, em primeiro lugar, copie a tela número quatro e mova-a para a direita pressionando a tecla ALT. E agora renomeie para tela inicial. Para. Depois disso, basta adicionar um ícone de carrinho, copiá-lo dos arquivos de exercícios e colá-lo aqui, alinhá-lo corretamente. E agora aqui, mude essas duas cores de ícone feroz para uma cor de tema. E esse é o nosso usuário. Adicione esses itens à sua lista de favoritos e nossa pele é concluída. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 26. Tela de lista de produtos: Bem-vinda de volta. Neste vídeo, vamos criar uma tela de lista de produtos. Então, em primeiro lugar, copie a tela anterior e mova-a para a direita pressionando a tecla Alt, ganhe-o na tela da lista de produtos. Depois disso, exclua esta seção de categoria e estas etapas. E agora basta mover o restante para cima com uma margem superior de 20 pixels. Não apenas renomeou este tênis de categoria dois. E aqui, basta preencher este espaço vazio com estes artigos acima. Por último, basta adicionar uma seta para trás aqui. Então basta copiar isso dos arquivos de exercícios e colá-lo aqui e colocá-lo corretamente. E agora as telas completadas. Há esperança para este vídeo. Vejo você no próximo vídeo. 27. Tela de detalhes do produto: Bem-vindo extra S. Neste vídeo, vamos criar uma tela de detalhes do produto. Então, primeiro copie a tela anterior e mova para a direita pressionando a tecla ALT e renomeie-a para a tela de detalhes do produto. Depois disso, exclua esta seção Snickers e preencha o fundo com a quarta cor de uma lista com 20% de opacidade. Depois disso, em retângulos sobre este quadro. Senado atrás do topo e preenchê-lo com cor radial branca. Depois disso, mova-o dessas alças e coloque-o aqui corretamente. Não apenas importar a imagem do sapato aqui. Copie isso dos arquivos de exercícios e coloque-o aqui corretamente com uma margem superior de 20 pixels. Não apenas desenhar para elipses de 15 por 15. Abençoe-os com espaçamento de 15 pixels e com uma margem superior de 20 pixels. E agrupá-los e alinhá-los ao centro corretamente. Não apenas removeu um preenchimento dessas três elipses e dar-lhes a mesma cor do traçado. Depois disso, vamos desenhar um retângulo em torno de 414 por um 5.3.2, mudar sua cor para branco e seu raio de canto superior para 40. E coloque-o aqui com uma margem superior de 30 pixels. Agora, vamos adicionar alguns detalhes sobre o produto aqui. Então, para a dívida, em primeiro lugar , escrever tamanho, fazer 13 cópias deste texto. E agora encadear o primeiro texto para 18. Para. Agora, eu vou mudar essas camadas de texto. É um processo demorado, nadou acelerando o processo aqui. Agora, eu mudei essas camadas de texto. Deixe-me dizer que não estamos usando cor preta pura. Então, basta substituir a cor preta pelo nosso takeaway da nossa lista. E este parágrafo texto para esta terceira curva da nossa lista. E agora vamos organizar tudo isso. Então parece bom. Em primeiro lugar, desenhe retângulos em torno de 55 por 25. Altere o raio da borda para cinco e coloque-os atrás dessas camadas de texto. Depois disso, alinhe essas camadas de texto com esses retângulos. Agora altere a segunda cor do retângulo para uma cor do tema e sua cor do texto para branco. Depois disso, alinhe esses retângulos dentro do espaçamento interno de 20 pixels entre retângulos e 30 pixels. A partir deste cabeçalho de teste, uma margem superior de 50 pixels também. E agora apenas esconda os retângulos restantes. Agora vamos somar contador de quantidade. Então desenhe um retângulo de cerca de 150 por 35, muda o raio da porta para cinco. E é de cor para cor clara. Agora desenhe dois retângulos de cerca de 46 por 33 horas. Este retângulo muda seu raio de fronteira para cinco de todos os lados e sua cor para lutar. Alinhe-os corretamente. Agora fez duas cópias deste texto e alterá-los para menos e mais. Com um tamanho de 30, regular neste texto central para 22 semi barco. Notei como este botão inteiro e agrupá-lo como um só. E depois disso, alinhe seu centro verticalmente com este texto e coloque-o com uma margem superior de 20 pixels. Agora estou acelerando o processo aqui porque estou sugerindo esse espaçamento de texto para 2030 pixels. Depois desse espaçamento, é hora de adicionar estrelas de classificação e um botão aqui. Então copie as estrelas dos arquivos de exercícios e cole-as aqui. E também o botão, porque este é um botão predefinido fornecido nas Diretrizes do iOS. Por último, vou copiar este botão, reduzi-lo para cerca de 160 por 44, e colocá-lo atrás deste texto favorito. Mudar. É de cor para cor clara com 30% de opacidade. E adicione um ícone favorito com ele. Copie o ícone favorito da tela anterior e coloque-o aqui corretamente. E agora nossa pele está completa. Seu procurado para este vídeo. Vejo você no próximo vídeo. 28. Tela de carrinho: Bem-vindos minutos extras. Neste vídeo, vamos criar uma tela de carrinho. Então, primeiro copie a tela anterior e mova-a para a direita pressionando a tecla ALT e renomeie-a para a tela atual. Sobre isso, exclua tudo isso, e adicione dois retângulos de cerca de 382 por 147 e mudou seu raio de borda para 15 e sua cor para branco. Depois disso, copie, o terceiro retângulo da tela anterior, encolha-o para baixo para cerca de 404 por quatro pés cinco. Agora vamos colocar as coisas sobre esses retângulos. Em primeiro lugar, ponto dois retângulos de cerca de 100 por 100 sobre estes emaranhados vitais. E agora insira imagens dos produtos nesses dois. E mascote com forma. Agora, basta copiar o produto em texto completo da tela anterior e colá-lo aqui e alinhá-lo corretamente. Depois disso, alinhe essas camadas de texto à esquerda com um ritmo esquerdo de 20 pixels. E aqui o espaçamento está a cinco pixels da direita. Da mesma forma, adicione outro produto. Aqui. Só estou acelerando o processo. Agora vamos passar para a parte inferior aqui. Primeiro de tudo, incomodar Tiki e endereço de entrega direito. Coloque-o com uma margem superior de 30 pixels. Depois disso, faça nove cópias deste texto e mova-as para baixo. Agora vamos substituir todas essas camadas de texto. A partir daqui, estou acelerando o processo. Então você não se aborrece. Agora estou de volta. Depois disso. Coloque duas linhas pontilhadas de cerca de 150 pixels aqui. E aqui no painel de propriedades, clique neste traçado, mudou seus traços para, para fazer dar-lhe uma aparência agradável. Fora disso. Copie o botão Favorito do paciente da tela anterior aqui e altere seu texto para alterar e alinhá-lo corretamente no centro. Esta nave. Depois dessa elipse de cerca de 16 por 16. Preencha com a cor da nossa equipe. Dendrite. Altere o tamanho da fonte para dez e coloque-a sobre esta elipse e alinhe-a corretamente. Também agrupe. E aqui, basta colocar isso sobre este ícone de carrinho corretamente. Por último, basta copiar a carga da tela anterior e colá-la aqui e renomear seu texto para continuar a finalizar a compra. E agora a tela está concluída. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 29. Tela de pagamento: Bem-vindos alunos de volta. Neste vídeo, vamos obter uma skin de pagamento. Então, em primeiro lugar, copie a tela anterior e mova-a para a direita pressionando a tecla ALT e, em seguida, renomeie-a para a tela de pagamento. Depois disso, exclua toda essa parte superior. E agora basta desenhar retângulo de cerca de três por 70. Raio de fronteira da Qaeda em torno de 20. E de cor branca Kavita. Agora apenas melhor em Tiki e método de pagamento passeio. Sua fonte deve ser 22 negrito. Não apenas colocá-lo com a margem superior e inferior de 20 pixels. Depois disso, vamos fazer uma cópia dele pressionando a tecla ALT e movê-lo para baixo, mudar sua fonte, e renomeá-lo para graduar cartão de débito barra. Por favor, com a margem esquerda de dez pixels e alinhe seu centro verticalmente. Depois disso, desenhe uma elipse de cerca de 44 por 44. Mude a cor para a cor clara com 30% de opacidade. Depois disso adicionou marca de seleção sobre esta Ellipse. Copie essa marca de seleção dos arquivos de exercícios e coloque-a aqui. Também altere sua cor para terceira cor da nossa lista API que me permite cópias desses retângulos, movê-los para baixo com um espaçamento de 20 pixels. E agora apenas cores Tinder e texto. Aqui. Estou acelerando o processo. Agora vamos nos mudar para cá. Primeiro de tudo, bleep esta porção de endereço de entrega e altere a altura deste retângulo, 2469. Aqui. Vamos mover esses detalhes de preço para cima com uma margem superior de 30 pixels. Por fim, renomeie este texto de botão para fazer o pedido. E agora a digitalização está concluída. Há esperança para este vídeo. Vejo você no próximo vídeo. 30. Tela de ordem no lugar: Bem-vindos alunos de volta. Neste vídeo, vamos criar uma tela de pedido de lugar. Então, primeiro, copie a pele W. E quando fazemos o direito pressionando a tecla ALT e, em seguida, renomeá-lo para colocar tela ordem. Depois disso, exclua tudo isso, exceto este texto e uma forma. Agora, vamos apenas mudar a cor de fundo para dipolar e esta cor de texto para cor clara. E depois movê-lo para baixo no centro. Depois disso, basta excluir item descartar e adicionar um retângulo de cerca de 28 por 28. Altera o raio da borda para dez e sua cor para branco. E depois disso, adicione um ícone de brilho sobre ele. Copie o ícone brilha dos arquivos de exercícios e visitante, e alinhe esses dois corretamente. Agora vamos descer. E aqui. Em primeiro lugar, desenhe alguma elipse aleatória e organize-os aleatoriamente para que o design da tela pareça bom. Depois disso, vamos mover esta marca de seleção aqui. E agora cópia do meio desta elipse. Dimensioná-lo para cerca de 104 por 74 e colocá-lo atrás desta elipse. Agora, a primeira, segunda elipse, cor, cor do tema. E aqui muda o tamanho da primeira elipse para 72 por 72. Agora alinhá-los centrados verticalmente e horizontalmente uns com os outros. Depois disso, reduza a opacidade do círculo externo para cerca de 20%. Então parece bom. Conhecido como suave para baixo. E aqui, renomeie este dex para fazer o pedido e coloque-o para a margem superior de dez pixels. Depois disso, mudar, esta cor navio para esta terceira cor. Com 20% de opacidade. Também mudou todas as cores de elipse para esta cor. Aqui, por favor, este retângulo com dez pixels, margem superior. Por último, renomeie este dx2. Entrega esperada para ouvir. Ouvir mudou a fonte dos primeiros textos para 1870 volts e esta segunda metade para 18 volts. Então parece proeminente. Depois disso. Alinhe-o ao centro com este retângulo corretamente. Aqui também altere este indicador de casa e a cor da barra de status para branco para que fique visível. E agora a nossa tela está completa. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 31. Tela de pesquisa: Bem-vindos alunos de volta. Neste vídeo, vamos criar uma tela definida. Então, em primeiro lugar copiado para cima sua tela e movê-lo para baixo pressionando a tecla tudo fora de que, excluir tudo isso, exceto o logotipo Nike e topo. E depois disso, mude a cor do quadro para o quarto Khaled da nossa lista com 20% de obesidade. E agora basta copiar a barra de pesquisa predefinida dos arquivos de exercícios. Basicamente aqui com uma margem superior de dez pixels. E agora vamos adicionar pesquisas recentes, então, morto, desenhar um retângulo de cerca de 404 por dois H6, em seguida, mudar sua cor para branco e é limite de raio 25. E, em seguida, coloque-o com uma margem superior de 20 pixels. Depois disso, desenhe um retângulo vertical de cerca de 48 altura. Prof., cinco a seis seções com uma linha separadora entre elas. E depois disso, pressione dp e direita Nike sapatos os números de modelodp e direita Nike sapatosaqui e adicione um ícone de pesquisa recente no lado direito. Hobby que eu possa formar os arquivos de exercícios. Então daqui, como acelerar o processo. E agora basta mudar a cor das linhas para a quarta lista de 100 seguidores com 30% de opacidade. E nossa busca está quase concluída. A última coisa que vou adicionar é adicionar um teclado. Então copie o teclado dos arquivos de exercícios e baseie-o aqui com uma margem superior de 20 pixels. E agora nossa tela é concluída decimal para este vídeo. Vejo você no próximo vídeo. 32. Tela de favorito: Bem-vindos alunos de volta. Neste vídeo, vamos ter uma tela cheia. Então, em primeiro lugar, copie o esquema número oito e cole-o aqui. Em seguida, renomeie para tela de medos. Depois disso, basta excluir essa parte inferior e, em seguida, mudar a cor do quadro para cor branca. E a cor do produto faz cor clara com 30% de opacidade. Depois disso, mova esses retângulos para baixo e pressione que Tiki e favoritos secos. Coloque-o com uma margem superior de 20 pixels e uma margem inferior de 30 pixels. E agora vamos nos mudar para cá. Basta excluir esses contadores e adicionar ao botão carrinho da tela inicial e redimensioná-lo. Depois disso, adicione um ícone de carrinho sobre ele. Então copie o ícone do carrinho e exclua o ícone dos arquivos de exercícios e visite aqui, alinhe-o com a carga corretamente. Harbor isso. Alinhe essas camadas de texto provavelmente depois disso, faça o mesmo com o segundo retângulo. Então, para isso, só estou acelerando o processo aqui para economizar tempo. Por último, copie essa barra de abas da tela inicial e cole-a aqui. Por último, o foco para a guia favorita. E agora a nossa tela é concluída decimal para este vídeo parecia o próximo vídeo. 33. Tela de perfil 2 em perfil: Bem-vindos alunos de volta. Neste vídeo, vamos criar uma tela de perfil para. Então, em primeiro lugar, copie a tela de perfil um e cole-a aqui, e então renomeie para tela de perfil para depois disso, desenhe uma elipse de cerca de 80 por 80. Em seguida, adicione uma imagem aleatória de usuário a esses lábios. Eu instalei um plug-in chamado e splash. E aqui, basta clicar, basta clicar com o botão direito do mouse para abri-lo. E então aqui, procure por homens. E depois disso, adicione uma imagem aleatória a esta elipse. Massa esta imagem nesta forma. E agora vamos fazer uma cópia deste texto, movê-lo para baixo, substituiu essas duas camadas de texto. E depois disso, Jane, a primeira ferramenta de texto, esse nome de usuário e o segundo local. Altere também a fonte e a cor dessas declarações. Observe agrupar essas duas camadas e alinhá-las ao Centro com esta imagem. Depois disso, adicione um botão de edição aqui. Então apenas desenhe um retângulo de cerca de 109 por 44, muda o raio da borda para 20. E depois disso, adicione um texto de cerca de 16 auditorias regulares e alinhe-o ao centro, corretamente. Conhecido como mudar-se para cá. Primeiro de tudo, alinhe esses títulos à esquerda com esta elipse. E agora faça quatro cópias destes e mova-os para baixo. Eu sei que vou substituir estes declarados e ícones. Todos os ícones estão em arquivos de exercícios. A partir daqui, só estou acelerando o processo. E agora é hora de adicionar linhas separadas entre esses menus. Então parece bom. Então desenhe uma linha aqui e mude sua cor para cor clara com 50% de obesidade. E agora a linha, essas linhas com um espaçamento interno de 20 pixels. E agora a tela está concluída. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 34. Editar perfil: Bem-vindos alunos de volta. Neste vídeo, vamos criar uma tela de edição do perfil. Então, em primeiro lugar, copie o número de tela 12 e cole-o aqui, e então renomeie-o para editar a tela de perfil. Depois disso, comeu tudo isso, exceto este texto. E agora substitua esse ícone de proteção por um ícone de marca de seleção. Copie o cheque meu ícone do SKY número dez e, em seguida, cole aqui. Mude a cor para a cor escura e coloque-a aqui corretamente. Depois disso, renomeie esse texto para informações de contato. E agora vamos adicionar campos aqui. Então, primeiro, faça algumas cópias deste texto e mova-as para baixo. Depois disso, adicione duas linhas de cerca de 382 aqui em mais duas linhas de 155 grão. E agora mova esse campo de texto para cá. Altere sua fonte para 14, semi negrito e sua cor para uma lista. Renomeie para nome próprio. Fora disso, mova este segundo texto para cima. Verde m ele para Alex, e muda fonte para 16, irregular. E coloque-o aqui corretamente. E agora basta fazer uma cópia deste campo de texto. Mova para a direita, renomeie também. E agora basta mover esses primeiros testes de campo para baixo com essa margem de queda de 20 pixels e renomeá-lo também. Então, daqui, como acelerar o processo. E agora nossos campos são criados perfeitamente. Aqui, mude essas linhas, cores, faça a quarta cor da nossa lista. E esta primeira curva de linha para uma cor de tema para torná-la um campo de foco. Edite a linha de texto aqui, e mude sua cor para uma cor de tema também. Por último, adicionou teclado aqui. Copie isso da tela anterior e cole-o aqui corretamente. E agora a tela está concluída. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 35. Tela de meus pedidos: Bem-vindos alunos de volta. Neste vídeo, vamos criar minha tela de Pedidos. Então, em primeiro lugar, copie a tela sobre 12 e cole-a aqui. E, em seguida, mude o nome para a minha tela Pedidos. Depois disso, exclua este ícone de carrinho e altere o fundo para a quarta cor com 20% de opacidade. E este retângulo cores para morder isso, alterar esses retângulos tamanho 2414 por 246, e o raio da borda para 0. E agora basta mover essas camadas de texto para baixo. E aqui, melhor em Tiki e escreva o número encomendado. Depois disso, fez duas cópias dele, movê-los para baixo, mudar seu telefone para 12, negrito e sua cor para terceiro pilar. E depois disso substituiu o primeiro com um lugar na data e segundo com pago na data. E agora coloque-os com um espaçamento interno de cinco pixels. Miniaplicativo que faz uma cópia deste texto acima, movê-lo para baixo e, em seguida, substituí-lo pelo total. E adicione a nossa mensagem aqui. Então desenhe um retângulo de cerca de 96 por 27, altere seu raio de borda para 20, e sua cor para a cor do nosso tema. E também Jane, a quantidade de cor para uma cor de tema. Depois desse texto do anúncio, digamos entregue. fonte deve ser 14 ponto-e-vírgula e, em seguida, mudar sua cor para branco. Então parece visível. E, em seguida, mova este texto total sob este, entregue com um espaçamento interno de dez pixels. E aqui um primeiro retângulo é feito. Vamos passar para o segundo. Agora acelerando o processo para economizar tempo. E por último, muda o texto favorito para as minhas ordens. E agora a nossa tela está completa. Há esperança para este vídeo. Vejo você no próximo vídeo. 36. Tela de meus cartões: Bem-vindos alunos de volta. Neste vídeo, vamos criar minha tela de cartões. Então, em primeiro lugar, copie a tela anterior e cole-a aqui, e depois renomeie para a tela dos meus cartões. Depois disso, exclua tudo isso, exceto que este texto. E, em seguida, altere a cor de fundo para cor branca. Agora só renomeei este texto para meus cartões. E depois que a imagem de deus importante dos arquivos de exercícios e colá-lo aqui com uma margem superior de 30 pixels. E agora faça uma cópia deste texto. E enquanto não mudamos a fonte para 14 semi parafuso e, em seguida, renomeá-lo para adicionar um novo Deus. E agora basta adicionar um retângulo de cerca de 25 por 25. A mudança é o raio limite para cinco e sua cor para a cor da nossa equipe. Agora adicione ícone de adição sobre este retângulo e alinhe-o corretamente. Copie o ícone de adição dos arquivos de exercícios e colado aqui corretamente. E agora basta colocar este texto e este ícone de adição com uma margem superior de 50 pixels. E agora nossa tela está concluída, e isso é tudo para este vídeo. Vejo você no próximo vídeo. 37. Adicione a tela de cartão: Bem-vindos de volta aos minutos. Neste vídeo, vamos criar adicionar tela de cartão. Então, em primeiro lugar, copie a tela número 14 e cole-a aqui. Dez, renomeie para proteger a tela. Depois disso, exclua esses textos de espaços reservados e mova esses valores para cima para baixo. E estes dois são campos acima e colocar este primeiro campo com uma margem superior de dez pixels e estes outros com uma margem superior de 40 pixels. Depois disso, renomeie este titular primeiro lugar para nomear no cartão. Depois disso, renomeie o primeiro campo para nome de usuário. Segundo campo para o número do cartão, muda de cor para cor clara para que um usuário saiba que não é o campo focado. Altere o terceiro para expirar TI, cor de linha genial. E depois disso, mude o quarto campo para Cv. E agora basta copiar este texto da tela anterior e colá-lo aqui. Substitua este ícone de adição por um ícone de marca de seleção e este texto com salvo meu cartão e colocá-lo corretamente. Por último, adicionar botão aqui. Copie isso do anterior, copie-o da tela criada anteriormente, cole-o aqui e renomeie esse texto para aplicar. E agora a nossa tela está completa. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 38. Minha tela de endereço: Acolhendo estudantes. Neste vídeo, vamos criar minha tela de endereço. Então, em primeiro lugar, copie a tela anterior e cole-a aqui. Em seguida, mude o nome para a tela do meu editor. Depois disso, exclua tudo isso, exceto este botão. E agora adicione um mapa e um ícone de mapa para a margem superior de 20 pixels. Copie o mapa e o ícone do mapa dos Arquivos de Exercício e coloque-o aqui corretamente. Depois disso, pressione o Tiki e escreva, edite seu endereço, coloque-o com uma margem superior de 30 pixels. E agora desenhe três retângulos aqui. Primeiro deve ser 382 por 80, e o outro deve ser 382 por 50. Corrente. Em terceiro lugar, a cor do retângulo para a cor clara com 20% de opacidade. Agora, alinhe esses três retângulos corretamente com um espaçamento interno de 20 pixels. E agora vamos passar para o primeiro retângulo. Aqui. Adicione um local que eu possa primeiro. E depois disso, adicione este texto. Alinhe isso corretamente aqui no segundo retângulo, unidade de piso. E neste terceiro código postal de barra direita. E, em seguida, a linha estes textos camadas com estes retângulos. E, por último, Muda o texto do botão para salvar. E agora a nossa tela está completa. Isso é tudo por este vídeo. Vejo você no próximo vídeo. 39. Tela do Central de Ajuda: Bem-vindos alunos de volta. Neste vídeo, vamos criar a tela da Central de Ajuda. Esta é a última semana do nosso app nike. Então, em primeiro lugar, copie a tela anterior e cole-a aqui, em seguida, renomee-a para ajudar a centralizar a cor verde. Depois disso, exclua tudo isso, exceto este retângulo. E agora mude esse tamanho de retângulo para 382 por 580. Dê a ele um raio de borda de cinco e varra sua cor com cor de fundo. E agora primeiro na TV. E certo, como posso ajudar a mudar seu telefone para 22 ouro e sua cor para a cor do nosso tema. E, em seguida, coloque-o com uma margem superior de 30 pixels e uma margem esquerda de 16 pixels. Depois disso, faça uma cópia dele. E queixo gosta de 16 semi-público e estudioso para cor escura. E, em seguida, mude o nome para este texto. E então Gent faz texto para texto multilinha com uma largura de 250. Agora adicione uma linha de cerca de 350 pixels abaixo. E depois disso, adicione uma seta na frente deste texto. Copie a seta do topo e cole-a aqui alterando sua posição. Agora, basta agrupar estes e fazer quatro cópias com uma margem superior de 20 pixels e movê-los para baixo um por um. E depois dessa corrente, o texto vive. A partir daqui, só estou acelerando o processo para o tempo da Sierra. E agora todas as telas dela estão concluídas. Isso é tudo por este vídeo. Vejo você na próxima lição. Vamos ligar os amigos deles para fazer um protótipo do nosso aplicativo. 40. Criação de protótipos: Bem-vindos alunos de volta. Este é o último vídeo deste curso. Neste vídeo, vamos dar uma olhada em como podemos ligar os quadros juntos. Então, parece um anúncio do mundo real e, em seguida, compartilhá-lo com outros membros da equipe e partes interessadas. Então aqui no canto superior direito, você vê que é dividido em três pontos de vista. Projetar você, protótipo você, e inspecionar para você. Esta visão protótipo é usada para criar conexões entre amigos e para definir as conexões entre eles através da interação. Então, basta clicar nesta visualização de protótipo, ampliar e clicar no primeiro quadro. E hey, você vê se um desempenha este ícone Jogar, ele vai considerá-lo como quadro inicial. Deixe-o como está. Porque esta não é a tela inicial dela. E aqui você vê essa flecha. Basta arrastá-lo e soltá-lo no segundo quadro. E à direita, temos a janela de propriedades. Na janela Propriedades, basta escolher. Após atraso. Esse tempo deve ser de 400 milissegundos e a animação deve nos dissolver e comer deve ser 0s. Depois disso, em nossa próxima tela, conecte este envio com o próximo sonho com auto animar e 400 milissegundos. Faça o mesmo com a próxima tela. E aqui, proteja este botão de reinicialização com tela de login. E agora vamos passar para a tela de inscrição. Aqui. Conecte esta inscrição com a tela inicial após o login com animação em movimento. E conecte este login com tela de login com smart animate. E agora vamos passar para a tela inicial. Esta é a tela inicial antes de um usuário fazer login ou se inscrever no aplicativo. Então, aqui, basta conectar esta guia de pesquisa com o número de tela 11 e este passo de campo com esquema 12 na animação em movimento. E por último, corrija este perfil com o perfil Screen1. Também verificar este inteligente de qualquer maneira ele correspondência camadas caixa de seleção. Agora em Powell Screen1, conecte este login e crie conta com tela de login. E a animação deve estar se movendo do lado direito. E aqui, conecte este meus pedidos com tela de inscrição porque nosso usuário não pode ver o pedido a menos que ele se inscreveu para o add. E esta tela de ajuda com ajuda para definir a tela. E depois disso, conecte essas profundidades como fizemos na tela anterior. A partir daqui, só estou acelerando o processo. E agora Stern nos disse mover para tela inicial login usuário externo para o aplicativo. Aqui. Em primeiro lugar, conecte este tênis com a próxima tela. E este quarto sapato com uma tela de detalhes. E sua animação. Devemos inteligente de qualquer maneira ele aqui conectar esses passos como fizemos no esquema puro. Mas desta vez conecte este Bhopal ICOM com pele Provost após o login. Tela número 13 com a mulher da última emissão. Agora vamos passar para a tela número seis aqui, corrigir esta seta para trás com a tela anterior. Então, basta escolher este saco de derrubado. Agora na tela número sete. Em primeiro lugar, faça uma cópia desta tela, mova-a aqui e renomee-a para sete em dois. E depois disso, dez, o primeiro tem ícone para símbolo ícone. E agora basta conectar essas duas telas junto com animado inteligente. Sem tela número sete em dois. Conecte o ícone do carrinho, tela número oito. E sua animação deve ser inteligente animate bem, conhecido como mu2 skene operar aqui, conecte esta seta de volta com FactoryGirl. E depois disso, conecte esses botão de mudança com tela de cerca de 18 com animação movendo à esquerda. E conecte isso continuar ao botão Checkout com o número de tela nove, o animado inteligente. Depois disso. Na tela número nove, conecte esta seta para trás com a rainha anterior e é o botão Coloque Ordem com o próximo creme. Agora vamos passar para a tela cerca de dez. Aqui. Conecte este ícone de fechamento com o número de tela cinco em um, que é tela inicial. E sua animação é inteligente de qualquer maneira, ele agora temos vinculado dez telas em nosso aplicativo. Vamos testá-lo clicando aqui. E estes estão funcionando perfeitamente bem. Agora tela cerca de 11, conecte-se melhor com bactérias e deixe o resto como está. E na tela. E faremos o mesmo com a seta para trás. E agora basta conectar esses passos como fizemos na tela anterior. Agora na tela, mais de 13. Em primeiro lugar, corrija este botão de edição e este nome de usuário com o número de tela 14. E este endereço com tela acima de 18, onde um usuário pode facilmente atualizar seu endereço. Altere também as animações para se mover a partir do lado esquerdo. Metade disso. Vamos nos mudar para cá. Conecte este meu pedido com a minha tela de pedido. Coloque-o este meu cartão com a minha tela atual, endereço parêntesis. Com tela de endereço. Deixe a notificação como está. E aqui, conecte esta Central de Ajuda com tela do centro de saúde e este logotipo com a tela inicial antes de fazer login do usuário. Junte-se também a essas guias, simplesmente exclua-as e cole as guias da tela anterior para economizar tempo. Como eles já estão conectados na tela anterior, só precisamos copiá-los e colá-los aqui. Agora na tela número 14, corrija esta seta de trás com o gatilho. E este ícone de marca de seleção com tela de perfil com animação slide direita. Aqui. Não poderia o resto destas telas, setas para trás com seta para trás gatilho e também essas profundidades. Para salvar o nosso tempo. Depois disso, vamos para o esqui número 15. Aqui. Não mude nada. E agora cinema 16, agarre isso, adicione um novo cartão com tela acima de 70 com animação movendo esquerda. E agora na tela sobre 17, conecte este botão Aplicar com tela acima de 16 com movimento da direita e emissão. E Nowinski número 18. Conecte este botão salvar com a tela número oito com animação automática. E agora letal digitalizável 19, perigoso. Finalmente, todos os nossos quadros estão ligados. Para verificar este link, basta pressionar o controle a. E aqui você vê a rede de interação. É hora de executar nosso aplicativo. Por isso, basta clicar neste botão Pigou. E agora você vê que todas as nossas exibições estão ligadas. E parece um aplicativo de verdade. Agora para compartilhá-lo com outros membros da equipe. Basta clicar no botão Compartilhar. E aqui você pode compartilhá-lo para revisão de design, desenvolvedor de hardware e muitas outras opções também. Eu só vou escolher qualquer um com um link pode adicioná-lo. E, por último, clique em Copiar Link e apenas compartilhe esse link com os membros da sua equipe ou partes interessadas. Você também pode compartilhar esse arquivo inserindo seus e-mails. E isso nos leva ao fim deste curso. Espero que tenham gostado deste curso. E se você tiver alguma curiosidade sobre este curso, sinta-se à vontade para entrar em contato comigo. Vejo vocês em outro curso de tratamento.