fabiochiu/medium-articles huggingface dataset:
Our first 6 months with Figma
Tags: Process, Figma, UI, Design, Methodology

Our first 6 months with Figma

From a multinational to a startup. Is Figma a good fit for your team? mendesaltaren Follow Jan 21, 2019 · 7 min read

This article was originally published in Spanish by Patricia Pérez. You can find it here.

We have been working with Figma for more than six months now and this tool has crept into different projects of the studio, among one of them being the largest e-commerce in Spain.

Today the aspects of Figma that give us the most value are:

Teamwork

The versatility of the styles

The possibility of having libraries

Teamwork

In our opinion, if we are talking about a design team working on the same product, Figma is the tool to use. Several people can be working simultaneously on the same file and visualize the changes that are made in real time.

Within the first few days working with Figma in a large team, we realized there was a big problem of working collaboratively: organization. We had to remove the fear of what happens if everything one has been working on is deleted or modified by someone by mistake. Faced with these problems and concerns, we proposed a mechanism to work on different pages and a process to work on version control.

How do we solve the organizational problem?

To work on Figma, we structured the file into 3 types of pages:

Master Page, where all the content that is or will be uploaded to production is stored.

✅ Master

Revision Pages, which contain finished versions but are being validated with the product manager, product owner, the development team, or being reviewed with the design team.

👀 [User flow or workflow name or functionality] — [Name of person in charge]

Pages in Progress, pages that a person is working on. We have as many pages in progress as User flow/ workflow or functionalities are being worked on and each of these pages will belong to only one person.

⚙️ [User flow/ workflow name or functionality] — [Name of person in charge]

Waiting Pages, pages belonging to workflows that have stopped for some reason. These are not finished, but there is no one working on them either.

✋🏼 [User flow’s or functionality’s name] — [Name of person in charge]

Having the pages differentiated in this way allows us to know the status and whether the work is finished or not. In addition, having the pages differentiated by people avoids having a thousand cursors flying over the work you are doing 😉.

How do we ensure that no work is lost?

To avoid the risk of a heart attack if any work has been lost we integrate version control. This functionality allows us to always go back and rework our designs. Figma saves our work and performs this control automatically every few seconds.

But the problem with this automatic saving is that it will catch each member of the team at a different point in their work. That’s why manual version control is important. We create a commit for every use. This way we can have clear checkpoints every time a functionality is validated or there is a big change, allowing us to go back at any time.
Desktop design templates. Material UI for dashboards, software and web tools
By: Roman Kamushken
Tags: Figma, Dashboard, UI Design, Prototyping, Material Design

Components-driven system

This Application design powered by the classic 3-columns Layout and set as ready for customization. Left & right columns Constraints set to Scale but it’s simple to snap it to the left and right. You’re free to move as well, swap, resize and set new colors for every UI items; which are:

Application bar

Consists of a flexible Logo (edit the letter, swap the font from Google.fonts if necessary), Square buttons with captions, Segmented Controls, Buttons & Userpic.

Expandable navigation tree

Displays up to the 4th level of Depth. Expandable and highlighted by grayscale gradation to deliver ultimate UXability.

Compact Tabs

Available in two variations: Labeled and Iconic. Refers to a single Master-Component.

Progress Cards

A sample of Card layout supported by Letter-only Logo, List item, Progress bar and Social row of involved people.

Status Cards

Another sample with cards for visualizing Active or Warning statements according to the Context.

Text-edit Cards

Served in two Color variants, contains Confirmation, Text block, Icons Toolbar at the bottom.

Search Panel

A card-based Layout to display expandable Recent Searches as the additional functionality.

Compact Inputs

Compactly fitted into the Grid for better performance at the Desktop resolutions.

Chips-driven Panel

A next-level Component for Filtering the data within colored selectable Chips by clicking on a Dropdown icon or Plus Icon.

Segmented Controls

Classic widget for Sorting the Data. Supported within 3, 4 or 5 icons in a row.

Selectable List

Simple but frequent to use UI Item with onHover style integrated. If you wish to reuse this style anywhere else in a project, simply Detach the Instance and declare as your Custom component.
User-centered Design System Resources
By: Runi Goswami
Tags: Lyft, Designops, Figma, Design Systems, UX

LPL is a multi-platform system with design and engineering asset libraries for iOS, Android, and Web products. While some components may have platform-specific differences, across the board we strive to make our libraries platform agnostic and as easy to use as possible.

Design Libraries

Figma is the source of truth for product designers at Lyft

LPL’s design libraries started as sticker sheets in Sketch where designers could view all the system components within a single file and copy/paste components into mockups. When we migrated our libraries to Figma in early 2020, we took the opportunity to up-level our libraries and incorporate features that Figma offers — like making it easy for designers to search and discover components in the Assets panel.Consistently naming and ordering component properties and variants

