How to Design Web Apps with Midjourney in Figma

Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma. Full course: https://designcode.io/web-app 

Web App design is the creation of visually appealing and user-friendly interfaces for web applications. It involves principles of UX, graphic design, typography, color theory, and responsive design to create a seamless user experience. Good design is crucial for a web app's success, affecting user engagement and satisfaction.

0:00 Intro
3:14 UI Patterns & Wireframing
10:31 Colors & Gradients
19:39 Typography & Text Styles
27:02 Icons & Avatars
33:49: Midjourney

Figma file: https://www.figma.com/community/file/1218595052516978368 

Wallpapers: https://www.figma.com/community/file/1217481301531252836/Abstract-8K-Wallpapers 

Subscribe: https://www.youtube.com/@DesignCodeTeam/featured 

#figma   #uidesign 

Как удалить фон с изображения в Figma

В течение многих лет Photoshop был основным инструментом для решения многих задач редактирования изображений, таких как удаление фона с изображения . Но в настоящее время есть новые мощные возможности для редактирования изображений. Теперь мы можем делать гораздо больше с инструментами дизайна пользовательского интерфейса, такими как Figma, включая удаление фона изображения. В этом кратком совете мы покажем, как удалить фон изображения с помощью Figma.

Для этого нам нужно установить плагин Figma.

Выберите изображение, щелкните значок «Ресурсы» на горизонтальной панели инструментов, перейдите на вкладку «Плагины», выполните поиск «Icons8 Background Remover», а затем нажмите кнопку «Выполнить » . Виола!

Если изображение не подходит для удаления фона, измените его заливку на заливку нового изображения, нажав кнопку « Выбрать изображение» . Если нам нужно отредактировать изображение (например, изменить способ его размещения в ограничительной рамке, повернуть его или настроить его экспозицию), мы также можем сделать это отсюда.

Эта статья представляет собой краткий отрывок из Руководства дизайнера по Figma , доступного на SitePoint Premium.

Оригинальный источник статьи: https://www.sitepoint.com/

#figma #image #background #remove 

如何从 Figma 中的图像中删除背景

多年来，Photoshop 一直是许多图像编辑任务的首选工具，例如从图像中删除背景。但现在有强大的图像编辑新选项。我们现在可以使用像 Figma 这样的 UI 设计工具做更多的事情，包括删除图像的背景。在这个快速提示中，我们将展示如何使用 Figma 删除图像的背景。

为此，我们需要安装 Figma 插件。

选择图像，单击水平工具栏中的“资源”图标，切换到“插件”选项卡，搜索“Icons8 Background Remover”，然后单击“运行”按钮。中提琴！

如果图像不适合去除背景，请通过单击“选择图像”按钮将其填充更改为新图像的填充。如果我们需要编辑图像（例如更改它适合边界框的方式，或旋转它，或微调其曝光），我们也可以从这里进行。

本文是Figma 设计师指南的简短摘录，可在 SitePoint Premium 上获得。

文章原文出处：https: //www.sitepoint.com/

#figma #image #background #remove 

How to Remove The Background From an Image in Figma

For many years, Photoshop was the go-to tool for many image editing tasks such as removing the background from an image. But nowadays there are powerful new options for image editing. We can do a lot more with UI design tools like Figma now, including removing an image’s background. In this quick tip, we’ll show how to remove an image’s background using Figma.

To accomplish this, we’ll need to install a Figma plugin.

Select the image, click on the “Resources” icon in the horizontal toolbar, switch to the Plugins tab, do a search for “Icons8 Background Remover”, and then click on the Run button. Viola!

If the image isn’t suitable for background removal, change its Fill to that of a new image by clicking on the Choose image button. If we need to edit the image (such as changing how it fits into the bounding box, or rotating it, or fine-tuning its exposure), we can also do that from here.

This article is a short extract from The Designer’s Guide to Figma, available on SitePoint Premium.

Original article source at: https://www.sitepoint.com/

#figma #image #background #remove 

Figma Masterclass | Figma Tutorial for Beginners

Figma is a browser-based, collaborative user interface design tool that lets users work together to create vibrant and interactive prototypes. Since its release in 2016, Figma has become a popular tool both in the web design industry and in online communities. Users can collaborate and share templates, designs, and widgets with millions of users across the globe. In this overview, you’ll learn more about what Figma is, what it can do, who uses it, and how to learn it to determine how to add this skill to your professional toolbox.
 

Timestamps:
00:00 - What we will be doing?
01:00 - Figma Masterclass
01:34 - Assessing the Tesla.com
02:40 - Download the follow along file
02:45 - Preparation stage (Setup global styles, components and more)
22:45 - Design stage (Grid system, autolayout, constraints and more)
38:15 - Prototyping stage (Animations, fixed position elements and more)

File file:
https://thedesignership.gumroad.com/l/uqppdq 

Subscribe: https://www.youtube.com/@Mizko/featured 

#figma 

Как создать собственный значок кнопки в Figma

Иконопись — утерянное искусство. Иллюстрация требует очень много времени, а ресурсов уже предостаточно. Так что не всегда стоит изобретать велосипед. Но нам может понадобиться определенный художественный стиль, или используемая нами структура значков может не иметь нужного значка, поэтому стоит немного углубиться в то, как иллюстрация работает в Figma. В этом уроке мы узнаем, как рисовать и управлять векторами в Figma, создавая значок в форме сердца, который будет сопровождать кнопку.

Начните с создания рамки 16×16, которая будет ограничивающей рамкой для нашей иконки. Пол Уилшоу объясняет, почему лучше всего использовать 16×16, в своей статье о дизайне иконок.

Затем щелкните значок + рядом с «Сеткой макета» на панели «Дизайн», чтобы добавить сетку в рамку, щелкните значок «Настройки сетки макета», а затем измените «Размер», чтобы сделать отдельные квадратные пиксели более четкими 1. . Чтобы значок отображался четко при большинстве размеров и разрешений экрана, цель будет состоять в том, чтобы максимально выровнять значок с линиями сетки.

