Paper: design no browser com AI e efeitos
Novo tool em alpha no browser: cascata, blend modes e AI. Promissor — ainda alpha.
Resposta direta
Resposta direta sobre «Paper (alpha): Figma com AI e efeitos nativos: guia prático»: Bem, isso tudo foi criado, e isso está no browser, por acaso, com um novo tool no alpha chamado Paper. Então pense em Paper como Figma, exceto que há efeitos de escadilha construídos e muitas funções de AI. Então vou mostrar exatamente como criamos isso hoje de fora.
O que chama atenção
No material original, o ponto de partida não é teoria abstrata: é uma sequência concreta ligada a «Paper (alpha): Figma com AI e efeitos nativos: guia prático». Então aqui está o Paper, é no .design, que é a URL. E uma vez que você criar um novo projeto, você verá que temos uma UI familiar, temos o tool frame, é aqui que vamos começar.
Na prática, isso vira rotina: Ok, então agora o que faremos é, eu acho que vamos mudar de camada, vou mostrar-vos as funções da AI, esta é a parte de shader que não vamos entrar ainda, aqui é onde vamos para as funções da AI de geração de imagens, então você verá uma uma caixa de prompt familiar aqui, então o que eu vou dizer é criar uma simples Uma ilustração de um coelho voando contra um fundo azul. Vai ser um bitmap, mas vai colocar o estilo de um gráfico vector. Eu não quero nada com uma linha branca, porque eu acho que é um pouco fraco.
Como testar com segurança
O contexto importa porque a mesma ideia muda de preço conforme visto, renda, ferramenta ou fase do produto. E este aqui vai ser o mesmo, um pouco azul, mas um pouco... Mais ou menos, exceto também mudar isso para um gradiente radial.
Um que eu realmente gostei, então se eu voltar aqui para este, eu vou pegar um dos que eu realmente gostei dos meus projetos de demo e então agora eu vou apenas clicar nesta, então agora eu vou clicar nesta e o que você pode fazer, porém, o que é realmente legal é que você pode clicar direito e dizer, ei, remova o fundo de fundo aqui Então, ele vai tirar o fundo, mas o que é também muito legal, depois que ele o tira, é que você pode clicar em certo e escolher Vectorize, então agora vai criar uma cópia disso, exceto que agora vai ser vectorizado com um fundo transparente porque você tirou o fundo nesse passo, então agora isso é completamente vectorizado, muito, muito legal tem muitas outras coisas legais que você pode fazer com as funções de gerência de imagem, você sabe, você pode Seleciona um aqui, volta aqui e agora você pode fazer ajustes no existente que você trouxe. Agora, está ficando tudo ferrado por causa desse problema, que podemos sempre mudar a altura aqui para fit content. Então, agora que temos isso no meio, podemos clicar direito e colar isso em um contêiner de flexbox.
Onde encaixa no stack CrazyStack
Em vez de colecionar slogans, trate o conteúdo como checklist operacional: o que fazer nesta semana, o que medir, o que descartar. E agora temos acesso a propriedades de flexbox, como você vê em qualquer outra app, seja que seja, você sabe... Então isso tudo deve ser bem familiar se você entender alguns desses ferramentas, ou qualquer um desses ferramentas. E quando você tem algo que está em um contêiner de flexbox, nós temos diferentes opções para sua altura e altura, tipicamente.
Então nós temos conteúdo de fit aqui, nós poderíamos mudar isso para uma altura de 100% e centrar, aí vamos nós. Então agora, se nós pegarmos esse elemento e o trazer, é meio irresponsável em um contexto mínimo. E então o que podemos fazer é duplicar a coisa toda, CTRL D, e mover isso para baixo.
Information gain
Ganho específico deste material (não genérico): Ou podemos tirar a frame total, ou tirar ambos, colar em uma nova frame, clicar em frame selection e adicionar flexbox aqui, e centrar isso, mudar a posição Y para zero. Podemos então tomar esta frame geral e mudar a altura de fit para 100% apenas fazendo algumas novas novas aqui a razão pela qual há tanto espaço entre eles é porque este de cloudways tem muitos em alta altura de linha, então 150% vamos mudar isso para 90 é um pouco melhor e então este aqui vamos ter que mudar isso para, digamos, 90 pixels ou não 60.
Erros comuns e trade-offs
Os erros mais caros aparecem quando você copia a estética do caso e ignora as restrições que tornaram o caso possível. Sim, isso funciona bem, se eu pegar o frame geral, talvez ajuste o valor central um pouco mais brilhante, eu gosto disso, então agora estamos fazendo algo interessante, o que é realmente legal é que podemos também mudar o modo de mistura, como o efeito do shader, então você sabe, talvez se você quiser que você ainda possa ver o neste contexto um pouco melhor color dodge você tem alguns efeitos interessantes quando você faz isso, vamos apenas usar o overlay, eu acho que isso é bem legal agora se eu Pegue isso e escale isso, não é muito responsável, então se tomarmos o o sombrio novamente, tenha em mente que é 100% altura e altura, agora deve funcionar como se fosse um pouco como pelo menos um pouco responsivo, obviamente o precisaria ser fixado também hum então isso é legal, eu agora vamos voltar ao normal o que faremos é integrar essa coisa então vou apenas colocar e colar na parte de cima clique na direita e vamos encerrar flex pegue o flex vamos apenas fazer zero zero a altura vai ser 100% a altura vai ser 100% e então centrar Agora podemos tirar o vector e talvez torná-lo um pouco menor. Ok e veja que fica situado no centro bem, então digamos que esteja seu pequeno componente, você sabe que este é seu seção hero ou algo assim e agora você quer integrá-lo para sua própria app web então como você faria isso bem, podemos clicar em certo ou tenha cuidado de tirar o contêiner de frame geral se você só tentar tirar você sabe esses elementos individualmente não vai funcionar especialmente se você tem um efeito de shader eu descobri que selecione o frame geral Right click.
Na prática, isso vira rotina: Eu já estou jogando isso no NPNRumDev e vamos deixar funcionar um pouco e depois verificar. Então, é quase responsável, mas o que você poderia fazer é promover o LLM para, você sabe, dizer que use topografia fluida para a campanha e tudo isso e usando a propriedade de clampagem talvez para fazer e fazer isso realmente... Acho que tem muita promessa aqui, especialmente com os efeitos de shaders criados, é meio que ter um Unicorn Studio integrado dentro de uma app como a Figma.
Próximo passo acionável
Feche com uma ação única nas próximas 48 horas — pequena o bastante para executar, grande o bastante para gerar sinal. Não seja uma dessas pessoas que queimam toda vez que tem um novo ferramenta saindo. Eu vou parar de falar e vejo vocês todos muito cedo.
Na prática, isso vira rotina: Então, eu já fiz isso e eu consegui gerar... Então, clique no T para o tool do . Não consigo ver porque é pequeno e branco.