Neoma Heathcote

Neoma Heathcote

1627329720

Grafika dla początkujących - Czym jest Figma i jak tworzyć pierwsze projekty

Grafika dla początkujących - temat, na który czekało wielu widzów naszego kanału. Dzisiaj postaramy się zmniejszych dystans pomiędzy światem programowania i grafiki komputerowej. Zobaczysz podstawy narzędzia Figma, nauczysz się tworzyć proste kreacje na bloga lub dla projektów Open Source oraz poznasz kluczową umiejętność każdego grafika i projektanta.

#developer

What is GEEK

Buddha Community

Grafika dla początkujących - Czym jest Figma i jak tworzyć pierwsze projekty
Neoma Heathcote

Neoma Heathcote

1627329720

Grafika dla początkujących - Czym jest Figma i jak tworzyć pierwsze projekty

Grafika dla początkujących - temat, na który czekało wielu widzów naszego kanału. Dzisiaj postaramy się zmniejszych dystans pomiędzy światem programowania i grafiki komputerowej. Zobaczysz podstawy narzędzia Figma, nauczysz się tworzyć proste kreacje na bloga lub dla projektów Open Source oraz poznasz kluczową umiejętność każdego grafika i projektanta.

#developer

Zoltan Szogyenyi

Zoltan Szogyenyi

1620761928

Figma design kit built to integrate with Tailwind CSS

Hey everyone ✌🏻

Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.

You can find more information about the Tailwind CSS Figma design kit on Flowbite.

It’s open source 💙

#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit

Winona Aufderhar

Winona Aufderhar

1599644340

Building A Test Runner in Jest - A How-To Guide

I use Jest nearly every day when working, and it’s a fantastic tool. It lets me ship my code with confidence, knowing that I have produced something which works as intended.

More often than not, when I write tests for my code, I end up catching something I hadn’t considered and go back to take that into account. It saves me from getting called in the evening to fix something in production. For me, that’s a big deal.

With that said, I didn’t really know how jest worked. I used it all the time, but had no real clue what was going on under the hood.

Recently, I bought Kent C Dodd’s excellent Testing JavaScript course which has been incredible for increasing my knowledge.

As part of that, he digs into how jest works under the hood, and this encouraged me to try building my own tiny version. So I want to pass on that knowledge to you!

This will be a small series of posts on each part, but you can skip ahead and see the full repo here.

Building our test runner

Today’s focus will be building the actual test runner. This simply accepts a test with a title, and a callback. We run the callback and if there are no errors, the test passes!

If an error is thrown, then we deem the test to have failed.

Take a look:

const test = async (title: string, callback: Function) => {
  try {
    await callback();
    console.log(chalk.green(`\u2713 ${title}`));
  } catch (error) {
    console.error(chalk.red(`✕ ${title}`));
    console.error(error);
  }

So as you can see, we have our test function which accepts a title which is a string, and a callback which is the function which we want to test.

We then run our callback function in a try/catch block, and assuming that nothing is caught, we say the test has passed.

This allows us to run something like this:

test('sum adds numbers', () => {
  const sum = (a, b) => a + b
  const result = sum(3, 7)
  const expected = 10
  expect(result).toBe(expected)
})

So as you can see, we pass a title, and a function where we sum two numbers: 3 and 7. But on our final line, we see something new: expect and toBe. These are our assertions and we have nothing to handle them yet.

#jest #javascript #tdd #unit-testing #javascript-top-story #how-to-build-a-jest-clone #building-test-runner-in-jest #hackernoon-top-story

Ruthie Bugala

Ruthie Bugala

1678085779

Difference Between Figma Vs Adobe XD

Welcome to the life of a UX designer, where you have options galore when it comes to the best user experience (UX) and user interface (UI) design software. Choosing a tool like Figma vs Adobe XD is a big deal as it impacts the workflow, the overall experience, and the collaboration with the clients - it is the most important tool UX designers work with.

If you’re a UX/UI professional, keep reading to find out more about how Figma vs Adobe XD work, their features, and which one might be the best for you to deliver a top-quality product.

What is Figma?

Figma is an interface, vector design, and cloud-based software that runs in the browser. It is considered by many designers as the best application to support team-based collaborative design projects. Figma gives you all the tools and elements you need to create full-fledged web design, prototyping, and code generation for the handoff.

Figma vs Adobe XD: main differences

What is Figma used for?

Although Figma looks a lot like other prototyping tools, its key differentiator is the ability to work with teams. But simply put, Figma:

  • Is an online UI design tool that supports the Product Design Process
  • Allows you to create icons, social media graphics, presentations, and much more for free;
  • Access hundreds of fonts, shapes, and colors to create dynamic visuals;
  • Create responsive mockups for a more real life-based draft;
  • Allows you to create your own libraries of content or use free libraries from other creators;
  • Customize your graphic design assets with powerful features;
  • Design directly in the browser as everything lives online, and for free;
  • You can co-edit with your team within the same file.

Figma is hence considered:

A prototyping tool

  • Allows you to design, prototype, and present, all in the same tool;
  • All updates to the design are immediately reflected in the prototype without the need for syncing of exporting;
  • You can get feedback from your team by simply sharing a link;
  • You’re able to run the prototypes on mobile for more reliable user testing;
  • It has recently started smart animation;
  • There’s now a prototype series available with different screen sizes optimized for the Apple watch.

A code generator for handoff

  • Developers can inspect, copy and export CSS directly from the design file and adapt it to iOS and Android;
  • They can mirror designs on mobile using “live device preview”;
  • They can also adjust the size of the frame to test how layouts will adapt to different screen sizes.

It’s important to mention that Figma is backed by a large community of designers and developers who provide plugins to improve functionality and streamline workflows. Everyone is welcome to contribute and share.

What is Adobe XD

Adobe XD is a vector-based UI/UX design tool that enables you to design anything from smartwatch apps to fully-fledged websites. Adobe XD promises a breath of fresh air for professionals who are still using Photoshop or Illustrator for UI design, being the only Adobe tool that allows prototyping.

Figma vs Adobe XD: main differences

What is Adobe XD used for?

Adobe XD was developed with mobile and web experiences in mind, and design teams are leveraging its features for their full experience design process.

Application-wise, Adobe XD is used for:

Website design - Website design and Adobe XD work well together, from information architecture to layout and prototyping. Concepts and ideas are brought together with ease using productivity features like Stacks, Padding, and Repeat Grid to define navigation patterns, scrolling, and much more for your website;

App design - Designing apps for mobile phones, desktop apps, or even web apps requires dynamic interactions, multiple navigation patterns, and a variety of screen sizes, including less common ones like a digital mupi. Adobe XD makes creating app experiences easy with features like Responsive Resize, pre-built artboard sizes for common devices, and prototype features like auto-animate and dragging triggers;

Game design - You can map out and test game menus, settings, and other interface components directly in Adobe XD by simply plugin in a supported Bluetooth game controller;

Voice assistant design - Adobe XD enables you to create prototypes of virtual assistants thanks to its powerful voice commands and connections with Amazon Alexa and Google Assistant that allow you to test experiences.

Features-wise, Adobe XD has many of the similar features of Figma:

UI design - With integrations with Creative Cloud apps, like Photoshop and Illustrator, you can easily pull in assets and have access to all the necessary tools to do your best work;

UX design - You can iterate quickly, test interactions and processes, and get a truer sense of friction spots so you’re able to fix them as soon as you spot them;

Wireframing - UI kits enable you to easily create interactive wireframes to test your design and go through user flows;

Prototyping - Adobe XD’s advanced capabilities like auto-animate and voice make it easier to build a prototype design that consumers can explore and engage with - leading to a better user experience;

Developer handoff - Adobe XD's sharing mode enables you to collaborate with development teams from the start. Whether you're using a voiceover recording to walk over your design or sharing development details, XD keeps you connected at all times.

Team collaboration - Live co-editing and cloud files enable easier collaboration within your team.

Figma vs Adobe XD: main differences

Since the advent of Adobe XD in 2016, Figma vs Adobe XD have been running against each other. The rivalry wasn't fierce initially, with XD's early editions lacking several critical features, but that has improved in recent years. The competition between the two softwares has now intensified, and it becomes harder to pick which one is best for you and your project.

The main difference between Figma vs Adobe XD is the price. While Figma is free for individual users, and you only pay if you want to have access to features like coworking, for Adobe XD you have to pay before using it. Below, we are going to cover where each one shines, and which one is better for your specific set of circumstances.

Supported platforms

Figma

  • Desktop - Windows, Mac, Linux (Figma-linux app provides support);
  • Desktop Browsers - Editing can be done in any WebGL supporting browser - ChromeOS, Linux, and Berkeley Software Distribution (BSD) based systems. Clients can also preview the drafts in desktop browsers;
  • Mobile device browsers - iOS and Android are available on view-only mode; moreover Figma is supported on Safari, Chrome, and Firefox;
  • Mobile apps - iOS and Android have the Figma Mirrow app that emulates mobile devices.

Adobe XD

  • Desktop - Windows and Mac;
  • Desktop and Mobile Browsers - XD generates previews of the designs in the browser so that clients can give feedback;
  • Mobile apps - iOS and Android have the Adobe XD app for live previews.

Figma

  • Multiplayer - Any number of users can be logged in and edit a document at the same time;
  • Observation mode - You are able to mirror your teammates’ screen so you can see as they move around a document or draft. This is useful if you want to watch a client move through a prototype and see if there are any flaws;
  • Team libraries - You can build design systems for your own work that include reusable components, color schemes, and font styles, and also make those design systems available to your whole team so that everyone is working with the same elements;
  • Automatic save & sync - Any modifications to documents and design systems will be immediately saved and synced. If a change occurs while a teammate is working on a shared project, they will be notified, ensuring that all team members are up to date at all times. There will be no need for file uploads, downloads, or manual merges.

Adobe XD

  • Coediting - There’s a collaborative "coediting" design beta capability as of November 2019, which works similarly to Figma's "multiplayer" feature. The only visible difference between the two right now is that on Adobe XD you don't see the live cursors of other designers working on the document;
  • Linked assets - When a document is saved to the cloud, its components and styles may be accessible through linking;
  • Creative Cloud libraries - You can organize and access assets through CC Libraries; this may be similar to Figma’s Team Libraries but the features to facilitate collaboration are not as good in XD.

Figma

  • Uses frames that act as containers that represent viewports and design sub-elements such as buttons, content sections, navigation elements, amongst others. Frames have all the functionalities as the below artboards have, and they can also bring added functionalities to these elements, such as grids and auto-layout.

Adobe XD

  • Uses artboards that also act as containers that represent viewports that only hold designs - e.g. a phone screen vs a laptop screen. While prototyping, you can link these artboards together to simulate the movement of a user across a site or app. While frames can do everything artboards do, XD’s artboards can’t do everything Figma’s frames can do.

Prototyping

Both Figma and Adobe XD are used for prototyping, but XD is slightly better as it has a collection of triggers that facilitate more types of UI designs. Let’s take a look.

Figma

Allows you multiple interactions per element as long as they are different:

Triggers

  • On click
  • On drag
  • While hovering
  • While pressing
  • Mouse enter
  • Mouse leave
  • Mouse down
  • Mouse up
  • After delay

Actions

  • Navigate to (frame - use to move between artboard type frames)
    Open overlay (frame)
  • Swap with (frame - use to swap in alternate component type frames, e.g. buttons, see next section for more info)
  • Back
  • Close overlay
  • Open URL

Transitions

  • Instant
  • Dissolve
  • Smart Animate (see section after next)
  • Move In
  • Move Out
  • Push
  • Slide In
  • Slide Out

Easing

  • Ease In
  • Ease Out
  • Ease In and Out
  • Linear

Adobe XD

Allows you multiple interactions per item like a hover interaction and a click interaction:

Triggers

  • Tap
  • Drag
  • Hover
  • Time
  • Voice
  • Keys
  • Gamepad

Actions

  • Transitions
  • Auto-animate
  • Overlay
  • Speech Playback
  • Previous artboard
  • State change

Transitions

  • Right
  • Up
  • Down
  • Dissolve
  • Slide left
  • Slide right
  • Slide up
  • Slide down
  • Push left

Easing

  • None (aka linear)
  • Ease Out
  • Ease In
  • Ease In-Out
  • Snap
  • Wind Up
  • Bounce

We can conclude that Adobe XD enables for more than one interaction per element, allowing you to create prototypes with functionalities closer to people's behavior in the browser.

Handoff

Figma

As already mentioned, Figma can generate CSS, Swift for iOS, and XML for Android. It also lets you directly copy the CSS or SVG. Also, if there is a change in the document, the code will be automatically regenerated.

Adobe XD

XD generates CSS codes, but you have to first generate a developer link and then open that link in a browser. Unlike Figma, if the document changes here, you'll need to regenerate the link and refresh it.

Is Figma better than Adobe XD?

Short answer: yes. Figma has been - arguably - the one design tool design teams choose for its amazing team collaboration feature. It simplifies the design process and effectively helps designers and teams work together more efficiently as you’re able to collaborate live with your teammates. Also, designers and teams highly benefit from Figma because:

  • It’s free and you can access it without having to download apps;
  • It works on any platform;
  • Collaboration is simple and familiar;
  • Sharing is uncomplicated and flexible;
  • Embedded files provide real-time updating;
  • Prototyping is straightforward and intuitive;
  • Developer handoff is easy;
  • Team libraries are ideal for design systems, allowing anyone with access use the latest versions.

Conclusion

The battle between Figma vs Adobe XD will continue, and they are undoubtedly pushing each other to improve and step up their game. On a pretty frequent basis, we now see features that were exclusive to one appear in the other, making it harder for designers to decide which one to pick to create a top-quality product.

But if collaboration is important to you and your team, Figma is the best choice for you. It was designed from the bottom up with teamwork in mind, and as such, no other software will be able to compete against it any time soon. It also outpaces Adobe XD being better at frames vs artboards, auto-layout, responsiveness, and graphic design/UI design overall.

On the other hand, you have a better chance with Adobe XD if you’re already used to Adobe’s ecosystem and within the Creative Cloud. Also, Adobe XD is slightly better at prototyping when it comes to auto-animation and voice, facilitating its accuracy.

Original article sourced at: https://www.imaginarycloud.com

#figma #figma 

Verónica Batista

Verónica Batista

1678096140

Diferença entre Figma e Adobe XD

Bem-vindo à vida de um designer de UX, onde você tem opções em abundância quando se trata da melhor experiência do usuário (UX) e software de design de interface do usuário (UI) . Escolher uma ferramenta como Figma vs Adobe XD é importante, pois afeta o fluxo de trabalho, a experiência geral e a colaboração com os clientes - é a ferramenta mais importante com a qual os designers de UX trabalham.

Se você é um profissional de UX/UI, continue lendo para saber mais sobre como funciona o Figma x Adobe XD , seus recursos e qual deles pode ser o melhor para você entregar um produto de alta qualidade.

O que é Figma?

Figma é uma interface, design vetorial e software baseado em nuvem que roda no navegador. É considerado por muitos designers como o melhor aplicativo para dar suporte a projetos de design colaborativo baseados em equipe. O Figma fornece todas as ferramentas e elementos necessários para criar um web design completo , prototipagem e geração de código para o handoff .

Figma vs Adobe XD: principais diferenças

Para que serve o Figma?

Embora o Figma se pareça muito com outras ferramentas de prototipagem, seu principal diferencial é a capacidade de trabalhar com equipes. Mas simplesmente, Figma:

  • É uma ferramenta de design de interface do usuário online que oferece suporte ao processo de design de produto
  • Permite criar ícones , gráficos de mídia social , apresentações e muito mais gratuitamente;
  • Acesse centenas de fontes, formas e cores para criar visuais dinâmicos ;
  • Crie maquetes responsivas para um rascunho mais baseado na vida real ;
  • Permite que você crie suas próprias bibliotecas de conteúdo ou use bibliotecas gratuitas de outros criadores;
  • Personalize seus recursos de design gráfico com recursos poderosos ;
  • Projete diretamente no navegador, pois tudo fica online e de graça;
  • Você pode coeditar com sua equipe no mesmo arquivo.

Figma é, portanto, considerado:

Uma ferramenta de prototipagem

  • Permite projetar, prototipar e apresentar, tudo na mesma ferramenta;
  • All updates to the design are immediately reflected in the prototype without the need for syncing of exporting;
  • You can get feedback from your team by simply sharing a link;
  • You’re able to run the prototypes on mobile for more reliable user testing;
  • It has recently started smart animation;
  • There’s now a prototype series available with different screen sizes optimized for the Apple watch.

A code generator for handoff

  • Developers can inspect, copy and export CSS directly from the design file and adapt it to iOS and Android;
  • They can mirror designs on mobile using “live device preview”;
  • They can also adjust the size of the frame to test how layouts will adapt to different screen sizes.

É importante mencionar que o Figma é apoiado por uma grande comunidade de designers e desenvolvedores que fornecem plugins para melhorar a funcionalidade e simplificar os fluxos de trabalho. Todos são bem-vindos para contribuir e compartilhar .

O que é o Adobe XD

O Adobe XD é uma ferramenta de design de interface do usuário/UX baseada em vetor que permite projetar qualquer coisa, desde aplicativos smartwatch até sites completos. O Adobe XD promete uma lufada de ar fresco para os profissionais que ainda usam o Photoshop ou o Illustrator para design de interface do usuário, sendo a única ferramenta da Adobe que permite a prototipagem.

Figma vs Adobe XD: principais diferenças

Para que serve o Adobe XD?

O Adobe XD foi desenvolvido com experiências móveis e da Web em mente , e as equipes de design estão aproveitando seus recursos para o processo de design de experiência completa.

Em termos de aplicativos, o Adobe XD é usado para:

Design do site - O design do site e o Adobe XD funcionam bem juntos, desde a arquitetura da informação até o layout e a prototipagem. Conceitos e ideias são reunidos com facilidade usando recursos de produtividade como Stacks, Padding e Repeat Grid para definir padrões de navegação, rolagem e muito mais para o seu site;

Design de aplicativos - Projetar aplicativos para celulares, aplicativos de desktop ou até mesmo aplicativos da web requer interações dinâmicas, vários padrões de navegação e uma variedade de tamanhos de tela, incluindo os menos comuns, como um mupi digital. O Adobe XD facilita a criação de experiências de aplicativos com recursos como redimensionamento responsivo, tamanhos de prancheta pré-criados para dispositivos comuns e recursos de protótipo como acionamentos de animação automática e arrastar;

Game design - You can map out and test game menus, settings, and other interface components directly in Adobe XD by simply plugin in a supported Bluetooth game controller;

Voice assistant design - Adobe XD enables you to create prototypes of virtual assistants thanks to its powerful voice commands and connections with Amazon Alexa and Google Assistant that allow you to test experiences.

Features-wise, Adobe XD has many of the similar features of Figma:

UI design - With integrations with Creative Cloud apps, like Photoshop and Illustrator, you can easily pull in assets and have access to all the necessary tools to do your best work;

UX design - You can iterate quickly, test interactions and processes, and get a truer sense of friction spots so you’re able to fix them as soon as you spot them;

Wireframing - UI kits enable you to easily create interactive wireframes to test your design and go through user flows;

Prototyping - Adobe XD’s advanced capabilities like auto-animate and voice make it easier to build a prototype design that consumers can explore and engage with - leading to a better user experience;

Developer handoff - Adobe XD's sharing mode enables you to collaborate with development teams from the start. Whether you're using a voiceover recording to walk over your design or sharing development details, XD keeps you connected at all times.

Colaboração em equipe - a coedição ao vivo e os arquivos na nuvem permitem uma colaboração mais fácil dentro de sua equipe.

Figma vs Adobe XD: principais diferenças

Desde o advento do Adobe XD em 2016, o Figma vs o Adobe XD estão correndo um contra o outro. A rivalidade não era acirrada inicialmente, com as primeiras edições do XD carecendo de vários recursos críticos, mas isso melhorou nos últimos anos. A competição entre os dois softwares agora se intensificou e fica mais difícil escolher qual é o melhor para você e seu projeto.

The main difference between Figma vs Adobe XD is the price. While Figma is free for individual users, and you only pay if you want to have access to features like coworking, for Adobe XD you have to pay before using it. Below, we are going to cover where each one shines, and which one is better for your specific set of circumstances.

Supported platforms

Figma

  • Desktop - Windows, Mac, Linux (Figma-linux app provides support);
  • Desktop Browsers - Editing can be done in any WebGL supporting browser - ChromeOS, Linux, and Berkeley Software Distribution (BSD) based systems. Clients can also preview the drafts in desktop browsers;
  • Mobile device browsers - iOS and Android are available on view-only mode; moreover Figma is supported on Safari, Chrome, and Firefox;
  • Mobile apps - iOS and Android have the Figma Mirrow app that emulates mobile devices.

Adobe XD

  • Desktop - Windows and Mac;
  • Desktop and Mobile Browsers - XD generates previews of the designs in the browser so that clients can give feedback;
  • Mobile apps - iOS and Android have the Adobe XD app for live previews.

Figma

  • Multiplayer - Any number of users can be logged in and edit a document at the same time;
  • Observation mode - You are able to mirror your teammates’ screen so you can see as they move around a document or draft. This is useful if you want to watch a client move through a prototype and see if there are any flaws;
  • Team libraries - You can build design systems for your own work that include reusable components, color schemes, and font styles, and also make those design systems available to your whole team so that everyone is working with the same elements;
  • Automatic save & sync - Any modifications to documents and design systems will be immediately saved and synced. If a change occurs while a teammate is working on a shared project, they will be notified, ensuring that all team members are up to date at all times. There will be no need for file uploads, downloads, or manual merges.

Adobe XD

  • Coediting - There’s a collaborative "coediting" design beta capability as of November 2019, which works similarly to Figma's "multiplayer" feature. The only visible difference between the two right now is that on Adobe XD you don't see the live cursors of other designers working on the document;
  • Linked assets - When a document is saved to the cloud, its components and styles may be accessible through linking;
  • Bibliotecas da Creative Cloud - você pode organizar e acessar ativos por meio das Bibliotecas da CC; isso pode ser semelhante às bibliotecas de equipe do Figma, mas os recursos para facilitar a colaboração não são tão bons no XD.

figma

  • Utiliza frames que atuam como containers que representam viewports e subelementos de design como botões, seções de conteúdo, elementos de navegação, entre outros. Os quadros têm todas as funcionalidades que as pranchetas abaixo têm, e também podem trazer funcionalidades adicionais a esses elementos, como grades e auto-layout .

Adobe XD

  • Usa pranchetas que também atuam como contêineres que representam viewports que contêm apenas designs - por exemplo, uma tela de telefone versus uma tela de laptop. Durante a prototipagem, você pode vincular essas pranchetas para simular o movimento de um usuário em um site ou aplicativo. Enquanto os quadros podem fazer tudo que as pranchetas fazem, as pranchetas do XD não podem fazer tudo que os quadros do Figma fazem.

Prototipagem

Tanto o Figma quanto o Adobe XD são usados ​​para prototipagem, mas o XD é um pouco melhor, pois possui uma coleção de gatilhos que facilitam mais tipos de designs de interface do usuário. Vamos dar uma olhada.

figma

Permite múltiplas interações por elemento desde que sejam diferentes:

Gatilhos

  • Ao clicar
  • Ao arrastar
  • Enquanto pairava
  • Enquanto pressiona
  • Mouse entrar
  • Rato sai
  • Mouse para baixo
  • Mouse para cima
  • após atraso

Ações

  • Navegue até (quadro - use para mover entre os quadros do tipo prancheta)
    Abra a sobreposição (quadro)
  • Trocar com (quadro - use para trocar em quadros de tipo de componente alternativo, por exemplo, botões, consulte a próxima seção para obter mais informações)
  • Voltar
  • Fechar sobreposição
  • Abrir URL

Transições

  • Instante
  • Dissolver
  • Smart Animate (consulte a seção a seguir)
  • Mover-se
  • Mudar
  • Empurrar
  • Deslize
  • Deslizar para fora

Facilitando

  • Facilidade
  • Relaxe
  • Facilidade para entrar e sair
  • Linear

Adobe XD

Permite várias interações por item, como uma interação de foco e uma interação de clique:

Gatilhos

  • Tocar
  • Arrastar
  • Flutuar
  • Tempo
  • Voz
  • Chaves
  • Controle

Ações

  • Transições
  • Animar automaticamente
  • Sobreposição
  • Reprodução de voz
  • Prancheta anterior
  • mudança de estado

Transições

  • Certo
  • Acima
  • Abaixo
  • Dissolver
  • Deslize para a esquerda
  • Deslize para a direita
  • Deslize para cima
  • Deslize para baixo
  • Empurre para a esquerda

Facilitando

  • Nenhum (também conhecido como linear)
  • Relaxe
  • Facilidade
  • Facilidade de entrada e saída
  • Foto
  • Enrolar
  • Quicar

Podemos concluir que o Adobe XD possibilita mais de uma interação por elemento , permitindo criar protótipos com funcionalidades mais próximas do comportamento das pessoas no navegador.

Não interferir

figma

Como já mencionado, o Figma pode gerar CSS, Swift para iOS e XML para Android . Também permite copiar diretamente o CSS ou SVG. Além disso, se houver uma alteração no documento, o código será regenerado automaticamente .

Adobe XD

O XD gera códigos CSS , mas primeiro você precisa gerar um link de desenvolvedor e depois abrir esse link em um navegador. Ao contrário do Figma, se o documento mudar aqui, você precisará gerar novamente o link e atualizá-lo .

O Figma é melhor que o Adobe XD?

Resposta curta: sim . O Figma tem sido - indiscutivelmente - a única ferramenta de design que as equipes de design escolhem por seu incrível recurso de colaboração em equipe . Ele simplifica o processo de design e ajuda efetivamente designers e equipes a trabalharem juntos com mais eficiência, pois você pode colaborar ao vivo com seus colegas de equipe. Além disso, designers e equipes se beneficiam muito do Figma porque:

  • É gratuito e você pode acessá-lo sem precisar baixar aplicativos;
  • Funciona em qualquer plataforma;
  • A colaboração é simples e familiar;
  • O compartilhamento é descomplicado e flexível;
  • Os arquivos incorporados fornecem atualização em tempo real;
  • A prototipagem é direta e intuitiva;
  • A transferência do desenvolvedor é fácil;
  • As bibliotecas de equipe são ideais para sistemas de design, permitindo que qualquer pessoa com acesso use as versões mais recentes.

Conclusão

A batalha entre Figma e Adobe XD continuará, e eles estão, sem dúvida, pressionando um ao outro para melhorar e intensificar seu jogo. Com bastante frequência, agora vemos recursos que eram exclusivos de um aparecerem no outro, tornando mais difícil para os designers decidirem qual escolher para criar um produto de alta qualidade.

Mas se a colaboração é importante para você e sua equipe, Figma é a melhor escolha para você . Ele foi projetado de baixo para cima com o trabalho em equipe em mente e, como tal, nenhum outro software poderá competir com ele tão cedo. Ele também supera o Adobe XD sendo melhor em quadros versus pranchetas, layout automático, capacidade de resposta e design gráfico/design de interface do usuário em geral.

Por outro lado, você tem mais chances com o Adobe XD se já estiver acostumado com o ecossistema da Adobe e dentro da Creative Cloud. Além disso, o Adobe XD é um pouco melhor em prototipagem quando se trata de animação automática e voz, facilitando sua precisão.

Artigo original obtido em: https://www.imaginarycloud.com

#figma #figma