Теперь о самой иконе. Начните с создания формы прямоугольника и укажите «W» как 16и «H» как 10, а затем щелкните значок «Независимые углы», прежде чем указывать радиусы углов как 0, 5, 5и 0в этом порядке (то есть по часовой стрелке, начиная с верхний левый угол).

Затем продублируйте слой и измените «Вращение» на 90.

После этого привяжите слой к левому краю фрейма, а другой слой к нижнему краю фрейма, а затем, выбрав оба слоя, щелкните значок «Выбор объединения» на горизонтальной панели инструментов, чтобы объединить слои в один Слой.

Измените «Вращение» на 45— и форма сердца готова.

Прежде чем мы поместим форму сердца в рамку, добавьте обводку (границу), щелкнув значок + рядом с «Обводка» на панели «Дизайн», выбрав 2«Ширина обводки». Позже это даст нам возможность использовать обведенные значки, а также заполненные значки.

Примечание. Чтобы отображать значки другого размера, лучше масштабировать их, а не изменять их размер. Разница в том, что инструмент «Масштаб» — под значком «Инструменты перемещения» на горизонтальной панели инструментов (K) — также пропорционально масштабирует такие размеры, как ширина обводки, в то время как изменение размера не влияет на такие размеры, как ширина обводки.

Далее щелкните правой кнопкой мыши значок, а затем выберите «Свести» (command + E / ctrl + E). Мы увидим, что хотя поворот больше не действует, слой остается таким, каким мы его установили, что означает, что теперь мы можем изменять его размер по горизонтали и вертикали, а не по диагонали (что дает странный эффект).

После этого щелкните значок «Сохранить пропорции» на панели «Дизайн», установите для наибольшего размера (который должен быть «W») значение 16, еще раз щелкните значок «Сохранить пропорции» (чтобы размеры больше не были ограничены) , округлите «H» до 14(чтобы значок заполнял только полные пиксели ), перетащите его в центр кадра, а затем щелкните значок — в разделе «Заливка», чтобы удалить заливку.

При разработке значков мы должны стараться использовать все доступное пространство фрейма, чтобы при необходимости несколько значков можно было выровнять по горизонтали или вертикали. Однако это не всегда возможно, поэтому при необходимости можно немного изменить размер значков. Это не влияет на ширину обводки, поэтому нам не нужно беспокоиться о том, что они будут выглядеть непоследовательно. Чтобы значок масштабировался вместе с фреймом при изменении размера фрейма, измените «Слева» и «Сверху» на «Масштаб» на панели «Дизайн» (в разделе «Ограничения»).

Наконец, выберите рамку, а затем щелкните значок «Изменить размер по размеру», чтобы обрезать пустое пространство, тем самым изменив размер рамки.

Теперь у нас есть полная иконка! Мы также можем попробовать свои силы в рисовании с нуля и/или использовании фигур и их редактировании. Тем не менее, это требует довольно много навыков и времени, чтобы научиться . Сам дизайн иконок также требует очень много времени, особенно когда существует так много бесплатных дизайнерских ресурсов. В Figma есть видеоруководство , которое проведет нас через это, но плагин Font Awesome , вероятно, является лучшим решением для реализации иконок на сегодняшний день.

Эта статья представляет собой краткий отрывок из Руководства дизайнера по Figma , доступного на SitePoint Premium.

Оригинальный источник статьи: https://www.sitepoint.com/

#figma #button #icon 

如何在 Figma 中创建自定义按钮图标

图像学是一门失传的艺术。插图非常耗时，而且已经有丰富的资源。因此，重新发明轮子并不总是值得的。但是我们可能需要一种特定的艺术风格，或者我们使用的图标框架可能没有我们想要的图标，所以值得深入研究一下插图在 Figma 中的工作原理。在本教程中，我们将学习如何在 Figma 中绘制和操作矢量，同时创建一个心形图标来伴随按钮。

首先创建一个 16×16 的框架，这将是我们图标的边界框。Paul Wilshaw在他关于图标设计的文章中解释了为什么最好使用 16×16 。

接下来，点击设计面板中“布局网格”旁边的+图标，为框架添加网格，点击“布局网格设置”图标，然后将“大小”更改为，使单个方形像素更1清晰. 为确保图标在大多数尺寸和屏幕分辨率下都能清晰显示，目标是尽可能使图标与网格线对齐。

现在是图标本身。首先创建一个矩形并将“W”指定为 ，将“ 16H”指定为10，然后在将角半径指定为 、 、 之前单击“独立0角5”图标左上角）。50

接下来，复制图层并将“旋转”更改为90。

之后，将Layer吸附到Frame的左边缘，将另一个Layer吸附到Frame的底部边缘，然后在两个Layer都选中的情况下，单击水平工具栏中的“Union selection”图标，将Layers融合成一个单一的层。

将“旋转”更改为45——心形就完成了。

在我们使心形适合框架之前，通过单击“设计”面板中“描边”旁边的+图标添加描边（边框） ，2选择“描边宽度”。稍后，这将为我们提供使用轮廓图标和填充图标的机会。

注意：要以不同的大小显示图标，最好缩放它们而不是调整它们的大小。不同之处在于，水平工具栏 (K) 中“移动工具”图标下的缩放工具也会按比例缩放笔划宽度等尺寸，而调整尺寸不会影响笔划宽度等尺寸。

接下来，右键单击图标，然后选择Flatten (command + E / ctrl + E)。我们会看到，虽然旋转不再有效，但图层仍然是我们设置它的方式，这意味着我们现在可以水平和垂直而不是对角线（这会产生奇怪的效果）调整它的大小。

之后，点击设计面板中的“Constrain proportions”图标，将最大尺寸（应该是“W”）设置为16，再次点击“Constrain proportions”图标（这样尺寸就不再受限了） ，将“H”向下舍入14（以便图标仅填充完整像素），将其拖入框架的中心，然后单击“填充”部分中的“—”图标以删除填充。

