Pride At Figma

For Maker Week in May of 2021, we asked Figmates across the company to share what Pride means to them. Here’s what they had to say…

#figma

What is GEEK

Buddha Community

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

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.

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.

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 

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 .

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.

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 

Sự khác biệt giữa Figma và Adobe XD

Trong bài viết này, hãy tìm hiểu về Sự khác biệt giữa Figma và Adobe XD. Việc chọn một công cụ như Figma so với Adobe XD rất quan trọng vì nó ảnh hưởng đến quy trình làm việc, trải nghiệm tổng thể và sự cộng tác với khách hàng - đó là công cụ quan trọng nhất mà các nhà thiết kế UX làm việc cùng.

Chào mừng bạn đến với cuộc sống của một nhà thiết kế UX, nơi bạn có nhiều lựa chọn khi nói đến phần mềm thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UI) tốt nhất 

Nếu bạn là một chuyên gia về UX/UI, hãy đọc tiếp để tìm hiểu thêm về cách Figma x Adobe XD hoạt động , các tính năng của nó và cái nào có thể là tốt nhất để bạn cung cấp một sản phẩm chất lượng cao.

---

Figma là gì?

Figma là một giao diện, thiết kế vector và phần mềm dựa trên đám mây chạy trên trình duyệt. Nó được nhiều nhà thiết kế coi là ứng dụng tốt nhất để hỗ trợ các dự án thiết kế hợp tác dựa trên nhóm. Figma cung cấp tất cả các công cụ và yếu tố cần thiết để tạo ra một thiết kế web hoàn chỉnh , tạo nguyên mẫu và tạo mã cho quá trình chuyển giao .

Figma dùng để làm gì?

Mặc dù Figma rất giống với các công cụ tạo mẫu khác, nhưng điểm khác biệt chính của nó là khả năng làm việc theo nhóm. Nhưng đơn giản thôi, Figma:

• Nó là một công cụ thiết kế giao diện người dùng trực tuyến hỗ trợ quá trình thiết kế sản phẩm.
• Cho phép bạn tạo biểu tượng , đồ họa mạng xã hội , bản trình bày và hơn thế nữa miễn phí;
• Truy cập hàng trăm phông chữ, hình dạng và màu sắc để tạo hình ảnh động ;
• Tạo các mô hình đáp ứng cho một bản nháp dựa trên thực tế hơn ;
• Cho phép bạn tạo thư viện nội dung của riêng mình hoặc sử dụng thư viện miễn phí từ những người sáng tạo khác;
• Tùy chỉnh tài nguyên thiết kế đồ họa của bạn với các tính năng mạnh mẽ ;
• Thiết kế trực tiếp trên trình duyệt, mọi thứ đều trực tuyến và miễn phí;
• Bạn có thể đồng chỉnh sửa với nhóm của mình trên cùng một tệp.

Do đó, Figma được coi là:

Một công cụ tạo mẫu

• Cho phép bạn thiết kế, tạo nguyên mẫu và trình bày tất cả trong cùng một công cụ;
• Tất cả các cập nhật cho thiết kế được phản ánh ngay lập tức trong nguyên mẫu mà không cần đồng bộ hóa xuất;
• Bạn có thể nhận phản hồi từ nhóm của mình bằng cách chia sẻ một liên kết;
• Bạn có thể chạy các nguyên mẫu trên thiết bị di động để thử nghiệm người dùng đáng tin cậy hơn;
• Nó gần đây đã bắt đầu hoạt hình thông minh;
• Hiện đã có một loạt nguyên mẫu với các kích thước màn hình khác nhau được tối ưu hóa cho đồng hồ Apple.

Bộ tạo mã cho chuyển giao

• Các nhà phát triển có thể kiểm tra, sao chép và xuất CSS trực tiếp từ tệp thiết kế và điều chỉnh nó cho iOS và Android;
• Họ có thể phản chiếu các thiết kế trên thiết bị di động bằng cách sử dụng "xem trước thiết bị trực tiếp";
• Họ cũng có thể điều chỉnh kích thước của khung để kiểm tra cách bố cục sẽ thích ứng với các kích thước màn hình khác nhau.

