UX Design with Figma by Tom Green & Kevin Brandon

Author:Tom Green & Kevin Brandon
Language: eng
Format: epub
ISBN: 9798868803246
Publisher: Apress

Download an Android template from the Community site. There are quite a few, though, such as the Android UI Kit from Google (Figure 6-6).

Figure 6-6The Android UI Kit contains various device frames

Having decided which devices and their viewports to target, let’s now look at how content arrives in those frames and is manipulated or edited.

Graphics and Figma

For the balance of this chapter, we will be concentrating on the use, addition, and manipulation of the assets you will use when creating high detail prototypes. These assets include images, text, and vectors. Figma is an Assembly application. Assets are prepared elsewhere and added to Figma shortly thereafter.

When it comes to UX Design, the “need for speed” is the prime driver. These assets have to quickly load into a browser or app. The reason is users need it now. They are not prepared to wait for something that takes more than a second or two to appear on the screen. It is critical, especially with images, that they be optimized for minimal download times.

The reason images are potential download choke points is they are bitmaps or raster graphics. Each pixel in a photograph, for example, needs 3 bits of color information: red, green, and blue. That may not seem like much, but a color image that is 100 × 100 pixels in size contains 10,000 pixels. Toss in the color information and that image requires 30,000 bits of information to render properly.

It isn’t all sweetness and light when it comes to vectors. Some of this art can be extremely complex with thousands, if not millions, of points. Though vectors are device independent, rendering a complex image could also cause issues with download times.

Images destined for smartphones need to have the device scaling factors applied. These scaling factors, based on screen resolution, range from .75x to 4.5x depending on the device. All images used in Figma have a scaling factor of 1x, meaning you really don’t have to use the other versions of the image when preparing a prototype in Figma.

What types of graphic objects can be used in Figma? Figma can handle four types of graphic objects:Primitives: Rectangle, Line, Arrow, Ellipse, Polygon, and Star are vector graphics created using their respective tools in Figma.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.