在设计图标时，我们应该尽量使用所有可用的 Frame 空间，以便多个图标可以根据需要水平或垂直对齐。然而，这并不总是可行的，所以必要时可以稍微调整图标的大小。这样做不会影响描边宽度，因此我们无需担心它们看起来不一致。为确保在我们调整框架大小时图标随框架缩放，请在设计面板（在约束部分）中将“左”和“上”更改为“缩放”。

最后，选择框架，然后单击“调整大小以适合”图标以修剪负空间，从而调整框架的大小。

我们现在有了完整的图标！我们还可以尝试从头开始绘制和/或使用形状并对其进行编辑。但是，它确实需要相当多的技能和时间来学习。图标设计本身也非常耗时，尤其是在有这么多免费设计资源的情况下。Figma 有一个视频教程可以引导我们完成这个过程，但Font Awesome 插件可能是当今实现图标的最佳解决方案。

本文是Figma 设计师指南的简短摘录，可在 SitePoint Premium 上获取。

文章原文出处：https: //www.sitepoint.com/

#figma #button #icon 

How to Creat A Custom Button Icon in Figma

Iconography is a lost art. Illustration is super time-consuming, and there’s an abundance of resources out there already. So it’s not always worth reinventing the wheel. But we may need a specific art style, or the icon framework we’re using may not have the icon we want, so it’s worth diving into how illustration works in Figma a little bit. In this tutorial, we’ll learn how to draw and manipulate vectors in Figma as we create a heart-shaped icon to accompany the button.

Start by creating a 16×16 Frame, which will be the bounding box for our icon. Paul Wilshaw explains why it’s best to use 16×16 in his write-up on icon design.

Next, click on the + icon next to “Layout grid” in the Design panel to add a Grid to the Frame, click on the “Layout grid settings” icon, and then change the “Size” to 1 to make the individual square pixels clearer. To ensure the icon displays clearly at most sizes and screen resolutions, the objective will be to align the icon with the grid lines as much as possible.

Now for the icon itself. Start by creating a Rectangle shape and specifying the “W” as 16 and “H” as 10, and then click on the “Independent corners” icon before specifying the corner radii as 0, 5, 5, and 0 in that order (that is, clockwise starting from the top-left corner).

Next, duplicate the Layer and change the “Rotation” to 90.

After that, snap the Layer to the left edge of the Frame and the other Layer to the bottom edge of the Frame, and then, with both Layers selected, click on the “Union selection” icon in the horizontal toolbar to fuse the Layers into a single Layer.

Change the “Rotation” to 45—and that’s the heart shape done.

Before we make the heart shape fit into the Frame, add a Stroke (border) by clicking on the + icon next to “Stroke” in the Design panel, choosing 2 for the “Stroke width”. Later on, this will offer us the opportunity to use outlined icons as well as filled icons.

Note: to display icons at a different size, it’s best to scale them rather than resize them. The difference is that the Scale tool—under the “Move tools” icon in the horizontal toolbar (K)—also scales sizes such as Stroke width proportionally, whereas resizing doesn’t affect sizes such as Stroke width.

Next, right-click on the icon, and then choose Flatten (command + E / ctrl + E). We’ll see that, while the Rotation is no longer in effect, the Layer remains how we set it, which means that we can now resize it horizontally and vertically instead of diagonally (which yields an odd effect).

After that, click on the “Constrain proportions” icon in the Design panel, set the largest dimension (which should be “W”) to 16, click on the “Constrain proportions” icon once more (so that the dimensions are no longer constrained), round the “H” down to 14 (so that the icon only fills full pixels), drag-snap it into the center of the Frame, and then click on the — icon in the Fill section to remove the Fill.

When designing icons, we should try to use all available Frame space so that multiple icons can be aligned horizontally or vertically if needed. However, this isn’t always feasible, so it’s okay to resize icons slightly when necessary. Doing so doesn’t affect Stroke width, so we won’t need to worry about them looking inconsistent. To ensure that an icon scales with a Frame when we resize the Frame, change the “Left” and “Top” to “Scale” in the Design panel (in the Constraints section).

Finally, select the Frame and then click on the “Resize to fit” icon to trim the negative space, thus resizing the Frame.

We now have complete icon! We can also try our hand at drawing from scratch and/or using shapes and editing them. However, it does require quite a bit of skill and time to learn. Icon design itself is also very time-consuming, especially when there are so many free design resources out there. Figma has a video tutorial that walks us through this, but the Font Awesome plugin is probably the best solution for implementing icons today.

This article is a short extract from The Designer’s Guide to Figma, available on SitePoint Premium.

Original article source at: https://www.sitepoint.com/

#figma #button #icon 

A Simple Flutter Chat UI Based on Figma Design

Chat-UIkit-Flutter

This is simple chat UI based on Figma design

Setup Project

Step 01:

run flutter pub get

Step 02:

flutter packages pub run build_runner build --delete-conflicting-outputs

Step 03:

flutter pub run

Figma link

https://www.figma.com/file/THrqu45td3VP31SgV1CZUf/chat?node-id=0%3A1&t=SlYNhggb0DTRn8UV-1

Demo image

.gitignore

# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/
migrate_working_dir/

# IntelliJ related
*.iml
*.ipr
*.iws
.idea/

# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
#.vscode/

# Flutter/Dart/Pub related
**/doc/api/
**/ios/Flutter/.last_build_id
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/
/lib/gen/

# Symbolication related
app.*.symbols

# Obfuscation related
app.*.map.json

# Android Studio will place build artifacts here
/android/app/debug
/android/app/profile
/android/app/release

.metadata

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled.

version:
  revision: eb6d86ee27deecba4a83536aa20f366a6044895c
  channel: stable

project_type: app