Designers can search for specific components across all enabled libraries within the Asset panel

We make sure our Figma libraries are easy to use for engineering partners as well by clearly communicating what components are part of the system in the attribute panel. When engineers look at designs that have been handed off, they can see “[LPL] Core UI — [Platform]; [Component name]” on all our system components.

The Toast component with designated keywords

We additionally help the engineering handoff process by incorporating redlines into our libraries. All component sticker sheets include component instances with Spacers overlaid on top of them as a quick way to communicate layout values between component elements.

Spacing redlines for Toast

Design Tooling

Private Figma Plugins

Our 2 internal Figma plugins (LPL Lint & LPL Dark Mode Switcher) are the icing on the cake for Figma Design System usability. LPL Lint checks selected frames in mockups to see if they’re using LPL color, typography, and elevation attributes. This linter is a lifesaver for design to engineering handoff and QA. Meanwhile, the LPL Dark Mode Switcher does exactly what you might suspect — it switches all the colors in selected frames from Light to Dark mode (and back) using our Figma Dark Mode Color Library. Now that Lyft Rider and Drive apps both support dark mode, this plugin helps designers quickly check mockups to see if visual hierarchy remains consistent at all times of day.

Engineering Libraries

In our engineering libraries, we make it easy for engineers to use LPL components out of the box. Each component has platform-specific technical documentation that covers:

How to implement the component

Component customization options including common variants and use cases

Necessary logic that handles text wrapping and truncation

State definitions and interaction details

Accessibility definitions

Live demos

And more

Web Toast usage examples

Equipped with the component code and technical documentation specific to that component, engineers are able to build at a much faster pace. And by using these design system components, they promote consistency and a high standard of quality across the products they build.
Reimagining Twitter: Bookmark Folders
By: Rosa Tiara
Tags: Reimagining, Figma, UI Design, Bookmarks, Twitter

Bookmark Folder has been a highly-requested feature on Twitter by users. We do know that feature already exists on Twitter Blue, but, you know — it’s not free! (screaming). Wouldn’t it be much better if Twitter releases it for free? (*wink @ Twitter). But since Twitter doesn’t seem to respond to it yet, I did some exploration and made the design.

These are some features I added:

#1 Add Tweet to Bookmark

I added this functionality to make users access the bookmark folder easier, right after they see the tweet(s) they intend to save. Inside the ‘new folder’ tab, I also designed the folder privacy settings, whether the users want to make their folder private or public, with just one click. (the fewer clicks, the better, right? ;))

#2 Folders and All Tab

The Folders tab is used to store all of your created bookmark folders, while the All tab is used to store all your bookmarked-yet-uncategorized tweets. Oh, what a wonderful Twitter it is!

#3 Bookmark Search

It’s time to say no-no to being frustrated scrolling all the way down searching for your read-later bookmarked tweets with this search bar! Enter the keyword or related topic of your bookmarked tweet and BAM! Your food is ready to serve.
[Getting started with pxCode] pt.2: How to use Inspector?
Tags: HTML, Figma, Web Development, Inspector, Pxcode

In this article, you’ll learn the essential features of the Inspector in pxCode.

Firstly, what is an Inspector? 🤔

In pxCode, Inspector is located on the right side of the editing page, with four main sections [Layout, Flexbox, Style, Partial Code] listed on the top of the menu bar. Let’s take a deep look into these different sections.

👉 In the previous article, we have been sharing the functions of [Layout], [Media Query Overriding], [Flexbox], [Flexbox Media Query Overriding].

But in this part 2 [Getting Started] article, we’ll be learning another part of Inspector. Specifically on what you can do under [Style] & [Partial Code].

Let’s get started! 🙌

The location of [Inspector] in pxCode

1. Style 🖊

Under [Style], there are several sections that can be edited. [Style] is generally used to alternate the pattern and of course, style of the selected component. All the edits under [style] can be very useful for minor tweaking and adjustment, to customize a beautiful visual Web Design look.

Under [Style], the features can generally be sorted into two main editing parts, which are Image & Text. So the below content will be separated into two sections.

You can edit the pattern of the image under [Style]

Features for Image (or background):

[Clickable]👆 :

To convert a button to be clickable during Preview. [Collection]⚙ :

You can alternate the Background Color & Shadow of selected image. [Background Image]📁 :

Upload an image to place on the design. [Opacity]👓 :

You can alternate the [Opacity], [Blur] & [Rotation] for the component within the selected section.

You can edit the pattern of the text under [Style]

Features for text:
UX Tools for SpecWriting in Figma
By: Lior Bar-David
Tags: Design Process, Specifications Writing, Figma, Ux Writing, UX

