Create Mockups and Clickdummies for Fiori Applications using Figma and the Fiori Design Stencils

[Max_Futurisma]

Fiori standard apps have brought about a revolution in offering a consistent, well-designed user experience. But there's no one-size-fits-all in the world of UI/UX. Often, there’s a need for custom Fiori apps, tailored to user requirements.

Whenever you're faced with building such a custom Fiori/UI5 application, a mockup or clickdummy can be invaluable.

It's like getting a sneak peek of the final product before it’s built. Let’s unravel the significant advantages this approach offers:

1. Gather and Implement Feedback Early: By receiving user feedback upfront, developers can make changes before diving deep into coding, saving time and resources.


2. Boost Efficiency: Detailed mockups aid analysts in crafting clear User Stories, while developers get a clear UI blueprint, minimizing time-consuming meetings.


3. Involve Users: By giving users a voice in the design process, they're more likely to embrace the final application, easing change-management and user acceptance.


4. Innovative Designs: Leveraging the Fiori Design Stencils, you can design innovatively rather than on-the-fly. This ensures users get the very best functionality.


5. Share the Vision: For those in expansive project teams, mockups help illustrate your future vision, guiding and inspiring the team.

The benefits are clear. So, why wait? Dive in!

Getting Started with Figma and the Fiori Design Stencils

Resource	Further Information
Figma	Your go-to tool for mockups and clickdummies
SAP Fiori Design Stencils	SAP's official templates, perfect for crafting detailed mockups for Fiori Apps.

To begin creating mockups and clickdummies for Fiori applications, you'll need the appropriate tools and assets. This involves setting up an account for Figma, and downloading and importing the SAP Fiori Design Stencils. Below are detailed instructions.

1. Sign Up on Figma:
   
   
   
   • It’s free!
   
   
   
   


2. Install the Figma Desktop Client:
   
   
   
   • Figma works in the browser. But, for optimal performance, download the desktop client.
   
   
   
   


3. Download the Fiori Design Stencils:
   
   
   
   • The gold mine for any Fiori app designer. Download them here.
   
   
   
   


4. Install Necessary Fonts:
   
   
   
   • Once you have downloaded the Fiori Design Stencils, unzip and install:
     
     
     
     • Font 72
     
     
     • Business Icons
     
     
     
     
   
   
   
   


5. Import the Fiori Design Stencils into Figma:
   
   
   
   • Launch Figma, click "Import", and choose the *.fig file (f.e. “S_4HANA Web UI Kit – Compact.fig”).
   
   
   • Once imported, you can open up and explore the UI components that the Fiori Design Stencils offer.
   
   
   
   

Create Mockups and Clickdummies for Fiori Apps using Figma and the Fiori Design Stencils

Create a new Figma File

Launch Figma. At the top right corner, click on “+ Design file”. This will open up a new tab with a blank canvas ready for your creativity.

The file will be initially named “Untitled”. To give it a descriptive name, double-click on the title in the top center of the Figma window. Rename it to something that aligns with the project's purpose or the specific mockup you’re designing.

Figma's intuitive interface lets you easily manage multiple files and switch between them. Plus, your work is auto-saved, so no manual saving is required.

Sketch an initial UI draft for the Fiori application

Before diving straight into the UI design, get a clear visualization. Sketch out your initial concepts. This could be on paper, through software like Paint or PowerPoint, or directly in Figma using basic shapes.

Reflect on some guiding questions to help shape the draft:

• What challenges or needs are the users facing?


• How will the application address those needs?


• What's the primary function or highlight of the app?


• How many screens or pages will the application have? How will users navigate between them?

For a systematic approach, create wireframes. These are essentially the skeletons of your application, highlighting the structure and main areas without getting into detailed design elements.

A sketch doesn't have to be a Picasso

Create a Page-Template for your new Fiori Application

If you want to design one or more mockups for your Fiori applications it's quite helpful to create yourself a page-template.

A page-template serves as a foundational blueprint for all the pages you plan to design.

Don't worry about starting from zero – the Fiori Design Stencils have got you covered:

1. Open the previously imported Fiori Design Stencils file.


2. Scroll to find the "Initial Page".


3. On the canvas, you'll notice two "Initial Page" floorplan versions in varying resolutions. Select the first, copy it (Ctrl + C), then navigate to your design file and paste (Ctrl + V).

Voila! You've successfully incorporated your first Fiori Design Stencil into your design file.

Now, to fine-tune your page-template:

1. Select it and adjust the dimensions in the "Frame" section (top-right) to a width of 1920 and height of 1080 for Full-HD resolution.


2. Right-click and choose "Detach Instance" for more flexibility in editing.


3. Remove the header containing the "Enter product" field to optimize space.


4. Delete the "Choose a product" illustration.


5. Adjust the application title (currently "Post Goods Receipt") to your desired name.

In the end your page-template should look something like this:

A page-template like I'm using it for this example

Designing the UI using the Fiori Design Stencils

Having sketched our initial UI draft, we're now advancing to create a detailed mockup from it.

Start by identifying relevant UI elements from the Fiori Design Stencils and integrate them into the page-template we've already established.

For our current project, we aim to incorporate a table. The Fiori Design Stencils offer various table types, including Grid, Tree, Analytical, and Responsive tables. While the array of choices might seem overwhelming, any of these would work for your initial mockup. My suggestion? Opt for the "Responsive Table".

To locate this UI element:

1. Revisit the Fiori Design Stencils file we imported earlier.


2. Navigate through its pages until you encounter the desired element.

Upon reaching the "Responsive Table" section, you'll find multiple templates reflecting different table states, like Display Mode or Edit Mode. Select your preferred template, copy it, and then paste it into your design file. Adjust its position effortlessly with drag-and-drop.

Personalizing the table is straightforward in Figma. You can modify data, conceal certain columns or buttons, and adapt it to meet your specific needs. For visual aids, check out the tutorial video at the start of this post.

When working with a Fiori UI element in Figma, the right-hand panel allows you to tweak properties. For instance, you can easily transition our table to "Edit Mode" using the provided toggle.

Follow this process for every Fiori UI element you wish to incorporate into your mockup.

An example mockup I created for this blog post

Building a Clickdummy

For those who've designed multiple mockups, arranging them into a clickdummy offers an interactive way to present your vision. It’s like giving a test drive of the app without the engine (code) inside.

With Figma, transitioning from design to prototyping is seamless. Simply select your initial mockup, then, using the top-right panel, switch to "Prototype" mode. Set the chosen mockup as the "Flow starting point" with a click on the "+" button, ensuring it always displays first.

Prototyping itself is straightforward. To create transitions between mockups:

1. Identify and select the UI element that should initiate the transition.


2. A small circle will appear on the selection box of this element.


3. Drag from this circle to the desired target mockup.

Repeat these steps for all necessary transitions in your clickdummy.

To preview the interactive prototype, click the play-button at the top right. A window will display your clickdummy, allowing you to navigate through the transitions. Want feedback? Share your clickdummy using the provided link, making collaboration with colleagues easy.

Clickdummy that has been created in Figma

The Sky is the Limit

Congratulations! You've created your first Fiori mockup and clickdummy.

This skill opens a world of possibilities for you. Creating mockups ensures that you can visualize and validate design concepts before development, fostering efficient collaboration with developers and stakeholders. It's a proactive approach that minimizes rework, streamlines user feedback, and paves the way for user-centric designs. Essentially, you're now better equipped to bridge the gap between design vision and final implementation, optimizing user experience from the outset.

If you're new to Figma, there might be a learning curve. But remember, proficiency comes with practice.

Consider enrolling in some of Figma's many masterclasses. They'll accelerate your learning and help you tap into the tool's full potential.

By opting for a paid Figma subscription, you can effortlessly integrate the Fiori Design Stencils as a library. For guidance on this, check out the tutorial on the Fiori Design Stencils' official website.

A huge thanks to the numerous UX Designers at SAP who maintain the SAP Fiori Design Stencils and the Fiori Design guidelines. You've been instrumental in my journey as an SAP Fiori UX Designer for years!