SlideShare a Scribd company logo
Developing Wireflow diagram for application using open source software
AIM:
To develop a Wireflow diagram for application using Figma
PROCEDURE:
Step 1: Open Figma: Launch the Figma application on your computer.
Step 2: Create a New Figma File: In Figma, click on "New" and choose "New File" to start a new project
specifically for your wireflow diagram.
Step 3: Define the Application's User Flow: Begin by understanding the user flow of your application.
Identify key screens and interactions that users will experience.
Step 4: Create Artboards for Screens: In your Figma file, create individual artboards for each screen of the
application. Artboards represent the visual interface of your app.
Step 5: Design Screen Elements: Within each artboard, design and arrange the user interface elements,
including buttons, text, images, and other components.
Maintain a consistent design throughout.
• Step 6: Linking Screens: Use Figma's interactive features to link screens together. Define interactions, such as tapping a button to
navigate to another screen.
• Step 7: Create Arrows for Navigation: On your artboards, use Figma's line tool to draw arrows or lines that represent the flow of navigation
between screens.
• Step 8: Add Descriptive Text: Include text labels to describe the purpose of each screen and interaction. This helps in clarifying the
wireflow for viewers.
• Step 9: Organize the Flow: Arrange the artboards and arrows in a logical sequence to represent the intended user flow throughthe
application.
• Step 10: Test Interactions: Use Figma's prototype mode to test the interactions and ensure that the wireflow accurately represents the
user journey.
• Step 11: Collaboration and Feedback: Share your wireflow diagram with team members and stakeholders. Allow
them to provide feedback and comments directly within Figma.
• Step 12: Refine and Update: Based on feedback, refine and update the wireflow diagram as needed. Ensure that it
accurately reflects the application's user flow.
• Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in various formats or share it
with relevant team members for implementation.
Exploring various open source collaborative interface Platform
• AIM:
• To explore various open source collaborative interface Platform
• Theory:
• Exploring various open-source collaborative interface platforms is essential for designing user-friendly and efficient digital interfaces. This
document offers an overview of different open-source platforms to facilitate UI/UX design collaboration.
• List of Explored Open Source Collaborative Interface Platforms:
• 1.Figma Community
• 2.GitHub
• 3.GitLab
• 4.InVision Freehand
• 5.Adobe XD (Starter Plan)
• 6.Miro (Free Plan)
• 7.Sketch for Teams (Beta)
• 8.Gravit Designer
• 9.Vectr 10.Penpot

More Related Content

Similar to 1.Figma Community Figma Community offers

Online tools-for-content-development updated
Online tools-for-content-development updatedOnline tools-for-content-development updated
Online tools-for-content-development updated
Ian Sy
 
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
Teamstudio
 
Snapchat - Google Docs.pdf
Snapchat - Google Docs.pdfSnapchat - Google Docs.pdf
Snapchat - Google Docs.pdf
harikacheluru
 
Chapter Ten
Chapter TenChapter Ten
Chapter Ten
Nada G.Youssef
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
AndiNurkholis1
 
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.comPos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
ULLPTT
 
Climberreport
ClimberreportClimberreport
Climberreport
LuckyTolani1
 
Chapter 10 authoring
Chapter 10 authoringChapter 10 authoring
Chapter 10 authoring
shelly3160
 
Unit 2
Unit 2Unit 2
App development process
App development  processApp development  process
App development process
Magora Systems
 
human computer interaction of movie booking system project
human computer interaction of movie booking system projecthuman computer interaction of movie booking system project
human computer interaction of movie booking system project
201roopikha
 
SMARCOS CNR Paper Mashups
SMARCOS CNR  Paper MashupsSMARCOS CNR  Paper Mashups
SMARCOS CNR Paper Mashups
Smarcos Eu
 
Engl317 assignment sheet_project4
Engl317 assignment sheet_project4Engl317 assignment sheet_project4
Engl317 assignment sheet_project4
Zachary Williamson
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019
zainabkashim
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
Shyamala Prayaga
 
Kumar kunal
Kumar kunalKumar kunal
Kumar kunal
kumar kunal
 
AEGIS SP3 story - building an accessible web application
AEGIS SP3 story - building an accessible web applicationAEGIS SP3 story - building an accessible web application
AEGIS SP3 story - building an accessible web application
AEGIS-ACCESSIBLE Projects
 
Android Development Tutorial
Android Development TutorialAndroid Development Tutorial
Android Development Tutorial
Germán Bringas
 