UX has grown in demand and popularity over the years. Thanks to the industry’s vast and varied attraction, I’ve had the pleasure of working alongside many designers, from those who have mastered and honed their craft over the years to those interning during their time away from university. This awesome diversification of students, colleagues and mentors, has afforded me the opportunity to be privy to many different styles of communication as they relate to user experience design. One of the most valuable lessons by far, is that spec writing helps to support and document established concurring behaviours, functionalities and concepts.

To write or not to write is not the question. This article’s focus is around building tools utilizing components in Figma (or any editable symbol application such as Sketch/Adobe XD) and defining a process for specification (spec) writing or annotations in your UX projects. I won’t debate the pros and cons or delve into the advantages of including specification in UX as many have discussed this topic in detail (ok, maybe I’ll touch on this a little.). This tooling will aid your team in tracking feedback and design variations in a more transparent and effective manner.

I invite you to learn and modify these ideas to suit your needs. Be as thorough or as simplified as you deem necessary. There are references included in this article to Figma’s tools and features for your convenience. However, I won’t be covering (in detail) the construction of these objects. All that said, let’s get started.
TEDxPICT: Website Redesign - UI/UX Case Study
By: Tanvi Bhargaw
Tags: Ui Ux, Redesign, Case Study, Figma, Ui Ux Design

What is TEDxPICT?

TED is a nonprofit organization devoted to the motto of Ideas Worth Spreading. Started as a four-day conference in California 30 years ago, TED has grown to support its mission with multiple initiatives. In the spirit of ideas worth spreading, TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. These local, self-organized events are branded TEDx, where x = independently organized TED event.

TEDxPICT is one such organization run by college students from Pune, India.

Why this re-design?

TEDxPICT is an organization that works for the sole purpose of bringing together people from all domains and backgrounds and encourage free sharing of ideas, stories, and innovations that benefit the world at large. TEDxPICT believes that the sharing of ideas is crucial for the survival of a society that promotes progress.

Their website, however, didn’t display this dynamic — it was an unstructured visual dumping ground that failed in conveying the purpose of the organization to the user. Over the years, a lot of changes and additions were done to the website and also in the content that the chapter produced, but it hadn’t been captured properly on the website.

The solution: a website re-design.

We needed to create a system that could represent the wide breadth of content that they had started producing, including blogs, IGTVs, previous event records, and podcasts logically and coherently. It was also of prime importance to come up with a modern, clean and appealing visual style that would enhance the chapter’s personality.

Goals and Motivations behind the re-design:

The organization’s goals:

- To capture all existing content in an orderly fashion — with an easy-to-navigate clean user interface.

- To revamp the current visual identity and replace it with something more modern and appealing.

- To convey the chapter’s success over the years in conducting events to attract more sponsors for the future.

Our personal goals:

1. To understand and take full ownership of the roles involved in building products — User Experience Researcher, Designer, and UI Designer.

2. Enhancing our overall learning experience by challenging some design decisions and addressing their solutions together — as a team.

The Design Process

When there is a plethora of requirements and constraints involved in projects, a systematic approach to the problem at hand is of utmost importance. The design process that we followed during the course of this project can be broken into four iterative stages -
UI Design Tactics — Part 2. Next portion of Actionable tips to…
Tags: Ui Design Tips, UX Design, Figma, UI Design, Sketch

Add more context to the message you present to the user.

Both modals from the image above look pretty similar. The only difference is the status icon. The left symbol is generic. The one on the right is much more contextual.

This positive green symbol with a checkmark suggests user that the message is positive, even without reading the rest of the content.

Remember, communication is more than text. Images, icons, or illustrations will help immediately recognize the status of the performed action. Always help users recognize the intention.

Use the color of the links for active breadcrumbs

This tactic depends on the context and goals of the specific solution. However, if you want to help users to browse through categories, use the color that you apply to links in the breadcrumbs.

Thanks to this, you will inform the user where he is and suggest where they may go from this point.

Avoid default presets for shadows. Apply soft ones

Shadow default preset in all design tools is ugly.

Learn to make soft shadows by blurring the layer behind the panel or use a few shadow layers to create a smooth effect.

Do your developers complain about the soft shadows?

Show them how to make them in css.

Use the same hue for neutrals across the solution

Neutral colors help to establish balance in User Interface. However, it is easy to ruin this harmony by using various hues of gray.

Keep the same hue of neutral colors across the entire solution.

To make it easier, switch the color picker in your design tool to HSB.

This trick helps establish visual balance & makes it more attractive.

Guide user instead of showing errors

When your solution has got strict rules, like in the case of creating a password. Inform the user about the constraints and show the level of compliance. This way, users will feel comfortable using your app.

Avoid displaying errors in these cases. This is not the user’s fault that they didn’t know the rules!