Điều quan trọng cần đề cập là Figma được hỗ trợ bởi một cộng đồng lớn gồm các nhà thiết kế và nhà phát triển , những người cung cấp các plugin để cải thiện chức năng và đơn giản hóa quy trình công việc. Tất cả đều được chào đón để đóng góp và chia sẻ .

Adobe XD là gì

Adobe XD là một công cụ thiết kế UI/UX dựa trên véc tơ cho phép bạn thiết kế mọi thứ từ ứng dụng đồng hồ thông minh đến trang web đầy đủ. Adobe XD hứa hẹn một luồng gió mới cho các chuyên gia vẫn đang sử dụng Photoshop hoặc Illustrator để thiết kế giao diện người dùng, là công cụ duy nhất của Adobe cho phép tạo mẫu.

Adobe XD dùng để làm gì?

Adobe XD được xây dựng có tính đến trải nghiệm web và di động và các nhóm thiết kế đang tận dụng các khả năng của Adobe XD cho quy trình thiết kế trải nghiệm từ đầu đến cuối.

Về mặt ứng dụng, Adobe XD được sử dụng cho:

Thiết kế trang web - Thiết kế trang web và Adobe XD phối hợp tốt với nhau, từ kiến ​​trúc thông tin đến bố cục và tạo mẫu. Các khái niệm và ý tưởng được kết hợp với nhau một cách dễ dàng bằng cách sử dụng các tính năng năng suất như Ngăn xếp, Khoảng đệm và Lưới lặp lại để xác định các mẫu điều hướng, cuộn và hơn thế nữa cho trang web của bạn;

Thiết kế ứng dụng - Thiết kế ứng dụng dành cho thiết bị di động, ứng dụng dành cho máy tính để bàn hoặc thậm chí cả ứng dụng web yêu cầu tương tác động, nhiều mẫu điều hướng và nhiều kích thước màn hình, bao gồm cả những kích thước ít phổ biến hơn như bảng quảng cáo kỹ thuật số. Adobe XD giúp dễ dàng tạo trải nghiệm ứng dụng với các tính năng như thay đổi kích thước đáp ứng, kích thước bản vẽ dựng sẵn cho các thiết bị phổ biến và các tính năng nguyên mẫu như trình kích hoạt hoạt hình kéo và tự động;

Thiết kế trò chơi - Bạn có thể vạch ra và kiểm tra các menu, cài đặt trò chơi và các thành phần giao diện khác trực tiếp trong Adobe XD bằng cách cắm vào bộ điều khiển trò chơi Bluetooth được hỗ trợ;

Thiết kế trợ lý giọng nói - Adobe XD cho phép bạn tạo nguyên mẫu của trợ lý ảo nhờ các lệnh thoại mạnh mẽ và kết nối với Amazon Alexa và Google Assistant cho phép bạn thử nghiệm trải nghiệm.

Về tính năng, Adobe XD có nhiều tính năng tương tự Figma:

Thiết kế giao diện người dùng - Với việc tích hợp với các ứng dụng Creative Cloud, như Photoshop và Illustrator, bạn có thể dễ dàng lấy nội dung và có quyền truy cập vào tất cả các công cụ cần thiết để thực hiện công việc của mình một cách tốt nhất;

Thiết kế UX - Bạn có thể lặp lại nhanh chóng, thử nghiệm các tương tác và quy trình, đồng thời có cảm giác chân thực hơn về các điểm chưa phù hợp để bạn có thể khắc phục chúng ngay khi phát hiện ra chúng;

Wireframing - Bộ giao diện người dùng cho phép bạn dễ dàng tạo các wireframe tương tác để kiểm tra thiết kế của mình và xem qua các luồng người dùng;

Tạo mẫu - Các khả năng nâng cao của Adobe XD như tự động tạo hoạt ảnh và giọng nói giúp dễ dàng xây dựng thiết kế nguyên mẫu mà người tiêu dùng có thể khám phá và tương tác - dẫn đến trải nghiệm người dùng tốt hơn;