# Tracks metadata for the flutter migrate command
migration:
  platforms:
    - platform: root
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: android
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: ios
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: linux
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: macos
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: web
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
    - platform: windows
      create_revision: eb6d86ee27deecba4a83536aa20f366a6044895c
      base_revision: eb6d86ee27deecba4a83536aa20f366a6044895c

  # User provided section

  # List of Local paths (relative to this file) that should be
  # ignored by the migrate tool.
  #
  # Files that are not part of the templates will be ignored by default.
  unmanaged_files:
    - 'lib/main.dart'
    - 'ios/Runner.xcodeproj/project.pbxproj'

Download details:

Author: KavinduDissanayake
Source code: https://github.com/KavinduDissanayake/Chat-UIkit-Flutter

#flutter #dart #figma 

Figma 和 Adob​​e XD 的区别

在本文中，您将了解 Figma 和 Adob​​e XD 之间的区别。选择像 Figma 这样的工具而不是 Adob​​e XD很重要，因为它会影响工作流程、整体体验和客户协作——这是 UX 设计师一起使用的最重要的工具。

欢迎来到 UX 设计师的生活，在最佳用户界面 (UI) 和用户交互 (UI) 设计软件方面，您有多种选择。 

如果您是 UX/UI 专家，请继续阅读以了解更多有关Figma x Adob​​e XD 的工作原理、功能以及最适合您的产品的信息。

什么是菲格玛？

Figma 是一个浏览器界面、矢量设计和软件。许多设计师认为它是支持团队协作设计项目的最佳应用程序。Figma 提供了为交付过程创建完整的网页设计、原型和代码生成所需的所有工具和元素。

Figma 有什么用？

尽管 Figma 与其他原型制作工具非常相似，但它的主要区别在于团队合作的能力。但保持简单，Figma：

• 它是支持产品开发过程的在线用户界面设计工具。
• 允许您免费创建图标、社交媒体图形、演示文稿等；
• 使用数百种字体、形状和颜色来创建动画；
• 为更基于事实的草案创建自适应模型；
• 允许您创建自己的内容库或使用其他创作者的免费库；
• 使用强大的功能自定义您的图形设计资源；
• 直接在浏览器中设计，全部在线且免费；
• 您可以与您的团队一起编辑同一个文件。

因此，Figma 被认为：

原型制作工具

• 允许您在一个工具中设计、制作原型和展示所有内容；
• 所有设计更新立即反映在原型中，无需导出同步；
• 您可以通过共享链接从您的团队获得反馈；
• 您可以运行移动原型以进行更强大的用户测试；
• 他最近开始做智能动画；
• 已经有一系列针对 Apple Watch 优化的不同屏幕尺寸的原型。

切换代码生成器

• 开发者可以直接从设计文件中测试、复制和导出 CSS，并适配 iOS 和 Android；
• 他们可以使用“实时设备预览”在移动设备上镜像项目；
• 他们还可以调整框架大小以测试布局如何适应不同的屏幕尺寸。

重要的是， Figma 得到了大量设计师和开发人员社区的支持，他们提供插件来改进功能和简化工作流程。每个人都可以贡献和分享。

什么是 Adob​​eXD？

Adobe XD 是一种矢量 UI/UX 设计工具，可让您创建从智能手表应用程序到完整网站的一切内容。Adobe XD 承诺为仍在使用 Photoshop 或 Illustrator 设计用户界面的专业人士带来新鲜空气，因为它是 Adob​​e 唯一的原型设计工具。

Adobe XD 的用途是什么？

Adobe XD 在构建时考虑到了Web 和移动设备，设计团队利用 Adob​​e XD 的强大功能进行端到端界面设计流程。

在应用方面，Adobe XD 用于：

网站设计。从信息架构到布局和原型设计，网站设计和 Adob​​e XD 可以很好地协同工作。概念和想法很容易与生产力功能（如堆栈、填充和重复网格）相结合，以定义网页的导航、滚动和其他模式；

应用程序设计——开发需要动态交互、多种导航模式和不同屏幕尺寸（包括数字广告牌等不太常见的尺寸）的移动应用程序、桌面应用程序，甚至是 Web 应用程序。Adobe XD 通过响应式大小调整、流行设备的预构建绘图尺寸以及拖放触发器和自动动画等原型功能等功能简化了应用程序的创建；

游戏设计——您可以通过连接支持的蓝牙游戏控制器直接在 Adob​​e XD 中显示和查看菜单、游戏设置和其他界面元素；

创建语音助手。Adobe XD 可让您制作具有强大语音命令的虚拟助手原型，连接到 Amazon Alexa 和 Google Assistant 可让您进行试验。

在功能方面，Adobe XD 在很多方面与 Figma 相似：

用户界面设计——通过与 Photoshop 和 Illustrator 等 Creative Cloud 应用程序的集成，您可以轻松获取内容并访问完成最佳工作所需的所有工具；

UX 设计——您可以快速迭代、测试交互和流程，并获得更真实的差距视图，以便您可以在发现它们后立即修复它们；

Wireframing是一个用户界面包，可以轻松创建交互式线框以测试您的设计和查看用户流程；

原型制作——Adobe XD 中的高级功能，例如自动动画和语音生成，可以轻松制作消费者可以探索和互动的原型设计，从而改善用户体验；

开发者交接——Adobe XD 的共享模式让您从一开始就与开发团队协作。无论您是使用画外音录音来浏览您的项目还是分享开发细节，XD 都能让您保持联系。

团队合作。实时共同创作和云存储让您的​​团队轻松协作。

Figma 与 Adob​​e XD：主要区别

自 2016 年推出 Adob​​e XD 以来，Figma 和 Adob​​e XD一直在相互竞争。起初竞争并不激烈，早期版本的 XD 缺少一些重要功能，但近年来情况有所改善。两个程序之间的竞争现在已经加剧，选择最适合您和您的项目的程序变得更加困难。

Figma 和 Adob​​e XD 之间的主要区别在于价格。虽然Figma对个人用户是免费的，只有在你想访问类似同行的功能时才需要付费，但对于Adob​​e XD，你必须先付费才能使用. 下面，我们将分解每一种的光彩，以及哪一种最适合您的具体情况。