Prefer to watch it as a video?

Here you may watch UI Design Tactics on my YouTube channel. If you would like to see more tutorials like this, don’t forget to subscribe!

Summing up

These are the next 5 UI Design Tactics. These actionable UI Design Tips will help you move your skills to the next level. You will design more confident & spent less time trying to figure out which detail is better.

If you would like to know more UI Design Tactics that solves common design problems, peorder the book (you may save 40% now).

You may also grab a free chapter to start learning now.

Thanks for reading!
FIGMA — PEGA INTEGRATION. CHAPTER-1
By: Gokul P
Tags: Figma, Pegasystems, Pega

CHAPTER-1

FIGMA:

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes in real-time on mobile devices.

A responsive web is a web that is designed to automatically change its layout depending on the size of the design it connects to, such as a desktop, tablet PC, or mobile.

In web or app services, it is particularly important to deliver consistent user experience. Register commonly used styles(colors, fonts, effects, layout grids, etc.), you can easily apply uniform styles wherever you need them.

It is called Design System to systematically define the style used in one service. Building this design system not only provides consistent design, but also reduces working time and facilitates collaboration among team members. First, let’s learn how to register and apply styles in Figma.

E-Commerce service should pay special attention to consistent design. This is because users go through various screens such as product list pages, detail pages, shopping carts, and payment pages when purchasing goods.

Register Styles

Register the test style properties of the Title and BodyText separated by slashes. (Font Type/Size/Row Spacing/Character spacing)

This is a basic example of how PEGA and FIGMA can been integrated ,

and we can see the ways to do it in the Upcoming Chapters .
Figma Groups or Frames
By: Olivier Van Biervliet
Tags: Figma, UI, Productivity, Design, Tutorial

In a previous post, we discovered the functionality of Smart Selections in Figma. These allow for implicit grouping and are a quick way of dealing with multiple objects.

When working with many layers and objects however, we need a more formal way of bundling these. Usually, you would use a group for this, but Figma throws another option in the mix: Frames.

At first sight, Frames looks very similar to Groups, so let’s have a deep dive and discover their individual qualities.

Groups

The Basics

Let’s start with the basics. Every graphics app has grouping functionality by now: you select some objects, press ⌘G (Ctrl-G on Windows) and voilà: your layer list will now look cleaner by having a collapsible group.

Groups are defined by their contents. The boundaries of your group are the outside edges of whatever is inside it. So, whenever you change the position or dimensions of an object, the bounds of the group will modify accordingly.

Group boundaries change according to the contained objects

Note: To directly select something in a group, you ⌘/Ctrl-click it or double click it, or click it in the layer list on the left.

Advanced

The group object itself has a relation to the parent element in your document. By default the constraints of the group will be set to Left and Top, as you can see by the dashed lines here:

A group has default constraints of Left and Top towards its parent element

If you set the constraints to Scale, your group will scale along with its parent element, which could also be the artboard.

Resizing a group will always resize the contents. If you need to keep the same aspect ratio, you can hold Shift while resizing.

Resizing a group resizes the objects within it

Note that objects within the group will have the same left & top constraints by default, but that doesn’t really matter because the objects themselves define the boundaries of the group. It wouldn’t make sense to have them relate to the left border if they define that border in the first place.

If you want or need to use constraints on the objects within your group, you need to use Frames instead. We will come back to this later.

Frames

The Basics

At first sight, there doesn’t seem to be much difference between groups and frames. You select your objects and use ⌥⌘G (Ctrl-Alt-G on Windows) to turn them into a frame. They’ll collapse in a similar way in the layer list.
Introducing zeroheight for Figma!
By: Jerome De Lafargue
Tags: Figma, Design Systems, Design, User Experience, UX

Introducing zeroheight for Figma!

Our mission is to make it possible for teams of all shapes and sizes to create collaborative documentation for their design systems—regardless of the tools they use! When we launched zeroheight, the only design tool we integrated with was Sketch. But over the past couple of years, there has been an increase in the number of high quality design tools available.

Since our launch, one of the top questions from users has been “do you integrate with Figma?”. We’re super excited to announce that as of today, thanks to the support of the Figma team, the answer is yes! You can now create living styleguides synced with Figma. Here’s how you do it:

1. Getting started

Once you’ve created a zeroheight account head over to the Uploads dashboard and click Add new upload:

You’ll then be asked to authorize zeroheight to access your Figma account—don’t worry, this is safe. We only read files later when you explicitly give us their link.

2. Adding Figma files to zeroheight

Now that zeroheight is connected to your Figma account, all you need to do is upload a Figma file by pasting the share link. You can get it by clicking the Share button in Figma, then Copy link. The setting of the link doesn’t matter (it can be view or edit) and the file can be any file—it doesn’t have to be in a team or published.