Chuyển giao cho nhà phát triển - Chế độ chia sẻ của Adobe XD cho phép bạn cộng tác với các nhóm phát triển ngay từ đầu. Cho dù bạn đang sử dụng bản ghi âm thuyết minh để xem qua thiết kế của mình hay chia sẻ chi tiết quá trình phát triển, XD luôn giúp bạn kết nối.

Cộng tác nhóm - Đồng chỉnh sửa trực tiếp và lưu trữ đám mây cho phép cộng tác dễ dàng hơn trong nhóm của bạn.

Figma vs Adobe XD: sự khác biệt chính

Kể từ khi Adobe XD ra đời vào năm 2016, Figma và Adobe XD đã chạy đua với nhau. Sự cạnh tranh ban đầu không gay gắt, với các phiên bản đầu tiên của XD thiếu một số tính năng quan trọng, nhưng điều này đã được cải thiện trong những năm gần đây. Sự cạnh tranh giữa hai phần mềm hiện đã trở nên gay gắt hơn và việc chọn phần mềm nào là tốt nhất cho bạn và dự án của bạn trở nên khó khăn hơn.

Sự khác biệt chính giữa Figma và Adobe XD là giá cả . Mặc dù Figma miễn phí cho người dùng cá nhân và bạn chỉ phải trả tiền nếu muốn có quyền truy cập vào các tính năng như đồng nghiệp, nhưng đối với Adobe XD, bạn phải trả tiền trước khi sử dụng . Dưới đây, chúng tôi sẽ đề cập đến điểm tỏa sáng của từng cái và cái nào tốt hơn cho các trường hợp cụ thể của bạn.

Nền tảng được hỗ trợ

Figma

• Máy tính để bàn - Windows, Mac, Linux ( ứng dụng Figma-linux cung cấp hỗ trợ);
• Trình duyệt trên máy tính để bàn - Việc chỉnh sửa có thể được thực hiện trong bất kỳ trình duyệt hỗ trợ WebGL nào - ChromeOS, Linux và các hệ thống dựa trên Phân phối phần mềm Berkeley (BSD). Khách hàng cũng có thể xem trước các bản nháp trong trình duyệt máy tính để bàn;
• Trình duyệt thiết bị di động - iOS và Android khả dụng ở chế độ chỉ xem; hơn nữa Figma được hỗ trợ trên Safari, Chrome và Firefox;
• Ứng dụng dành cho thiết bị di động - iOS và Android có ứng dụng Figma Mirrow mô phỏng thiết bị di động.

adobe XD

• Máy tính để bàn - Windows và Mac;
• Trình duyệt trên máy tính để bàn và thiết bị di động - XD tạo bản xem trước của các thiết kế trong trình duyệt để khách hàng có thể đưa ra phản hồi;
• Ứng dụng dành cho thiết bị di động - iOS và Android có ứng dụng Adobe XD để xem trước trực tiếp.

Figma

• Nhiều người chơi - Bất kỳ số lượng người dùng nào cũng có thể đăng nhập và chỉnh sửa tài liệu cùng một lúc;
• Chế độ quan sát - Bạn có thể phản chiếu màn hình của đồng đội để có thể nhìn thấy khi họ di chuyển xung quanh tài liệu hoặc bản nháp. Điều này hữu ích nếu bạn muốn xem một khách hàng di chuyển qua một nguyên mẫu và xem liệu có bất kỳ sai sót nào không;
• Thư viện nhóm - Bạn có thể xây dựng các hệ thống thiết kế cho công việc của riêng mình, bao gồm các thành phần, bảng màu và kiểu phông chữ có thể tái sử dụng, đồng thời cung cấp các hệ thống thiết kế đó cho cả nhóm của bạn để mọi người làm việc với các yếu tố giống nhau;
• Tự động lưu và đồng bộ hóa - Mọi sửa đổi đối với tài liệu và hệ thống thiết kế sẽ được lưu và đồng bộ hóa ngay lập tức. Nếu một thay đổi xảy ra trong khi một thành viên trong nhóm đang làm việc trên một dự án được chia sẻ, họ sẽ được thông báo, đảm bảo rằng tất cả các thành viên trong nhóm luôn được cập nhật. Sẽ không cần tải lên, tải xuống hoặc hợp nhất tệp thủ công.

