Em 11 minutos: Framer - noções básicas para iniciantes | Robert Mion | Skillshare

Velocidade de reprodução


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

Em 11 minutos: Framer - noções básicas para iniciantes

teacher avatar Robert Mion, Put Mion your team

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

12 aulas (11 min)
    • 1. Introdução e como instalar o Framer

      0:59
    • 2. Criar novo documento

      0:49
    • 3. Inserir e editar nova camada

      1:04
    • 4. Adicionar cor de fundo

      0:56
    • 5. Camada de posição horizontalmente

      1:03
    • 6. Camada de posição verticalmente

      0:41
    • 7. Atualizar propriedades de camada

      0:56
    • 8. Adicionar estado à camada

      0:41
    • 9. Adicionar propriedades ao estado

      0:55
    • 10. Adicionar e configurar evento

      1:08
    • 11. Tempo de reprodução e revisão

      0:45
    • 12. Bônus: documentos de quadros

      1:07
  • --
  • 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.

154

Estudantes

--

Sobre este curso

Jogue com formas, adicione propriedades e interações. Desenhe visualmente e escrevendo algumas linhas de código.

Conheça seu professor

Teacher Profile Image

Robert Mion

Put Mion your team

Professor

Designer, coder and problem solver.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos 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 e como instalar o Framer: Olá e bem-vindo ao em 11 minutos sobre Robert Me em. É aqui que leva cerca de 10 minutos para você aprender algo em um minuto para que possamos sorrir juntos. E levo tanto tempo para fazer isto como para você observá-los. Então qualidade provavelmente não vai ser ótimo. Eu tenho que roncar pugs no fundo, mas nós vamos superar isso. Então, a lição de hoje é tudo sobre a ferramenta de prototipagem de framer para design. Tudo o que você quer projetar para o conteúdo do seu coração e nós vamos construir isso. Pode não parecer muito, mas você vai escrever um código com algumas camadas. Você vai adicionar alguns estados e eventos. Tudo faz sentido daqui a pouco. Se você ainda não tem framer, você pode dar de framer Js dot com É um julgamento de oito horas. Sinta-se livre para jogar depois disso para Siri, mas custa 130 dólares para comprar, Então eu sugiro fechá-lo depois disso e voltar para o próximo pai. Então, o que é começar 2. Criar novo documento: primeira coisa primeiro, vamos criar um novo documento para que o quadro aberto vai fazer isso a partir do Max Spotlight. Eu gosto que na imprensa entrou quadro aberto. Aqui está a tela de boas-vindas. Primeiro queremos criar um novo documento para que você possa fazer arquivo novo. Vou apertar comando e porque adoro atalhos de teclado. Então aqui estamos em um novo documento. Temos que preparar uma tela, então temos que desenhar. Algo poderia desenhar em um relógio, um telefone, um tablet, blá, blá. Vamos escolher o telefone, porque normalmente é isso. Quatro. Então isso nos dá um iPhone e estamos prontos em racista, criar novas camadas, adicionar estados e nos divertir muito com framers. Então você deve estar aqui e na próxima lição começará a adicionar coisas à tela. 3. Inserir e editar nova camada: é hora de adicionar a primeira camada. Venha aqui para o canto superior esquerdo, onde você vê inserção e um sinal de mais. Nós estamos indo. Teoh, escolha esta primeira opção. Notei o atalho de teclado para mais tarde. Então clique nisso e teremos nossa primeira camada. Vemo-lo aparecer aqui no telefone. Vemos algum código já adicionado para nós e lado esquerdo. Então vamos modificar esta camada um pouco. Posso pegar qualquer um desses pontos de controle e eu vou pegar o de baixo direito. Vou arrastá-lo para que comece a ajustar a altura e a largura desta camada. Eu quero obtê-lo para que o canto inferior direito se alinhe com o meio da tela. Então, quando você chegar aqui, você deve ver o ponto estalar. E isso significa que você está pronto para soltar o rato. E temos que começar algum código escrito aqui mais tarde, como queríamos aqui. E vamos fazer. Mais uma coisa é modificar o raio da fronteira para que eu possa pegar este pequeno círculo aqui e fazer a mesma coisa. Arraste-o para a esquerda para baixo. Realmente não importa. Nós só queríamos ir o mais longe possível para tornar o raio o maior possível. Então, quando você chegar lá, solte. E isso é tudo por esta lição. 4. Adicionar cor de fundo: Felizmente, você está acompanhando, e isso mais tarde ainda é selecionado com três propriedades nele. Se não for seletivo e se parece com isso, você pode selecioná-lo novamente clicando neste pequeno ícone de hambúrguer deixado online. 14. Vamos pegar isso de volta no modo de edição, e eu quero mudar a cor de fundo. O grande não está fazendo isso por mim. Talvez uma bela cor vermelha. Então, vamos clicar neste xadrez olhando retângulo em linha com o fundo para obter um seletor de cores, e eu não amo muito este. Prefiro ir RGB. Então vamos escolher a segunda opção chamada controles deslizantes de cores e já receber Simcoe sendo gerado. Eu quero mudar controle deslizante em tons de cinza para RGB que me dá o meu vermelho, verde e azul e homens Amish entrar uma cor hexadecimal aqui, então clique duas vezes que para selecioná-lo e vamos entrar FF 0000 que nos dá uma boa imprensa entrar agradável cor vermelha, e isso é tudo o que é para este 5. Camada de posição horizontalmente: até agora, framers têm escrito código para nós. Já é hora de escrevermos alguns dos nossos, então vamos posicionar este elemento na tela. Então, para fazer isso, queremos dar X e A propriedade Y toe, empurrá-lo em cada eixo. Então, vamos clicar em qualquer lugar para sair deste controle deslizante de cores. E eu estou no final da cor de fundo anunciada. Então eu empurrei. Digite-o automaticamente em densa uma nova linha para mim e já framers insinuando o que ele não esperaria de mim. Então eu quero adicionar uma propriedade ex e uma propriedade Y para que eu pudesse apenas bater para baixo e entrar. E isso me dará o começo de uma propriedade ex, então eu quero alinhá-la ao centro ao longo de X. Então vamos começar a digitar um l para uma linha e podemos vê-lo. Ele espera que assim pressione enter e, em seguida, ponto propriedade, que irá entrar provavelmente em outro Siri de. Mas ele ponto e então nós queremos que ele seja no centro. Então comece a digitar, veja, e nós já estamos para obter molduras já dando para nós. Então termine entrar e não está centrado ao longo do eixo X 6. Camada de posição verticalmente: Bem, isso não foi tão ruim. Vamos fazer a mesma coisa ao longo do eixo y. Então pressione enter novamente e ele costumava ter X lá. Agora não, porque já lhe demos a próxima propriedade. Então vamos com sábio pressionado para chegar, por que entrar para aceitar isso e vamos fazer a mesma coisa. Pegue um l para uma linha e pressione enter para que ele auto-completar que outro ponto e em vez de centro. Vamos fazer o fundo para que eu possa empurrar para baixo quatro vezes, como você vê aqui. Mas eu vou apenas tipo de B e entrar mais uma vez dedo do pé posicioná-lo para o centro inferior da tela. E você já escreveu duas linhas de código. Super simples, certo? Vamos continuar. 7. Atualizar propriedades de camada: Até agora, você escreveu duas linhas de código. Vamos voltar para dentro. Troque um pouco de casaco. Então eu quero mudar quatro valores. O nome da camada, a largura da camada, camada aumentada e o raio da borda da camada. Então, como você acabou de ver, eu tenho clicado duas vezes. Cada um destes. Você pode clicar e arrastar para selecioná-los, qualquer maneira, que você pode pegar todos esses números. Então, para mim, a maneira mais rápida é clicar duas vezes, e eu quero mudar a largura de 75 para algo uniforme e apenas agradável para o meu cérebro. Então vamos fazer 200 eso vemos instantaneamente mudou a direita lá, que é grande altura DoubleClick para mudar isso. Então vamos mudar isso para cerca de 6 50 e mudaremos o raio da borda para algo como 40 apenas para tornar os cantos menos arredondados. E por último, vamos dar a isso um nome menos genérico, mas ainda tipo de genérico de apenas caixa. Então, novamente, clique duas vezes em camadas inserindo seus valores e sua camada agora deve se parecer com aquela chamada Caixa 8. Adicionar estado à camada: framer é uma ferramenta de prototipagem, e por isso, você espera ser capaz de protótipos de coisas como interações e normalmente, interações envolvem transições e animações e coisas geralmente mudando de estado e mudando baseado em algo que um usuário faz, e e o framer lembram essas camadas com estados e esses estados mudando através de eventos. Então vamos adicionar um estado. Agora fazemos da mesma maneira que adicionamos na camada, subimos aqui para o ícone de abençoação rápida e desceremos aqui para ST. E como há apenas uma camada, essa é a única coisa que podemos adicionar um estado tão rápido na caixa. E aqui temos um novo estado Unbox, e é assim chamado de. 9. Adicionar propriedades ao estado: vamos adicionar três propriedades a este estado que é chamado de caixa de entrada dessa maneira. Eventualmente, quando mudamos esses estados com os eventos que podemos ver essas propriedades mudarem. Então, três propriedades, vamos adicionar nossa capacidade, escala e rotação. Vamos começar com escamas enfraquecem. Veja algumas coisas legais aqui. Então cada um deles tem um controle deslizante que vamos usar para mudá-lo. Então vamos fazer escala, ir para o máximo, que é dois. E lá nós já podemos vê-lo mudando no código direito sendo adicionado à esquerda, como nós esperamos. Agora, mesma coisa que temos para a rotação. Vamos aumentar até 360 graus e, por último, opacidade. Vamos deixar isso todo o caminho até zero para que desapareça mais ou menos. Então, novamente, nós acabamos de adicionar três propriedades a este estado do mais tarde que nós já tínhamos chamado Box . E em breve seremos capazes de fazer a transição entre esses estados 10. Adicionar e configurar evento: Então temos dois estados na caixa, o estado padrão e o estado chamado A e queremos ser capazes de alternar entre esses estados com base em algo que fazemos ou algo que o usuário faz. Normalmente é um clique. Ou talvez seja um pairar. Quem sabe o quê, neste caso, vamos baseá-lo num clique. Então, quando o usuário clica, queremos alternar entre esses estados. Então vamos adicionar de volta. Venha aqui como fizemos antes para camadas e Estados Unidos. E vamos adicionar um evento e queremos adicionar um evento à caixa, que é um clique, e queremos adicionar dois dólares rápidos. Então vá em frente e clique em rápido, e nós vamos corrigir um pouco de código aqui, e é muito simples. Queremos a caixa de destino quando você clica nele e caixa de propriedade que queremos tipo de gatilho é ciclo de estado, e podemos realmente vê-lo um pouco aqui. Se descermos às vezes podemos ver que é uma função, e se você pressionar enter, temos essa função e temos que chamá-la agora e um script de trabalho. Você chama isso digitando entre parênteses e automaticamente fechado para mim. Então aqui temos o código acabado. 11. Tempo de reprodução e revisão: como prometido na introdução Aqui, 10 minutos de vocês trabalhando em um minuto de nós, sorrindo juntos. Então aqui nós geramos ou escrevemos este código nós mesmos. Vamos ver o que ele faz. Então vamos passar por cima dos blocos, clique nele em um giro e desaparece. Isso não é chique? Então vamos fazer isso de novo e ciclo de estados, exatamente como esperávamos. Clique, clique, clique em tudo para o conteúdo do seu coração. Então, o que fazemos? Criamos uma camada. Nós adicionamos dinamicamente propriedades que escrevemos código para propriedades. Nós adicionamos um estado gerado dinamicamente essas propriedades e novamente aqui nós em um evento e disse o que dedo acontecer, o que deve acontecer quando esse evento é acionado. Parabéns. E espero que goste. 12. Bônus: documentos de quadros: você pode estar se perguntando muito como eu faço quando eu assisto esses vídeos, como eu sabia sobre coisas como um ciclo de estado de linha. É uma boa pergunta. E eu queria te mostrar as docas em Framer porque é aí que você vai descobrir muitas dessas coisas. Então vamos dizer que queremos aprender o que uma linha faz, eu possa clicar duas vezes nela, copiá-lo e computadores ícones como docks e framers Fantástico por ter docks realmente bem escritos . Então Aiken colar uma linha bem aqui e empurrar, entrar e ele vai me levar Saw piscou amarelo bem ali, direto para onde está uma linha. E se eu rolar para baixo, eu posso ler tudo sobre o que uma linha faz e ficar a mesma coisa com o tipo de ciclo de estado que em e pressione enter Dê-nos seis fósforos. O 1º 1 não é ótimo. Tanto empurrou essa seta para a direita e legal. Levou-nos direto a ele. Então aqui é onde você pode aprender tudo sobre as coisas que eu posso ter usado neste curso e tipo de começar a explorar essas coisas à esquerda para descobrir onde você pode ler sobre um monte de outras coisas legais. Então são as docas e armações. Muito útil para seguir em frente e aprender mais sobre framer