Once your upload completes, you should see a summary in the Uploads dashboard—congrats on your first upload!
The concept of Breakpoints. Pain reliever in Figma
By: Max Moskalenko
Tags: Figma, UI, UX, Design

So, the breakpoints. Despite being a headache for product designers since the early beginning of the profession, proper design for different breakpoints is a quality mark of a well-crafted unified design that really works, not just looks good.

The only problem with it that in most cases you are just moving pixels and resizing things from one breakpoint to another, and it takes so much time. But there is no chance to skip that part because nowadays we have around 60% of mobile users, so a good mobile version is a must-have thing. I believe that on the development side this is something that already works quite good, so why we can’t optimize the design process in a similar way?

Doing this type of routine every day, I figured out some key points that in fact may be done smarter than manually. Figma does offer the potential chances to implement those things quite easily, so here is how I envision the better way for working with breakpoints without making huge efforts or doing any geek math instead of designing itself.

Features

A bit smarter layout grids

First thing first, let’s set up a grid system for our project. In this example, I want to use Bootstrap grids and cover 2 breakpoints (XL ≥1200, XS<576)

To define them just select it from the frameworks list (Bootstrap, Foundation, Bulma, etc.) or create your own grid system from scratch. Each breakpoint has its own settings like min/max screen size, number of columns, gutter, etc.

Watch video below 🎬
How to Get Icons on Figma
By: Troy Schennum
Tags: Icons, Figma, UI, Design, UX

Figma doesn’t currently have plug-ins as Sketch does. This is how you can still use crafted icons in your designs.

The first option for inserting icons into your Figma designs is to use Font Awesome 5.

Here is the download link. There is a Font Awesome Pro which you can buy or a free version. Download the font from their site.

The steps to install Font Awesome on your windows computer.

Show the folder from your download. Open the Font Awesome zip file. Open the “otfs” file. Select the three OpenType font files and open them. Then press the install button on each. You now have Font Awesome typeface on your computer.

Go to your Figma account and go to your settings.

In the Fonts section of your Figma account settings, you need to enable local fonts. You will be prompted to install Figma Helper and then local fonts from your computer will be enabled on your Figma designs.

Now in your Figma designs you can select the Font Awesome typefaces. They work by typing the different icon labels and the text will be converted into the icon.

These links will show how to use Font Awesome and give you a list of their available icons and their labels.

The other option for icons is to import an icon outline into your Figma dashboard. Google makes one of the best sets.

If you or your team have an upgraded Figma account you can publish the symbols into your team library. This will be available across all your designs.

If you’re still using the free version of Figma you will have to copy(Ctrl+C) and paste(Ctrl+V) from the outline draft.

Here is the Figma link to add the icon set to your drafts.

At the moment it takes some workarounds to get imported icons into your Figma designs. Using these easy method will save you the time of creating all your icons from scratch.
Figma as a Design Tool
By: Kirti Goel
Tags: Figma, Designer Tool, Ui Ux Design, Design

Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with a lot of extra differences that make Figma better for Team Collaboration. Figma provides many tools that can be used in the designing phase, such as it provides plugins, prototype capabilities, and code generation for the developers.

Figma is a free, online UI tool

Figma app is a tool for the creation of clickable prototypes of applications.

Let's have a look at the interface:

Figma Interface- much easier to understand

Figma can be used both in the browser and directly on your platform as a stand-alone app (macOS, Windows). Designers can also use Figma Mirror Mobile App for viewing the live changes.

In many organizations, Designers use Figma as a designing tool. Almost every designer whom I contacted just loves it. Since Figma acts like a startup, they are able to rapidly iterate and design new features based on their user's needs.

Figma is incredible.

Here are some features which I love the most :

Real-time collaboration with up to 50 people.

Automatic version control, you don't need to save again

Convert any website into a Figma file with Figma to HTML

Intelligent and automatic animations

Supports GIFs in-app

Auto layout, a new smarter way to design components.

For the last year, I’ve been using Figma for my UI/UX design process and it has been saving me hours of work. It truly transformed my design workflow.
Top 5 Figma shortcuts
By: Anthony Jurman
Tags: UX Design, Figma, UI Design, Web Design, Digital Design

1. Set opacity

Sliders or input fields are great solutions for setting the opacity, but this solution is on another level. Switching between values is seamless, and the shortcut is so easy to find you might have figured it out by accident.

HOW TO

While the element is selected, simply press the numbers from “0”-”9” to set the desired opacity of the element. You can also use a combination of keys to be more accurate, for example: double tap number “5” to get 55% opacity on element. Keep in mind that “0” means 100% opacity, but double tapping “0” gets you 0%.

2. Frame / Unframe (with Auto layout)