支持的平台

菲格玛

• 桌面——Windows、Mac、Linux（Figma-linux应用程序提供支持）；
• 桌面浏览器- 可以在任何支持 WebGL 的浏览器中进行编辑 - 在 ChromeOS、Linux 和基于 Berkeley Software Distribution (BSD) 的系统上。客户还可以在桌面浏览器中查看草稿；
• 移动浏览器- iOS 和 Android 仅在视图中可用；此外，Safari、Chrome 和 Firefox 都支持 Figma；
• 移动应用程序——iOS 和 Android 有一个模拟移动设备的 Figma Mirrow 应用程序。

AdobeXD

• 桌面- Windows 和 Mac；
• 桌面和移动浏览器- XD 创建设计的浏览器内预览，供客户提供反馈；
• 移动应用程序——iOS 和 Android 有用于实时预览的 Adob​​e XD 应用程序。

菲格玛

• 多人游戏——任意数量的用户可以同时登录和编辑文档；
• 观察模式。您可以镜像队友的屏幕，这样他们就可以看到他们如何浏览文档或草稿。如果您想查看客户如何完成原型并查看是否存在任何缺点，这将很有用；
• 共享库——您可以为您的工作创建自己的设计系统，包括可重复使用的组件、调色板和字体样式，并将它们提供给您的整个团队，以便每个人都使用相同的元素；
• 自动保存和同步。对文档和设计系统的任何更改都会立即保存并同步。如果在团队成员处理共享项目时发生更改，他们会收到通知，确保所有团队成员都是最新的。无需手动上传、下载或合并文件。

AdobeXD

• 截至 2019 年 11 月，共同编辑很可能是共同编辑的 Beta 设计，类似于 Figma 的“多人游戏”功能。目前两者之间唯一明显的区别是，在 Adob​​e XD 中，您看不到指向其他正在处理文档的设计师的直接指针；
• 链接内容——当文档存储在云端时，可以通过链接访问其元素和样式；
• Creative Cloud Libraries - 您可以通过 CC Libraries 组织和访问内容；它可能类似于 Figma 团队库，但协作功能不如 XD。

图玛

• 它使用frameworks，它充当表示视图和设计子组件（例如按钮，内容部分，导航项等）的容器。框架具有画板具有的所有功能，并且还可以为这些组件提供附加功能，例如网格. 和自动布局。

AdobeXD

• 它使用画板，它也充当表示纯设计视图的容器，例如手机屏幕和笔记本电脑屏幕。在原型制作过程中，您可以将这些画板链接在一起以模拟用户在网页或应用程序上的移动。虽然框架可以做画板可以做的一切，但 XD 绘图不能做 Figma 框架可以做的一切。

创建模板

Figma 和 Adob​​e XD 都用于原型制作，但 XD 稍微好一点，因为它有一个触发器，支持更多类型的 UI 设计。让我们来看看。

图玛

它允许每个元素进行多次交互，只要它们不同即可：

原因

• 点击
• 拉动时
• 悬停时
• 当你按下
• 鼠标进入
• 评价你知道
• 鼠标按下
• 鼠标向上
• 延迟后

行为

• 转到（面板 - 用于在画布类型面板之间移动）
  打开叠加层（框架）
• 交换（框架 - 用于将框架替换为替代组件类型，例如按钮，请参阅下一节了解更多信息）
• 回来
• 关闭覆盖
• 打开网址

向前

• 立即地
• 溶解
• 智能动画（见下文）
• 移动
• 改变
• 推
• 它很苦
• 溜走

贡献

• 舒缓
• 放松
• 进出方便
• 线性的

AdobeXD

允许与同一元素进行多次交互，例如悬停和单击：

原因

• 拍
• 拖
• 漂浮的
• 速度
• 嗓音
• 葱叶
• 控制

行为

• 向前
• 自动动画
• 涂层
• 语音再现
• 上一个剪贴板
• 状态改变

向前

• 正确的
• 更高
• 以下
• 溶解
• 向左滑动
• 向右滑动
• 向上滑动
• 刷下
• 向左推

贡献

• 无（也称为线性）
• 放松
• 舒缓
• 进出方便
• 照片
• 卷曲
• 弹跳

可以得出结论，Adobe XD 允许与每个元素进行不止一次交互，从而允许创建功能更接近浏览器中人们行为的原型。

拉泰语

图玛

如前所述，Figma 可以为 iOS 生成 CSS、Swift 和为 Android 生成 XML。它还允许您直接复制 CSS 或 SVG。另外，如果文档中有更改，代码会自动重新生成。

AdobeXD

XD 生成 CSS 代码，但您首先需要创建一个开发人员链接，然后在浏览器中打开它。与 Figma 不同的是，如果此处的文档发生变化，您将需要重新创建链接并进行更新。

Figma 比 Adob​​e XD 好吗？

简短的回答：是的。Figma 可以说是设计团队选择的唯一设计工具，因为它具有强大的协作功能。这简化了设计过程，并帮助设计师和团队更有效地合作，因为您可以直接与队友协作。此外，Figma 为设计师和团队带来了巨大的价值，因为：

• 它是免费的，您无需下载应用程序即可访问它；
• 适用于任何平台；
• 简单熟悉的合作；
• 轻松灵活的交换；
• 内置文件提供实时更新；
• 简单直观的原型设计；
• 轻松切换开发人员；
• 共享库是开发系统的完美场所，允许任何有权访问的人使用最新版本。

结论

Figma 和 Adob​​e XD之间的战斗将继续，他们肯定会推动彼此改进和加强他们的比赛。很多时候，我们看到其中一个的独特性表现在另一个上，这让设计师很难决定选择哪一个来创造高质量的产品。