case study
case studycase study
case study
KayvonShams
 
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdfHow to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
Marie Weaver
 

Similar to 1.Figma Community Figma Community offers (20)

Online tools-for-content-development updated
Online tools-for-content-development updatedOnline tools-for-content-development updated
Online tools-for-content-development updated
 
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Appli...
 
Snapchat - Google Docs.pdf
Snapchat - Google Docs.pdfSnapchat - Google Docs.pdf
Snapchat - Google Docs.pdf
 
Chapter Ten
Chapter TenChapter Ten
Chapter Ten
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
 
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.comPos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
Pos 409 pos409 pos 409 forecasting and strategic planning -uopstudy.com
 
Climberreport
ClimberreportClimberreport
Climberreport
 
Chapter 10 authoring
Chapter 10 authoringChapter 10 authoring
Chapter 10 authoring
 
Unit 2
Unit 2Unit 2
Unit 2
 
App development process
App development  processApp development  process
App development process
 
human computer interaction of movie booking system project
human computer interaction of movie booking system projecthuman computer interaction of movie booking system project
human computer interaction of movie booking system project
 
SMARCOS CNR Paper Mashups
SMARCOS CNR  Paper MashupsSMARCOS CNR  Paper Mashups
SMARCOS CNR Paper Mashups
 
Engl317 assignment sheet_project4
Engl317 assignment sheet_project4Engl317 assignment sheet_project4
Engl317 assignment sheet_project4
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
 
Kumar kunal
Kumar kunalKumar kunal
Kumar kunal
 
AEGIS SP3 story - building an accessible web application
AEGIS SP3 story - building an accessible web applicationAEGIS SP3 story - building an accessible web application
AEGIS SP3 story - building an accessible web application
 
Android Development Tutorial
Android Development TutorialAndroid Development Tutorial
Android Development Tutorial
 
case study
case studycase study
case study
 
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdfHow to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
 

Recently uploaded

一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
xnhwr8v
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
BAWAALEX1
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 

Recently uploaded (20)

一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptxTOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
TOWER DESIGN PROCEDURE TOWER DESIGN BASIS .pptx
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 

1.Figma Community Figma Community offers

  • 1. Developing Wireflow diagram for application using open source software AIM: To develop a Wireflow diagram for application using Figma PROCEDURE: Step 1: Open Figma: Launch the Figma application on your computer. Step 2: Create a New Figma File: In Figma, click on "New" and choose "New File" to start a new project specifically for your wireflow diagram. Step 3: Define the Application's User Flow: Begin by understanding the user flow of your application. Identify key screens and interactions that users will experience. Step 4: Create Artboards for Screens: In your Figma file, create individual artboards for each screen of the application. Artboards represent the visual interface of your app. Step 5: Design Screen Elements: Within each artboard, design and arrange the user interface elements, including buttons, text, images, and other components. Maintain a consistent design throughout.
  • 2. • Step 6: Linking Screens: Use Figma's interactive features to link screens together. Define interactions, such as tapping a button to navigate to another screen. • Step 7: Create Arrows for Navigation: On your artboards, use Figma's line tool to draw arrows or lines that represent the flow of navigation between screens. • Step 8: Add Descriptive Text: Include text labels to describe the purpose of each screen and interaction. This helps in clarifying the wireflow for viewers. • Step 9: Organize the Flow: Arrange the artboards and arrows in a logical sequence to represent the intended user flow throughthe application. • Step 10: Test Interactions: Use Figma's prototype mode to test the interactions and ensure that the wireflow accurately represents the user journey.
  • 3. • Step 11: Collaboration and Feedback: Share your wireflow diagram with team members and stakeholders. Allow them to provide feedback and comments directly within Figma. • Step 12: Refine and Update: Based on feedback, refine and update the wireflow diagram as needed. Ensure that it accurately reflects the application's user flow. • Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in various formats or share it with relevant team members for implementation.
  • 4.
  • 5. Exploring various open source collaborative interface Platform • AIM: • To explore various open source collaborative interface Platform • Theory: • Exploring various open-source collaborative interface platforms is essential for designing user-friendly and efficient digital interfaces. This document offers an overview of different open-source platforms to facilitate UI/UX design collaboration. • List of Explored Open Source Collaborative Interface Platforms: • 1.Figma Community • 2.GitHub • 3.GitLab • 4.InVision Freehand • 5.Adobe XD (Starter Plan) • 6.Miro (Free Plan) • 7.Sketch for Teams (Beta) • 8.Gravit Designer • 9.Vectr 10.Penpot