Elegant and Effective Website Design with UI and UX Session 07 PDF

y Session 7 nl O se U tre Understanding the Figma Tool...

y Session 7 nl O se U tre Understanding the Figma Tool en C h ec pt rA Fo Elegant and Effective Website Design with UI and UX / S07 / 1 of 10 © Aptech Limited  y nl O Learning Objectives se U ▪ Identify the usage of the Figma Tool tre ▪ List the steps to set up a Figma Account ▪ Explain the Figma interface en ▪ Describe how to manage Figma Components ▪ C Explain the process to create a first design in Figma h ec pt rA Fo Elegant and Effective Website Design with UI and UX / S07 / 2 of 10 © Aptech Limited  Introduction to Figma Tool y nl O se A UI and UX design application U tre Compatible with most file formats en C Figma editor includes design tools h ec Useful for designers to share files and collaborate on a design pt rA Fo Elegant and Effective Website Design with UI and UX / S07 / 3 of 10 © Aptech Limited  Setting Up A Figma Account y nl O se U tre en C h ec pt rA Fo Setting up an Account Elegant and Effective Website Design with UI and UX / S07 / 4 of 10 © Aptech Limited  1-2 y Understanding the Figma Interface nl O se U tre en C h ec pt rA The Figma Dashboard Fo Elegant and Effective Website Design with UI and UX / S07 / 5 of 10 © Aptech Limited  2-2 y Understanding the Figma Interface nl O se U tre en Files C h Pages ec pt rA Fo Projects Elegant and Effective Website Design with UI and UX / S07 / 6 of 10 © Aptech Limited  2-2 y Features of Figma nl O se Connecting with Managing Using the U Adding Lists other Figma Components Inspect Tab Accounts tre en Viewing Figma Using the Updating Community Integrating Instance Swap Menu C Files and Plugin Library Zeplin Projects Real- time h ec pt Intuitive Sharing Design rA Prototyping Feedback Fo Elegant and Effective Website Design with UI and UX / S07 / 7 of 10 © Aptech Limited  Managing Figma Components y nl O se Create and manage consistent U designs across projects Components tre - Elements reused en across designs C Update components h across designs ec pt Stored in rA Assets tab Fo Elegant and Effective Website Design with UI and UX / S07 / 8 of 10 © Aptech Limited  Creating a Design in Figma y nl O se Adding Grids 1. Creating Adding Shapes U a Frame Adding Images tre Adding Text 2. Avoids confusion due to overlapping frames and layers. en Labeling Elements C h ec 3. Organizes designs. Creating pt Groups rA Fo Elegant and Effective Website Design with UI and UX / S07 / 9 of 10 © Aptech Limited  Summary y nl ▪ Figma is a cloud-based UI/UX design tool with capabilities to generate codes, support O interactive prototyping, and create mockup. se ▪ Figma is a browser-based tool, compatible with any OS, and is used to design vectors, applications, and screens. U ▪ Figma supports the idea of teamwork and collaboration. It allows multiple team tre members to work on a single project in real-time. ▪ Figma follows a four-level file structure. en ▪ Figma Editor is a modern design tool that provides options to customize designs as prototypes. C ▪ Prototypes can be shared over real-time with team members and reviewed h simultaneously. Draft files are saved automatically on the cloud for easy retrieval. ec ▪ The Layers and Properties Panel on either side of the frame help in customizing a design and viewing codes. pt ▪ Multiple pages can be created in Figma and collated into a bigger project. rA Fo Elegant and Effective Website Design with UI and UX / S07 / 10 of 10 © Aptech Limited