Framing and unframing shortcut combined with Auto layout shortcut lets you iterate on your design faster and with more efficiency. Auto layout is a versatile feature that is definitely worth exploring (if you haven’t already).

HOW TO

To create a Frame around the object(s) press “⌥ Option” + “⌘ Command” + “G” (“Ctrl” + “Alt” + “G” on Windows). To put one or more objects into Auto layout, press “⇧ Shift” + “A”. Removing the Auto layout, Unframing or Ungrouping is done with “⇧ Shift” + “⌘ Command” + “G” (“⇧ Shift” + “Ctrl” + “G” on Windows) key combination.

3. Select child / parent

Browsing through nested elements doesn’t need to be done with a mouse. You can use this shortcut to quickly access all child elements, as well as parent elements. Also, this shortcut comes really useful while using Figma Mirror because you can reach to the main frame really fast.

HOW TO

To access the children elements click “Enter”. To access the childrens’ children, click “Enter” again. In contrast, to access the parent element click “⇧ Shift” + “Enter”.

4. Scale from center

This one comes handy while drawing wireframes or quickly sketching some screens. While working with frames, you might need to use another shortcut called Ignore constraints (hold “⌘ Command” for Mac users or “Ctrl” for Windows users).

HOW TO

Grab one of the corners and then hold “⇧ Shift” + “⌥ Option” (“⇧ Shift” + “Alt” on Windows) while you resize selected element to the desired size.

5. Copy as PNG

This is definitely my favorite shortcut. It made pasting an element from Figma to any communication platform so efficient. Not only does it save you a lot of time, but it also keeps your storage space free of clutter since you don’t need to export the element. Note that it exports 2x size PNG by default (but you can change that in the Export section at right hand side).

HOW TO

Select any element (picture, frame, group,…) then press “⇧ Shift” + “⌘ Command” + “C” (“⇧ Shift” + “Ctrl” + “C” on Windows) to copy as PNG. You can paste this PNG in any software that supports sending any kind of pictures.
A Passion Project Turned UX Case Study.
By: Vedeesh Bali
Tags: Figma, UI, UX, Cricket

Challenge 1: Organization

The site does not give a sense of priority to its main function — display cricket scores. Clubbing that section together with the lesser-used Rankings, News and Teams sections makes the site more confusing and inefficient.

Challenge 2: User Interface and Motion Design

Two components which significantly increase the appeal of a website to the user have not been very well utilized by Cricbuzz. Having effects like hover animations keep users interested and make them return to the site more often.

Challenge 3: Color Scheme

While the green and dark grey combination gives an idea of what the site is used for, the other supporting colors such as maroon and gold distract the user and make the site less appealing.

Primary Combination

Secondary Combination

Challenge 4: Font Differentiation

The usage of only one main font with two different weights makes sense while considering formal documents. However, a website with various categories of information needs something different to catch users’ attention.

Primary Fonts

Challenge 5: Data Visualization

A feature which Cricbuzz has not really looked into yet, but could prove to be a game changer; displaying data in a visualized format reduces the amount of text and numbers required to be displayed and makes the site far more interactive and exciting.
Design is Messy
By: Chioma Onukwuire
Tags: UX Design, Figma, Ui Mockups, Design, Prototype

One of the misconceptions about design work is that it has to look good from the get go. This is FALSE! Any designer will tell you that design is messy, especially in the beginning! So I thought I could give some behind the scenes shots of a design project that I am working on.

I came across a website of a hotel company, and while the hotel was spectacular according to the reviews, the website design was elementary. The content was amazing, but you have to scroll down a lot to see information and sometimes there was too much information in one place. So I decided to create mockups to revamp the site. This was my process.

I Played Around

To understand the navigation of the site, I played around with all the buttons and links. I even went ahead and put myself in the mindset of the user. I started making out use cases. For example, how do I book a room or what would I do to determine if I want to stay at this hotel. By doing this, I was able to get an idea of how I could redesign the site.

2. I Drew Up a Navigational Map.

After I figured out the website I knew the key screens that I needed. I started with the homepage and drew a navigational map. A navigational map is where you map out the flow of your design. It visually shows you how you can get your users from point A to B. My navigational map was not pretty, but it helped me organize what screens I needed and how to guide the user through the design. This is a foundational step when it comes to designing wireframes! It may seem trivial, but once you start designing different screens you may notice that you need more screens! You run the risks of becoming lost and confused. I know I did my first time. A navigational map helps a lot and can actually cut your design time in half!
Creating a more collaborative and efficient process when migrating to Figma
By: Alexander Fandén
Tags: Design Process, Figma, UI, Sketch, Tools

Finding the right balance when defining processes

As designers, our hearts are pumping a little faster when we’re in the zone solving problems — user problems — not chasing people for access to the right files.