adobe XD

• Đồng chỉnh sửa - Có khả năng beta thiết kế "đồng chỉnh sửa" hợp tác kể từ tháng 11 năm 2019, hoạt động tương tự như tính năng "nhiều người chơi" của Figma. Sự khác biệt duy nhất có thể nhìn thấy giữa hai loại hiện tại là trên Adobe XD, bạn không nhìn thấy con trỏ trực tiếp của các nhà thiết kế khác đang làm việc trên tài liệu;
• Nội dung được liên kết - Khi tài liệu được lưu vào đám mây, các thành phần và kiểu của nó có thể được truy cập thông qua liên kết;
• Thư viện đám mây sáng tạo - Bạn có thể sắp xếp và truy cập nội dung thông qua Thư viện CC; điều này có thể giống với các thư viện nhóm của Figma, nhưng các tính năng hỗ trợ cộng tác không tốt bằng trong XD.

figma

• Nó sử dụng các khung hoạt động như các thùng chứa đại diện cho các khung nhìn và thiết kế các thành phần phụ như nút, phần nội dung, thành phần điều hướng, v.v. Các khung có tất cả chức năng mà các bảng vẽ bên dưới có và cũng có thể mang lại chức năng bổ sung cho các thành phần này, chẳng hạn như lưới và bố cục tự động .

adobe XD

• Nó sử dụng các bảng vẽ cũng hoạt động như các thùng chứa đại diện cho các khung nhìn chỉ chứa các thiết kế - ví dụ: màn hình điện thoại so với màn hình máy tính xách tay. Trong quá trình tạo mẫu, bạn có thể liên kết các bảng vẽ này với nhau để mô phỏng chuyển động của người dùng trong một trang web hoặc ứng dụng. Mặc dù các khung có thể làm được mọi thứ mà các bản vẽ nghệ thuật có thể làm, nhưng các bản vẽ XD không thể làm được mọi thứ mà các khung hình Figma có thể làm được.

tạo mẫu

Cả Figma và Adobe XD đều được sử dụng để tạo mẫu, nhưng XD tốt hơn một chút vì nó có một bộ kích hoạt hỗ trợ nhiều loại thiết kế giao diện người dùng hơn. Hãy xem qua.

figma

Nó cho phép nhiều tương tác trên mỗi phần tử miễn là chúng khác nhau:

gây nên

• bằng cách nhấp chuột
• Khi kéo
• trong khi lơ lửng
• trong khi nhấn
• chuột vào
• Tỷ lệ bạn biết
• Di chuột xuống
• di chuột lên
• sau khi trì hoãn

hành động

• Điều hướng đến (khung - sử dụng để di chuyển giữa các khung loại bảng vẽ)
  Mở lớp phủ (khung)
• Hoán đổi với (khung - sử dụng để hoán đổi trong các khung loại thành phần thay thế, ví dụ: các nút, xem phần tiếp theo để biết thêm thông tin)
• Quay trở lại
• đóng lớp phủ
• mở URL

chuyển tiếp

• Lập tức
• Để hòa tan
• Smart Animate (xem phần sau)
• Di chuyển
• Thay đổi
• Đẩy
• cầu trượt
• trượt ra

tạo điều kiện

• Xoa dịu
• Thư giãn
• Dễ dàng vào và ra
• tuyến tính

adobe XD

Cho phép nhiều tương tác trên mỗi mục, chẳng hạn như tương tác di chuột và tương tác nhấp chuột:

gây nên

• Vỗ nhẹ
• Lôi kéo
• nổi
• nhịp độ
• Tiếng nói
• lá hẹ
• Điều khiển

hành động

• chuyển tiếp
• tự động sinh động
• lớp phủ
• phát lại giọng nói
• clipboard trước đó
• thay đổi trạng thái

chuyển tiếp