但如果协作对你和你的团队很重要，那么 Figma 是你的最佳选择。它是从头开始设计的，考虑到了团队合作，因此没有其他软件可以与之竞争。它还优于 Adob​​e XD，因为它具有比画板更好的帧处理、自动布局、响应能力和整体图形/UI 设计。

另一方面，如果您熟悉 Adob​​e 生态系统和 Creative Cloud，则 Adob​​e XD 有更多选择。此外，在自动语音和动画方面，Adobe XD 在原型制作方面做得更好，这使得精确度更容易。

原文摘自： https: //www.imaginarycloud.com

#adobe  #figma 

Разница между Figma и Adobe XD

В этой статье вы узнаете о разнице между Figma и Adobe XD. Выбор такого инструмента, как Figma, а не Adobe XD, важен, потому что он влияет на рабочий процесс, общий опыт и сотрудничество с клиентами — это самый важный инструмент, который дизайнеры UX используют вместе.

Добро пожаловать в жизнь дизайнера UX, где у вас есть много вариантов, когда речь идет о лучшем программном обеспечении для проектирования пользовательского интерфейса (UI) и взаимодействия с пользователем (UI). 

Если вы являетесь экспертом по UX/UI, читайте дальше, чтобы узнать больше о том, как работает Figma x Adobe XD , о его функциях и о том, какой из них лучше всего подходит для вас, чтобы предоставить вам высококачественный продукт.

Что такое Фигма?

Figma — это браузерный интерфейс, векторный дизайн и программное обеспечение . Многие дизайнеры считают его лучшим приложением для поддержки совместных дизайнерских проектов в команде. Figma предоставляет все инструменты и элементы, необходимые для создания полного веб-дизайна , прототипа и генерации кода для процесса доставки .

Для чего используется Фигма?

Хотя Figma очень похожа на другие инструменты для прототипирования, ее главное отличие — возможность работать в команде. Но будь проще, Фигма:

• Это онлайн- инструмент для разработки пользовательского интерфейса , который поддерживает процесс разработки продукта.
• Позволяет создавать значки , графику для социальных сетей , презентации и многое другое бесплатно;
• Получите доступ к сотням шрифтов, форм и цветов для создания анимации ;
• Создавайте адаптивные модели для более основанного на фактах черновика ;
• Позволяет создавать собственную библиотеку контента или использовать бесплатные библиотеки от других создателей;
• Настройте свои ресурсы графического дизайна с помощью мощных функций ;
• Дизайн прямо в браузере, все онлайн и бесплатно;
• Вы можете редактировать один и тот же файл вместе со своей командой.

Таким образом, Figma считается:

Инструмент прототипирования

• Позволяет проектировать, создавать прототипы и представлять все в одном инструменте;
• Все обновления дизайна сразу отражаются в прототипе без экспортной синхронизации;
• Вы можете получить обратную связь от своей команды, поделившись ссылкой;
• Вы можете запускать мобильные прототипы для более надежного пользовательского тестирования;
• Недавно он начал интеллектуальную анимацию;
• Уже есть серия прототипов с разными размерами экрана, оптимизированных для Apple Watch.

Генератор кода для хендовера

• Разработчики могут тестировать, копировать и экспортировать CSS прямо из файла дизайна и адаптировать его для iOS и Android;
• Они могут отражать проекты на мобильных устройствах, используя «предварительный просмотр устройства в реальном времени»;
• Они также могут настроить размер рамки, чтобы проверить, как макет будет адаптироваться к разным размерам экрана.

Важно отметить, что Figma поддерживается большим сообществом дизайнеров и разработчиков , которые предоставляют плагины для улучшения функциональности и упрощения рабочих процессов. Все могут внести свой вклад и поделиться .

Что такое AdobeXD?

Adobe XD — это векторный инструмент для проектирования пользовательского интерфейса/UX , который позволяет создавать все, от приложений для смарт-часов до полноценных веб-сайтов. Adobe XD обещает глоток свежего воздуха профессионалам, которые все еще используют Photoshop или Illustrator для разработки пользовательских интерфейсов, поскольку это единственный инструмент Adobe, позволяющий создавать прототипы.

Для чего используется Adobe XD?

Adobe XD создан с учетом работы в Интернете и на мобильных устройствах , и команды дизайнеров используют возможности Adobe XD для сквозного процесса разработки интерфейса.

Что касается приложений, Adobe XD используется для:

Дизайн веб-сайтов . Дизайн веб-сайтов и Adobe XD хорошо работают вместе, от информационной архитектуры до макета и прототипирования. Концепции и идеи легко объединяются с помощью функций повышения производительности, таких как стопки, заполнение и повторяющиеся сетки, для определения навигации, прокрутки и других шаблонов для ваших веб-страниц;

Дизайн приложений — разработка мобильных приложений, настольных приложений или даже веб-приложений, требующих динамического взаимодействия, нескольких шаблонов навигации и разных размеров экрана, включая даже менее распространенные размеры, такие как цифровые рекламные щиты. Adobe XD упрощает создание приложений с помощью таких функций, как адаптивное изменение размера, предварительно созданные размеры чертежа для популярных устройств и функции прототипа, такие как триггеры перетаскивания и автоматической анимации;

Дизайн игры — вы можете отображать и просматривать меню, игровые настройки и другие элементы интерфейса непосредственно в Adobe XD, подключив поддерживаемый игровой контроллер Bluetooth;

Создайте голосового помощника . Adobe XD позволяет создать прототип виртуального помощника с мощными голосовыми командами, а подключение к Amazon Alexa и Google Assistant позволяет экспериментировать.

Что касается функций, Adobe XD во многом похож на Figma:

Дизайн пользовательского интерфейса — благодаря интеграции с приложениями Creative Cloud, такими как Photoshop и Illustrator, вы можете легко получить свой контент и получить доступ ко всем инструментам, которые вам нужны для выполнения своей работы наилучшим образом;

UX-дизайн — вы можете быстро выполнять итерации, тестировать взаимодействия и процессы и получать более реалистичное представление о пробелах, чтобы вы могли исправить их, как только обнаружите их;

