This article explores what a wire frame is and why it’s worth doing Figma – The most widely used user interface design tool on the market.
We dive deep into Figma and learn how to design interfaces with it – digging into a wire frame.
BTW: if you look 2020 design tools research, Figma won in most categories: User Flows, User Interface Design, Prototyping, Channel Switching, Design Systems, Versions and even “the most excited to try in 2021”.
Wire frames are diagrams that describe the structure of the model and can be either low quality (in the user study) or medium (in the UX studies). We focus on the latter (UX research), and the graphics aren’t a concern for us here, because at this point we just want to figure out the content and layout (also known as the “data structure”). .
What do we frame?
First, a small background on the interface to be built. It is a tabular structure that shows the different UX design tools and where in the UX design workflow each tool is used. The information is sent to the user, so the goal is to see which UX design workflow is the best, rather an exaggerated “which interface design tool is the best?”
The wire frame helps me figure out how this interface can best be built without wasting time figuring out small visual details. It doesn’t look amazing, but it’s great; it just has to look good enough for users to give me feedback.
Yes, it is a real interface. I currently call it “Toolflows”.
Let’s get started!
Step 1: Specify the canvas
Most of the users on my website are desktop users, so it makes sense to frame my design on a desktop canvas. Press A and then click Design > Workbench > MacBook Figman from the right sidebar.
Step 2: Gather functional requirements
Assuming you or someone else made credentials at some point, we need to refer to it to create our thread frame. When executing user information (in particular user interviews, target groups and user testing with low quality wire frames), we would have been informed of the operational requirements.
- filter by tool
- the number of users in the workflow
Let’s start the wire frame!
Step 3: Create text and shapes
First there are Figma wire frame sets available, but I’m not their fan exactly. They make me feel compelled to work only with those available in the package, so it inhibits creativity.
Instead, we thread the frame with text and shapes.
As we’ve learned in the canvas before, the easiest way to create anything in Figma is to misuse keyboard shortcuts:
- T: Text
- O: Ellipse
- R: Rectangle
- ⇧⌘K: Picture
- .L: Arrow
- L: Line
After that, it’s simply a case of clicking the table roughly where you want the object to appear, and then you can use the mouse and arrow keys to adjust the size and alignment.
- ⌘ - / + to zoom.
- .D copy the selected objects.
- .G group the selected objects (⌘rc choose inside).
- Hold on ⌘ when the mouse is resized to rotate objects.
- Hold on ⇧ when the mouse is resized to maintain the aspect ratio.
- Use the arrow keys to move objects by 1 pixel (hold ⇧ 10 pixels).
- Arrow keys + ⌘ resize by 1 pixel (press and hold ⌘⇧ 10 pixels).
Next, we move on to design.
Step 4: Style, but not style
(Hopefully still visible) Design in the sidebar, we can change the styles of objects in our table both aesthetically and to define their size and alignment more precisely.
Are you using Design sidebar or arrow keys for size / alignment, press and hold ⌥ (option) to measure the distance between objects.
Remember, you don’t plan much beyond size and alignment. Give the buttons rounded corners (so we can clearly see that they are buttons), Bold headings, etc. Clarity, not aesthetics.
And that’s it; now we have iron wire. Therefore, in models that require interaction, we want to show how our design would work exactly, so we will move on in the future making prototypes. Prototyping is the stage where we make design interactive (i.e., it feels like it’s the real thing).
Step 6: Create transitions
The background of this step is to copy our canvas, show how we want our design to look at the end of the interaction, and then define a trigger (animation optional) that starts the transition between the two “states”.
Start by copying the canvas (.D), and then change anything to be changed in this new table. In my case, I want to show a drop-down menu that filters workflows by tool.
Switch to the next one Prototype from the sidebar before selecting the object that will trigger your interaction. For me, this is closed drop-down menu from the original table.
Once selected, it should have a drag round + icon. Create a “connection” by dragging this circle to another canvas.
Step 7: Set the animation (optional)
Next, we should set some animation for the interaction to make it easier for users to see what has happened between the two modes.
The animations don’t have to be great because we’re only designing with medium resolution right now, so Interaction details dialog box that revealed after connecting, set Animated that Smart to animate. Smart animation animates layers that weren’t on the “launch panel”. Smart, right?
If you’re prototyping with mid-range wired frames, you don’t really need to hone any other option, but it’s great that you know how to create animated connections now.
Step 8: Test, test, test
Next, we want to test it first to make sure all connections are working, and then get “low level feedback” from stakeholders, I think. The real value, of course, is user testing, but that doesn’t mean our stakeholders have no input. Maybe we missed something?
Click to share with stakeholders Ice button in the upper right corner. Stakeholders can leave comments.
You may want to upload for your own testing (which I recommend doing before posting the share with anyone else) Figma Mirror for iOS devices this is Android. When designing on your desktop, simply press to be afraid icon in the upper right corner to enter “Present” mode.
Bonus Step 9: Perform usability tests
If you want to get more qualitative feedback on your design (task completion rate, completion time, etc.), then apps like it Maze and Useberry (who both work with Figman) will help you achieve just that. After all, that’s why we’re spinning, right? To make our design more usable.
Conclusion: Figma has it all
Figma has it all, including a thriving and dedicated community made up of both macOS and Windows designers, and even those who simply want to design with their web browser (and so is Linux!).
So what now? Well, you can explore Figma community, see what they’re doing, and maybe even download Figma plugins to expand and automate your UI design workflow.