Being a part of a larger design and product team means that you’ll need to spend time syncing and aligning with people from adjacent teams, assure consistency between products and funnels, and more. I’m not going to lie — at times this can be very time-consuming. As designers, our hearts are pumping a little faster when we’re in the zone solving problems — user problems — not chasing people for access to the right files. When discussing workflows and processes, it’s easy to add more and more steps, assuming that everyone will dutifully follow the process. But the truth is, the more steps we add, the less likely anyone will follow the procedure.

How can we solve this challenge without adding more admin work for our designers?

Therefore, one key question I’ve asked myself and others on our team as we planned out our migration was — How can we solve this challenge without adding more admin work for our designers? It’s a tricky balance — we want our designers to have the freedom to work in whatever way suits them best. But we don’t want to go back to the mess of the past.

In this article, I’ll explain how we utilized Figma to improve the way we organize our designs (ourselves?) more efficiently and collaboratively.

Organizing teams and projects in Figma

Before the migration, all of our working files were managed in Abstract, which has a very similar structure as Figma:

Original image by Figma

Organization Team (Figma)/Section (Abstract) Project File Pages

It would have been easy for us to just recreate our previous file structure, import all files, and call it a day. However, our shared experience in the Figma working group was that the current setup in Abstract was inconsistent, confusing, and not very well maintained.

Before Abstract, we had all been sharing sketch files on local servers, over emails, and Slack, so at that point, anything seemed better. We were all excited to use Abstract and at the time it was hard to foresee what issues we would run into 3 years later, so we just took it and ran with it.

This time around we knew better — we wanted to carefully evaluate different options and gather as many insights as possible from the broader design team before moving ahead. First, we scheduled a workshop within the working team to brainstorm possible ways of dividing the teams in Figma:
Figma + Material Design Icons Kit (over 900 Material icons in one Figma file)
By: Fabrice Thilaw
Tags: Figma, Figma Africa, UI, Design, Material Design

Around the globe, millions of well designed digital products integrate Google’s Material icons. In a context of collaborative design being globally adopted, it makes sense to bring the best icon resources where designer teams need them.

(I build mobile apps, live next to Nigeria. I’ve recently discover a new passion : UX/UI Design. That’s why I joined the Figma community in Africa (2018).

“Figma + Material Design Icons Kit” is my first major contribution to Figma’s growing community.

+900 Google’s Material icons in a single and light Figma file

“Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI.” — Source : Material Icons Guide

Enter Figma + Material Design Icons Kit — Get it here

Contents of Figma + Material Design Icon Kit

The kit is a collection of over 900 Material icons. All of them were originally created by Google and made available under Apache license version 2.0. Here is the official website to get them, one at a time. This kit is under the same license.

It makes sense to bring the best icon resources on Figma, where designer teams need them.

Why making this kit available for everyone ?

I personally like the idea of having all theses icons in a single Figma file. Because it saves my time, making me more productive as a result.

Before I made the kit, here was my regular (sadly repetitive) process to get icons :

1- Leave project on Figma

2- Go to the website of icons library (Usually the most popular icons repositories)

3- Download Icons on laptop

4- Come back to Figma

5- Import icon files (Mostly SVG) into project from local drive

And I had to do it several times. It felt like something has to be done.

And I did the thing!

Now whenever I need an icon, I first look for it in on Figma. So, copy-paste-customize is all it takes to get the icon fit in my needs. If It’s useful for me, then somebody may need it as well :)

Get the Figma + Material Design Icons Kit

Disclaimer : The Figma + Material Design Icons Kit is not affiliated with Google.
Case study: Mandela partners landing page
By: Nora Pirsch
Tags: Visual Design, Figma, Case Study, Sprint, Nonprofit

Incorporating Critique

I got some great feedback and critique of this first draft from my UXD instructors and fellow students. They all seemed to like the images, but noted that they could downsize a bit and add more descriptive text next to it. Filling up a bit of the white space. The footer was unfinished and I wanted to add another section about community events. I also got some feedback to play with texture in the background and to change the white to off white

During this time, I became aware that there actually was an existing site for MandelaPartners.org. I decided to stay with my original idea and just polish it up. However, as I was browsing there live site, I watched a video that really helped me see how they are making the healthy produce available to low-income communities. This is something I really wanted to highlight immediately on the landing page. I thought it was unique that they are putting healthy, organic produce right into the corner stores (where you might not expect to find fresh food like that). Partnering with the local shops, helped them make this amazing food accessible to low-income families. Taking all of the into consideration and following through with some of my original design/thought process, my final draft came to be.
IronHack PreWork — Wolt. Challenge 2: Wireframing
By: Alessio Sacconi
Tags: Wireframe, Figma, Ironhack Prework, Ironhack, Prototyping