• Phải
• Bên trên
• Dưới
• Để hòa tan
• Trượt sang trái
• vuốt sang phải
• trượt lên
• vuốt xuống
• đẩy sang trái

tạo điều kiện

• Không có (còn được gọi là tuyến tính)
• Thư giãn
• Xoa dịu
• Dễ dàng vào và ra
• hình chụp
• Xoăn
• nảy

Chúng ta có thể kết luận rằng Adobe XD cho phép nhiều hơn một tương tác trên mỗi phần tử , cho phép tạo các nguyên mẫu có chức năng gần với hành vi của mọi người hơn trong trình duyệt.

Ra tay

figma

Như đã đề cập, Figma có thể tạo CSS, Swift cho iOS và XML cho Android . Nó cũng cho phép bạn sao chép trực tiếp CSS hoặc SVG. Ngoài ra, nếu có thay đổi trong tài liệu, mã sẽ tự động được tạo lại .

adobe XD

XD tạo mã CSS , nhưng trước tiên bạn cần tạo liên kết nhà phát triển rồi mở liên kết đó trong trình duyệt. Không giống như Figma, nếu tài liệu thay đổi ở đây, bạn sẽ cần tạo lại liên kết và cập nhật nó .

Figma có tốt hơn Adobe XD không?

Câu trả lời ngắn gọn: có . Figma - được cho là - công cụ thiết kế duy nhất mà các nhóm thiết kế chọn vì tính năng cộng tác nhóm tuyệt vời của nó . Nó hợp lý hóa quy trình thiết kế và giúp các nhà thiết kế cũng như các nhóm làm việc cùng nhau hiệu quả hơn vì bạn có thể cộng tác trực tiếp với các đồng đội của mình. Hơn nữa, các nhà thiết kế và nhóm được hưởng lợi rất nhiều từ Figma vì:

• Nó miễn phí và bạn có thể truy cập nó mà không cần phải tải xuống ứng dụng;
• Hoạt động trên mọi nền tảng;
• Hợp tác đơn giản và quen thuộc;
• Chia sẻ không rắc rối và linh hoạt;
• Các tệp nhúng cung cấp khả năng cập nhật theo thời gian thực;
• Tạo mẫu đơn giản và trực quan;
• Chuyển nhà phát triển dễ dàng;
• Thư viện nhóm là nơi lý tưởng để thiết kế hệ thống, cho phép bất kỳ ai có quyền truy cập sử dụng các phiên bản mới nhất.

Phần kết luận

Cuộc chiến giữa Figma và Adobe XD sẽ tiếp tục và chắc chắn họ đang thúc đẩy lẫn nhau để cải thiện và đẩy mạnh trò chơi của họ. Rất thường xuyên, giờ đây chúng ta thấy các tính năng độc đáo của cái này xuất hiện trong cái kia, khiến các nhà thiết kế khó quyết định nên chọn cái nào để tạo ra một sản phẩm chất lượng cao.

Nhưng nếu sự hợp tác là quan trọng đối với bạn và nhóm của bạn, thì Figma là lựa chọn tốt nhất cho bạn . Nó được thiết kế từ đầu với tinh thần làm việc theo nhóm và do đó, không phần mềm nào khác có thể sớm cạnh tranh với nó. Nó cũng vượt trội so với Adobe XD bằng cách tốt hơn về khung hình so với bảng vẽ, bố cục tự động, khả năng phản hồi và thiết kế đồ họa/thiết kế giao diện người dùng tổng thể.

Mặt khác, bạn có nhiều cơ hội hơn với Adobe XD nếu bạn đã quen với hệ sinh thái Adobe và trong Creative Cloud. Ngoài ra, Adobe XD tốt hơn một chút trong việc tạo nguyên mẫu khi có hoạt ảnh và giọng nói tự động, giúp bạn dễ dàng chính xác hơn.

Bài viết gốc lấy từ: https://www.imaginarycloud.com

#figma #figma 

Pride At Figma

For Maker Week in May of 2021, we asked Figmates across the company to share what Pride means to them. Here’s what they had to say…

#figma