Wireframing — пакет пользовательского интерфейса, который позволяет легко создавать интерактивные каркасы для тестирования ваших проектов и просмотра пользовательских потоков;

Прототипирование — расширенные возможности Adobe XD, такие как автоматическое создание анимации и голосов, упрощают создание прототипов проектов, которые потребители могут исследовать и взаимодействовать с ними, что повышает удобство работы пользователей;

Передача разработчикам — режим совместного использования Adobe XD позволяет вам сотрудничать с командами разработчиков с самого начала. Независимо от того, используете ли вы записи голоса за кадром, чтобы пройтись по своим проектам или поделиться подробностями разработки, XD держит вас на связи.

Совместная работа в команде . Совместное редактирование в реальном времени и облачное хранилище упрощают совместную работу в вашей команде.

Figma против Adobe XD: ключевые отличия

С момента появления Adobe XD в 2016 году Figma и Adobe XD соревнуются друг с другом. Поначалу конкуренция не была жесткой: в ранних версиях XD отсутствовали некоторые важные функции, но в последние годы ситуация улучшилась. Конкуренция между двумя программами сейчас обострилась, и стало сложнее выбрать, что лучше для вас и вашего проекта.

Основное отличие Figma от Adobe XD — цена . В то время как Figma бесплатна для отдельных пользователей, и вам нужно платить только в том случае, если вы хотите получить доступ к таким функциям, как коллеги, для Adobe XD вы должны заплатить, прежде чем использовать . Ниже мы расскажем о блеске каждого из них и о том, какой из них лучше подходит для ваших конкретных обстоятельств.

Поддерживаемые платформы

Фигма

• Рабочий стол — Windows, Mac, Linux ( приложение Figma-linux обеспечивает поддержку);
• Браузер рабочего стола — редактирование можно выполнять в любом браузере с поддержкой WebGL — в системах на базе ChromeOS, Linux и Berkeley Software Distribution (BSD). Клиенты также могут просматривать черновики в настольном браузере;
• Мобильный браузер — iOS и Android доступны только в режиме просмотра; кроме того, Figma поддерживается в Safari, Chrome и Firefox;
• Мобильные приложения — iOS и Android имеют приложение Figma Mirrow, которое эмулирует мобильные устройства.

AdobeXD

• Рабочий стол — Windows и Mac;
• Настольные и мобильные браузеры — XD создает предварительный просмотр дизайнов в браузере, чтобы клиенты могли оставить отзыв;
• Мобильные приложения — iOS и Android имеют приложение Adobe XD для предварительного просмотра в реальном времени.

Фигма

• Многопользовательская игра — любое количество пользователей может одновременно входить в систему и редактировать документы;
• Режим наблюдения . Вы можете отразить экраны своих товарищей по команде, чтобы они могли видеть, как они перемещаются по документу или черновику. Это полезно, если вы хотите посмотреть, как клиент продвигается по прототипу, и посмотреть, есть ли какие-либо недостатки;
• Коллективные библиотеки — вы можете создавать свои собственные дизайн-системы для своей работы, включая многократно используемые компоненты, цветовые палитры и стили шрифтов, и делать их доступными для всей вашей команды, чтобы все работали с одними и теми же элементами;
• Автоматическое сохранение и синхронизация . Любые изменения в документе и дизайн-системе мгновенно сохраняются и синхронизируются. Если изменение происходит, когда член команды работает над общим проектом, он получает уведомление, гарантируя, что все члены команды будут в курсе последних событий. Не будет необходимости вручную загружать, скачивать или объединять файлы.

AdobeXD

• Совместное редактирование — скорее всего, бета-версия дизайна для совместного редактирования по состоянию на ноябрь 2019 года, аналогичная функции «многопользовательской игры» Figma. Единственная видимая разница между ними в настоящее время заключается в том, что в Adobe XD вы не видите прямых указателей других дизайнеров, работающих над документом;
• Связанный контент — когда документ сохраняется в облаке, доступ к его элементам и стилям можно получить по ссылке;
• Библиотеки Creative Cloud — вы можете упорядочивать содержимое и получать к нему доступ через библиотеки CC; это может быть похоже на командные библиотеки Figma, но функции совместной работы не так хороши, как в XD.

фигма

• Он использует фреймворки , которые действуют как контейнеры, которые представляют представления и подкомпоненты дизайна, такие как кнопки, разделы контента, элементы навигации и т. д. Фреймворки обладают всеми функциями, которые есть у монтажных областей, а также могут предоставлять дополнительные функции этим компонентам, например сетки . и автоматические макеты .

AdobeXD

• Он использует монтажные области , которые также действуют как контейнеры, представляющие представления, содержащие только дизайн — например, экраны телефонов и экраны ноутбуков. Во время прототипирования вы можете связать эти монтажные области вместе, чтобы имитировать движение пользователя на веб-странице или в приложении. В то время как фреймы могут делать все, что могут монтажные области, рисунки XD не могут делать все, что могут фреймы Figma.

создание шаблона

И Figma, и Adobe XD используются для прототипирования, но XD немного лучше, потому что у него есть триггер, который поддерживает больше типов дизайнов пользовательского интерфейса. Давайте взглянем.

фигма

Он допускает несколько взаимодействий для каждого элемента, если они разные:

причина

• кликнув
• При вытягивании
• во время зависания
• при нажатии
• мышь в
• Оцените вы знаете
• Мышь вниз
• мышь вверх
• после задержки

действовать

• Перейти к (панель — используйте для перемещения между панелями типа холста)
  Открыть наложение (фрейм)
• Swap with (frame — используйте для замены фреймворков альтернативных типов компонентов, например кнопок, см. следующий раздел для получения дополнительной информации)
• Возвращаться
• закрыть оверлей
• открыть URL

вперед

• Немедленно
• Растворить
• Умная анимация (см. ниже)
• Двигаться
• Изменять
• Толкать
• горка
• выскользнуть