Challenge 2: Wireframing

Wireframes give a simple visual representation of how the flow of the app or website you are creating will be.

The Task

The assignment for this PreWork challenge is to “reverse engineer” (i.e. creating wireframes starting from the visual interface) a popular mobile app of my choice, in order to analyse and learn to prioritise certain elements when illustrating user flows.

Why a wireframe?

Wireframes give us a clear and concrete structure visualisation of the flow of an app or website.

Thanks to their monochromatic colour display and visual essentiality, it allows the user to focus exclusively on:

what elements should be in;

why they should be there,

where to put them,

how they function.

Basically, it allows us to quickly test and reiterate at the early stages of our design, without an excessive expenditure of resources.

My Choice: Wolt

Wolt is a food-delivery platform born on 2014 in Helsinki, Finland. It’s supported via mobile app and web browser. It operates in 18 countries and over 60 cities — it currently has partnered with over 6000 restaurant.

Mainly because I’m a proud and passionate foodie, I decided to point my focus towards an app I’m pretty familiar with: Wolt.

It gives a really good basic delivery service, with the addition of being able also to pick-up directly at the restaurant or to have it delivered everywhere I am. Nice no?

Another thing that I notice, I’m always experiencing a bit of difficulty choosing the food to order — due to some other food delivery service with a too wide range of option and an unclear interface.

Wolt is helping me a bit here!

Finally, the visual side is really attractive and gives already a feeling of more quality compared to the competitors.

Driven by curiosity, I want to analyze further this fresh and pleasant looking app, that quickly took the monopoly in the areas populated mostly by young (or let’s say — tech-savvy) people in Berlin.

The Process

User Flow

I’m going to analyse the process of ordering a meal, having already used the app in advance, logged in as a user and already submitted info for payment and delivery.

In this case, I will focus only on the “Search” function since it’s the most direct and quickest to order.

The Lo-Fi wireframe for the chosen User Flow

Scenario

Our user Charlie, a 27 y/o freelancer based in Berlin, is working full on a project and would like to have a pizza quickly delivered to his doorstep

User Flow steps

Open App Select Search Write or Select “Pizza” on the Search bar Select Restaurant serving Pizza Select Pizza type Add to Order Select Delivery type Check order overview Confirm Pizza is on its way!

Reference Screenshots
A Study in Purple: Coco Canary Consulting
By: Jackie Jay
Tags: Consulting, Figma, High Fidelity, UX, Purple

Coco Canary is a consulting firm that focuses its work through a racial equality lens. They focus on inspiring inclusion, supporting social justice, and promoting anti-racism culture.

Scope

This was a high-fidelity landing page delivered in a 1-week sprint using Figma, Balsamiq, and Miro. The constraints were that I was only given the current website for content but no access to the client to fully understand their needs and desires.

Research

original website

Looking at the original page, it was very text-heavy. I attempted to distill the information that was given. What was important to the client and what would a user be coming to the site to look for? I also wanted to try to pull out some of the client's personality and bring it into the color scheme. Molly had just redesigned her logo so I used the color palette from that as the basis for the new color scheme. I read her newsletters to try and get a feel for who she was and the image she wanted to project. Using word association and a mind map, I attempted to hone in on a person I never spoke with.
Wireframing Challenge: Gymondo App
By: Paula Reis
Tags: Figma, Ironhack Prework, UX Design, Wireframing

For the second challenge of Ironhack pre-work, I had to choose an app that I’m familiar with and create a wireframe version of the user flow of the chosen app.

Wireframe is a visual representation without strong details of an app or website. It has to have visual elements enough that you can understand what the idea of the app is, but the focus is not the end design yet.

Gymondo is a fitness app, you can choose what is your goal and it gives you your workout plan. The workout can be done at home. The app also gives you healthy recipes to help you get into a healthy life.

I chose this app because I enjoy working out at home and it makes easier and it gives you different workout options. I also like the design of it and the colors it uses.

Screenshot Gymondo

These are the screenshots from the app. The flow I chose was from the client home page to the list of available workouts, to click the chosen workout video, to more options inside of the video with other workout video options, to finish with some fitness program.

After my screenshots were chosen, I went to Figma and started to try it out. The first screenshot took me a while to understand all the tools, but once you do that, it becomes much better. These are my wireframes of the Gymondo app screenshots. I tried to focus on the visual elements that I found necessary, to create an idea how the app will look like and how the interaction will be.

Wireframe Gymondo on Figma

Prototype

Learnings

At first, I thought that Figma was a complicated tool, but as soon as I started to try it out, it became easier. I had to contain myself not to put too much details because I knew that it should be all about the flow and not about the end result. I enjoy to learn how to put everything together and I like to see that even without much details, you can still see how to app works.

Paula Reis