способствовать

• успокаивает
• Расслабляться
• Легко входить и выходить
• линейный

AdobeXD

Разрешить несколько взаимодействий с одним элементом, например, наведение курсора и клик:

причина

• Хлопать в ладоши
• Тащить
• плавающий
• темп
• Голос
• листья зеленого лука
• Контроль

действовать

• вперед
• автоматически анимировать
• покрытие
• воспроизведение голоса
• предыдущий буфер обмена
• изменение статуса

вперед

• Верно
• Выше
• Ниже
• Растворить
• Проведите пальцем влево
• проведите вправо
• скользить вверх
• проведите вниз
• нажать влево

способствовать

• Нет (также известный как линейный)
• Расслабляться
• успокаивает
• Легко входить и выходить
• Фото
• Кудрявый
• подпрыгивая

Можно сделать вывод, что Adobe XD допускает более одного взаимодействия с каждым элементом , позволяя создавать прототипы, функциональность которых ближе к поведению людей в браузере.

Ра Тай

фигма

Как уже упоминалось, Figma может генерировать CSS, Swift для iOS и XML для Android . Это также позволяет вам напрямую копировать CSS или SVG. Кроме того, если в документе есть изменения, код автоматически перегенерируется .

AdobeXD

XD генерирует код CSS , но сначала необходимо создать ссылку разработчика, а затем открыть ее в браузере. В отличие от Figma, если документ изменится здесь, вам нужно будет заново создать ссылку и обновить ее .

Figma лучше, чем Adobe XD?

Краткий ответ: да . Figma, возможно, является единственным инструментом проектирования, который дизайнерские команды выбирают из-за его великолепной функции совместной работы . Это упрощает процесс проектирования и помогает дизайнерам и командам работать вместе более эффективно, поскольку вы можете напрямую сотрудничать со своими товарищами по команде. Кроме того, Figma приносит большую пользу дизайнерам и командам, потому что:

• Это бесплатно, и вы можете получить к нему доступ, не загружая приложение;
• Работает на любой платформе;
• Простое и привычное сотрудничество;
• Беспроблемный и гибкий обмен;
• Встроенные файлы обеспечивают обновления в реальном времени;
• Простое и интуитивно понятное прототипирование;
• Легко переключайте разработчиков;
• Коллективная библиотека — это идеальное место для разработки систем, позволяющее любому, у кого есть доступ, использовать последние версии.

Заключение

Битва между Figma и Adobe XD будет продолжаться, и они, безусловно, подталкивают друг друга к улучшению и активизации своей игры. Довольно часто мы видим, что уникальные черты одного проявляются в другом, что затрудняет дизайнерам выбор, какой из них выбрать для создания высококачественного продукта.

Но если вам и вашей команде важна совместная работа, то Figma — лучший выбор для вас . Он был разработан с нуля с учетом командной работы, и поэтому никакое другое программное обеспечение не сможет конкурировать с ним. Он также превосходит Adobe XD, поскольку лучше обрабатывает кадр, чем монтажная область, автоматический макет, отзывчивость и общий графический дизайн / дизайн пользовательского интерфейса.

С другой стороны, у вас больше возможностей с Adobe XD, если вы знакомы с экосистемой Adobe и Creative Cloud. Кроме того, Adobe XD немного лучше справляется с прототипированием, когда дело доходит до автоматического голоса и анимации, что упрощает точность.

Оригинал статьи взят с: https://www.imaginarycloud.com

#adobe  #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 

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 

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 

Chat App with Firebase Developed in Flutter and Designed In Figma

Chat App with Firebase

The UI of this chat app is developed in flutter and designed in figma. The app includes main page where chat rooms are present of user also there is profile page, login page etc.

The app design was taken from this figma design file.

https://www.figma.com/file/10G6zbwg91v7VEyn3jHIHY/Ping-Chat-App-(Community)?node-id=11%3A167&t=Cxirxsdvq7OSWpVT-0

Video

Screenshots

.

App Overview

Ping is a chat application developed in flutter for both android and ios users. The app contains major login methods like login with email, phone and google also users can signup and complete their user profile. After loging in they reach home screen where they see already open chatroom with other users if any. There is a profile page to see current info and also edit it. The main chat page is also functional and has features like sending texts,emojis and image files from gallery and camera as well. The chats work in realtime as firebase is used for backend and storage of our app. Users can also signout and select who they want to chat.

Future Work

In future we have plans to add video and audio calls feature. File sending like pdfs, word to also be added. Searching to be implemented and blocking and deleting options as well are planned in future.

.gitignore

# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/
migrate_working_dir/

# IntelliJ related
*.iml
*.ipr
*.iws
.idea/

# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
#.vscode/

# Flutter/Dart/Pub related
**/doc/api/
**/ios/Flutter/.last_build_id
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/

# Web related
lib/generated_plugin_registrant.dart

# Symbolication related
app.*.symbols

# Obfuscation related
app.*.map.json

# Android Studio will place build artifacts here
/android/app/debug
/android/app/profile
/android/app/release

.metadata

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled.

version:
  revision: 6f1cee910457c7efb9467ebe81122c691b313fae
  channel: stable

project_type: app

# Tracks metadata for the flutter migrate command
migration:
  platforms:
    - platform: root
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: android
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: ios
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: linux
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: macos
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: web
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
    - platform: windows
      create_revision: 6f1cee910457c7efb9467ebe81122c691b313fae
      base_revision: 6f1cee910457c7efb9467ebe81122c691b313fae

  # User provided section

  # List of Local paths (relative to this file) that should be
  # ignored by the migrate tool.
  #
  # Files that are not part of the templates will be ignored by default.
  unmanaged_files:
    - 'lib/main.dart'
    - 'ios/Runner.xcodeproj/project.pbxproj'

Download details:

Author: appstree-io
Source code: https://github.com/appstree-io/flutter_chating_demo_app

#flutter #dart #figma #firebase