diff --git a/VAMobile/documentation/docs/UX/How-We-Work/building-screens-figma.md b/VAMobile/documentation/docs/UX/How-We-Work/building-screens-figma.md index 3d6ca6bf62f..e7e1eb417b6 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/building-screens-figma.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/building-screens-figma.md @@ -10,10 +10,10 @@ sidebar_position: 6 ## Step 1: Create your frame 1. Create a frame at 360 x 760. -2. In the assets panel, search “template” and drag the appropriate template (home, health, benefits, payments) into the frame. -3. After adding the template to the frame, you can then select that template layer, which will give you options in the design panel on the right-hand side of the screen. In this panel, you can select the sub-template (feature, subtask, etc.). +2. In the assets panel, search “template” and drag the template into the frame. +3. After adding the template to the frame, you can then select that template layer, which will give you options in the design panel on the right-hand side of the screen. In this panel, you can select the category (home, health, benefits, payments) and template type (feature, subtask, etc.). -![Screenshot of the design panel in Figma](/img/figma/design-panel.png) +![Screenshot of the design panel in Figma](/img/figma/figma-screen-template-properties.png) ## Step 2: Add your content @@ -32,10 +32,13 @@ _Note: You can always go back and make changes to the content component that you After you’ve created all of the shipped screens in light mode, you may need to create dark mode versions of your screens. -1. To create dark mode versions, select all of your light mode layers and duplicate them (on Mac, you can hold down options and click + drag to duplicate). _We recommend visually grouping light mode versions together and dark mode versions together._ +1. To create dark mode versions, select all of your light mode layers and duplicate them (on Mac, you can hold down option and click + drag to duplicate). _We recommend visually grouping light mode versions together and dark mode versions together._ 2. We recommend adding light and/or dark mode to each of your frame names within your shipped file. For example, you may name one of your light mode frames “Profile / Landing / Light” and the dark mode frames “Profile / Landing / Dark”. -3. After you have duplicated your light mode versions, you’ll need to change the color mode. You can adjust the mode by selecting the template layer within each dark mode frame and selecting “dark” from the Mode option in the design panel on the right-hand side. -4. You will also need to update each of your components within your content area to dark mode. The easiest way to do this is to select each component layer within the “Layers” panel on the left (you may have to click the option to “See All Layers”). You’ll want to look for the “Content” layer and may have to go several layers deep within this layer to find your individual component layers. Then, select “Dark” in the mode area within the design panel. +3. After you have duplicated your light mode versions, you’ll need to change the color mode. You can adjust the mode by clicking the change variable mode icon and switching each library to "Dark" (see screenshot below). + +![Change variable mode icon in Figma](/img/figma/figma-change-variable-mode-icon.png) + +4. You may also need to update some of your components within your content area to dark mode. The easiest way to do this is to select each component layer within the “Layers” panel on the left (you may have to click the option to “See All Layers”). You’ll want to look for the “Content” layer and may have to go several layers deep within this layer to find your individual component layers. Then, select “Dark” in the mode area within the design panel. 1. Figma is not without glitches and will sometimes return your component to its default settings when switching the color mode. When this happens, sometimes resetting the component will fix it. You can do this by clicking the icon with 3 dots (“...”) in the design panel. Click the icon and select “Reset all changes” (see screenshot below). If this doesn’t work, you may have to update each component manually. 2. When using the “Text Area” and “Default List” components, you may have to update each row within the component to dark mode vs. updating the entire component at one time. This will often prevent the content from restoring to default. diff --git a/VAMobile/documentation/docs/UX/How-We-Work/designing-ui.md b/VAMobile/documentation/docs/UX/How-We-Work/designing-ui.md index 4d6235233ee..b81043d94ed 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/designing-ui.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/designing-ui.md @@ -5,7 +5,7 @@ sidebar_position: 3 ## UI best practices -- **Use [components](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/ComponentsSection/) already available** in the system. +- **Use [components](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/Flagship%20design%20library/Components/Overview) already available** in the system. - Use [Balsamiq](https://balsamiq.cloud/s4uw4la/pnnwuqv) or another **lower fidelity tool to ideate** - If you are working on an existing feature, **take a look in the app using demo mode** to see how it’s currently working. Figma’s shipped screens are our best examples of how it should look, but there may be some inconsistencies. - Consider which [screen type](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/Flagship%20design%20library/Templates/ScreenTypes) to use. @@ -17,25 +17,21 @@ sidebar_position: 3 There are a few paths that can be taken when updating existing features or creating new features. - **Most common: Using existing component(s) with no updates** - - Ideally, we’re using the building blocks we already have when adding new features to the app. If there is an existing component in the library that can be used and does not need to be changed, team members should add the component from the [VA Mobile App Design Library](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/VA-Mobile-Design-Library?node-id=1028%3A3927) and** avoid detaching it in your working file**. + - Ideally, we’re using the building blocks we already have when adding new features to the app. If there is an existing component in the library that can be used and does not need to be changed, team members should add the component from the design system's [Component Library](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?m=auto&node-id=0-1&t=eKUAt5IA4XlJEuk5-1) and/or the [VA Mobile App Design Library](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/VA-Mobile-Design-Library?node-id=1028%3A3927) and** avoid detaching it in your working file**. - **Rare: Using existing component(s) with some updates** - If you believe the existing component needs to be changed, add the component from the [VA Mobile App Design Library](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/VA-Mobile-Design-Library?node-id=1028%3A3927) and **detach it for ideation**. - - If components have been changed, have them reviewed by the [Component Committee](https://docs.google.com/document/d/1rgNpTvUjZR6E2Z6vfSrxLxvXt7Zxq1Jq6kw6TCDJbBk/edit?pli=1#bookmark=id.pv64bxlp7e6c) before finalizing your design. - Once approved, work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian/) to add it to the library. - **Caution: Making a new component** - If a design requires a new component, try using [Balsamiq](https://docs.google.com/document/d/1rgNpTvUjZR6E2Z6vfSrxLxvXt7Zxq1Jq6kw6TCDJbBk/edit?pli=1#heading=h.7jcyyrw27o8y), pen and paper, or your favorite low fidelity tool to ideate on ideas. - - When you’re ready, prep documentation for the component by following [how to document components](https://docs.google.com/document/d/1pC-Pyc_HDZMtHb17XRND_57u7H8I3IDATUDGgGxFZAg/edit#heading=h.iwlf7nqnidb). - - You will be invited to a meeting and will review the component and the documentation with the Component Committee. _Note: These do not have to be high fidelity designs._ + - When you’re ready, prep documentation for the component by following [how to document components](https://department-of-veterans-affairs.github.io/va-mobile-app/design/About/Contributing%20to%20the%20design%20system/writing-component-documentation). - Once approved, work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian/) to add it to the library. ### Best practices in Figma -- Follow the rules around [where we work in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/where-we-work#ui-library-and-feature-designs---figma). Generally, most of your work will be done in the [working file](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/where-we-work#categoryname) for the category your feature is in. - When starting a new feature, work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian/) to create a new working file. -- Every working file should include a **Cover** and **Readme** page in your file. - - Readme page orients people to your file and the work in general. It should contain project info, important links, team members, etc. -- In your working file, **avoid creating local components**. +- Follow the rules around [where we work in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/where-we-work). Generally, most of your work will be done in the working file for the category your feature is in. +- Every working file should include a **Cover** page in your file. +- In your working file, **avoid creating local components** unless it is a new component that will ultimately be imported into the Flagship or Component Library. - Tagging folks in comments can be a good way to communicate and work async. Try to have longer discussions outside of comments. ## Documenting your work @@ -45,23 +41,24 @@ There are a few paths that can be taken when updating existing features or creat ## Prepping your work for handoff -Once designs are ready to be handed off to the engineering team, you can review this checklist before handoff to make sure you’ve covered everything the FE team will need. +Once designs are ready to be handed off to the engineering team, you can review this checklist before handoff to make sure you’ve covered everything that the FE team will need. ### Variations - 1. Determine data organization (e.g. how is a list sorted, does it need filtering, etc) 2. Create designs with data variations (e.g. examples for lots of data, not much data) 3. Document and create designs of error states and unhappy paths 4. Document and create designs of empty states 5. Consider your design with fonts enlarged or varying screen sizes 6. Consider dark mode versions of designs +7. Annotate your design using the [VADS Web Annotation Kit](https://www.figma.com/design/CZcnWfQOwtLqPm4WA5paYG/VADS-Web-Annotation-Kit?node-id=415-1135&t=AA1kuENFcAY6o5JH-1). + - _Note: There is a [mobile / iOS version of the annotation kit](https://www.figma.com/design/MWuEixKG2VG90fBwqSBvZS/TESTING---VADS-iOS-Annotation-Kit?t=XiMx6pFh9fDRwHz9-0) that is still in progress. If you need an annotation that is mobile-specific, you may be able to find it in this kit. If you need something that is not available in either kit, please contact accessibility to determine the best option._ ### IA/Flows 1. Document the IA of your feature & where it lives in the app -See: [Determining Navigation & Information Architecture Placement for New VA Mobile App Features](https://docs.google.com/document/d/1XQcYxnCifloaBFNKL2C9JNS7KIj6wEhb4VokPGxBZU8/edit), [VA Mobile app: Detailed sitemap (future state 9-30-22](https://app.mural.co/invitation/mural/adhoccorporateworkspace2583/1655989910332?sender=u28718b63c8993f515e0b2240&key=6f96be43-72c9-4ae6-b529-a2941eb14ba9) + - See: [Determining Navigation & Information Architecture Placement for New VA Mobile App Features](https://docs.google.com/document/d/1XQcYxnCifloaBFNKL2C9JNS7KIj6wEhb4VokPGxBZU8/edit) and [VA Mobile app: Detailed sitemap (future state 9-30-22](https://app.mural.co/invitation/mural/adhoccorporateworkspace2583/1655989910332?sender=u28718b63c8993f515e0b2240&key=6f96be43-72c9-4ae6-b529-a2941eb14ba9) 2. Update category screens, if needed 3. Document intended flow 4. Defined back labels and screen title @@ -69,10 +66,11 @@ See: [Determining Navigation & Information Architecture Placement for New VA Mob ### Reviews -1. Present at Show and Tell or have a peer review your work -2. Complete an accessibility review, if needed -3. Receive sign-off from content designer on all copy -4. Review components with [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) +1. Have a peer review your work +2. Receive a sign-off from accessibility on the designs and annotations +3. Receive a sign-off from the content designer on all copy +4. Review component updates and/or additions with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) + - The Design Librarian will review the updates with the design system team to determine if we will need to coordinate with them on any component updates and/or additions. ### Prepping for handoff @@ -80,33 +78,39 @@ See: [Determining Navigation & Information Architecture Placement for New VA Mob 1. Add Figma links and screenshots of designs (light and dark mode) to appropriate tickets 2. Create pages for each FE implementation ticket in the working file as outlined in the [Figma file workflow](https://www.figma.com/file/myVAkBM6nrpt3iC39RyjXz/%F0%9F%A7%B0-FigmaFileWorkflow---Resource---VAMobile?node-id=344%3A279&t=jC6U9HEvK543P9i4-1) 3. Check with Product about when work will be handed off -3. Plan to attend FE handoff meeting to answer any questions +3. Plan to attend a FE handoff meeting to answer any questions ## Handing off and following along ### Development Handoff - - Team members should expect to do a design walkthrough with engineering as part of the handoff process. In the design walkthrough, team members should be prepared to answer questions related to flow, error/empty states, and design decisions_. See prepping your work for handoff above._ -- After the design walkthrough, team members should make any updates to designs, and ensure that appropriate tickets are updated with the intended flow, Figma links, and screenshots. -- As designs are being implemented by the engineering team, team members should respond to questions (in Slack and Zenhub) in a timely manner and communicate with the front-end team (engineers and product manager) to collaborate on refinements. + - Team members should expect to do a design walkthrough with engineering as part of the handoff process. In the design walkthrough, team members should be prepared to answer questions related to flow, error/empty states, and design decisions. See [prepping your work for handoff](#prepping-your-work-for-handoff) above. + - After the design walkthrough, team members should make any updates to designs, and ensure that appropriate tickets are updated with the intended flow, Figma links, and screenshots. + - As designs are being implemented by the engineering team, team members should respond to questions (in Slack and/or Zenhub) in a timely manner and communicate with the front-end team (engineers and product manager) to collaborate on refinements. + ### QA - QA will be QAing AC in tickets throughout the entire development process for a project/feature. -- Each epic should have visual, interaction, and content QA (aka UX QA) completed before release. +- Each epic should have visual, interaction, accessibility, and content QA (aka UX QA) completed before release. - The exact plan and timing for UX QA can vary across features - you will collaborate with Product and QA to ensure that everyone has the same understanding of what will work best for any given feature. That being said, here are some general guidelines: - For large features/features with brand new components, do a round of visual and interaction QA early in development (~when implementation ticket is in PR review). - - For all features, do visual, interaction and content QA on the 'last needed bug fixes build' for a feature, at the same time that QA is doing their fix verification and regression testing. + - For all features, do visual, interaction, accessibility, and content QA on the 'last needed bug fixes build' for a feature, at the same time that QA is doing their fix verification and regression testing. - Use the FE handoff pages in the working file to compare the work. - - For using real test users/data, see this [Slack thread on logging in as a test user](https://adhoc.slack.com/archives/C02F8TLNSGY/p1666966698246379).) + - For using real test users/data, see this [Slack thread on logging in as a test user](https://adhoc.slack.com/archives/C02F8TLNSGY/p1666966698246379). - On your testing device, complete a QA of the feature’s happy path. - If you need a testing user to reach a particular screen or edge case, you can message a QA engineer in Slack for help. - If bugs/issues are found, log a ticket. Here are examples of a UX bug ([4009](https://github.com/department-of-veterans-affairs/va-mobile-app/issues/4009)) and a content bug ([4121](https://github.com/department-of-veterans-affairs/va-mobile-app/issues/4121)). - If you notice that QA engineering is not finding bugs that should have been caught in earlier tickets, let QA know, so they can improve their work. + ### Launching -- For major features, team members should expect to work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) and the Product team to prepare app store content. +- For major features, team members should expect to work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) and the Product team to prepare the [app store content](https://didactic-robot-p9wpqpp4wwh99w-3000.app.github.dev/va-mobile-app/docs/Operations/Updating%20the%20App%20Stores). ## Moving/Publishing Work +### Library updates + +- When the design work is complete and is approved for launch, work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) to implement any needed updates into the [Flagship Library](https://www.figma.com/design/QVLPB3eOunmKrgQOuOt0SU/Flagship-Library---%F0%9F%93%90-Resource---VA-Mobile?m=auto&node-id=719-1428&t=FZCBblfdhmL0HUbe-1). + ### Move work to shipped file -- When the design is live in the app, the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) will work with you to create a shipped file as outlined in the [Figma file workflow](https://www.figma.com/file/myVAkBM6nrpt3iC39RyjXz/%F0%9F%A7%B0-FigmaFileWorkflow---Resource---VAMobile?node-id=344%3A279&t=jC6U9HEvK543P9i4-1). +- When the design is live in the app, work with the [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) to create a shipped file as outlined in the [Figma file workflow](https://www.figma.com/file/myVAkBM6nrpt3iC39RyjXz/%F0%9F%A7%B0-FigmaFileWorkflow---Resource---VAMobile?node-id=344%3A279&t=jC6U9HEvK543P9i4-1). \ No newline at end of file diff --git a/VAMobile/documentation/docs/UX/How-We-Work/figma-components.md b/VAMobile/documentation/docs/UX/How-We-Work/figma-components.md index 4c14b818eac..af10ba90bc9 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/figma-components.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/figma-components.md @@ -8,15 +8,15 @@ sidebar_position: 6 * **Component configuration** * All components should have “simplify all instances” checked. * For components on the doc site: - * **Description**: Add a short description of how the component should be used from the [documentation site](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/ComponentsSection/). - * **Link**: Add a link to the component’s page on the [documentation site](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/ComponentsSection/). + * **Description**: Add a short description of how the component should be used from the documentation site. + * **Link**: Add a link to the component’s page on the documentation site. * For components that only live in Figma and do not appear on the doc site: * **Description**: Add a short description of how the component should be used. * *Note: Most Figma-only components are sub-parts or building blocks of another component in Figma. They exist in Figma to allow designers to build and use components, but are not required from an engineering perspective. For one component in Figma, there can sometimes be multiple Figma-only components.* * **Colors** - * All colors should be pulled from the [Design Tokens file](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/%F0%9F%93%90-DesignTokens1.0---Library---VAMobile) (not light/dark theme files). + * All colors should be pulled from the [Design Tokens file](https://www.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?m=auto&t=KYbckwsxuA27CJcc-7) (not light/dark theme files). It is also recommended that you use any semantic tokens that are available. * **Typography** - * All text styles should be pulled from the [Design Tokens file](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/%F0%9F%93%90-DesignTokens1.0---Library---VAMobile) (not light/dark theme files). + * All text styles should be pulled from the [Foundations Library](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/%F0%9F%93%90-DesignTokens1.0---Library---VAMobile) (not light/dark theme files). * **Autolayout** * Components must be set up to automatically vertically resize as text changes. * Typically, a component’s height will need to be set to “hug” to accomplish this. @@ -28,7 +28,6 @@ sidebar_position: 6 * Properties should be listed in an order that mimics the component’s visual layout from top to bottom and left to right. * For main components, show nested properties as appropriate. * Variants should be named and set up consistently. - * **Mode**: Always appears first. Options include Light and Dark. * **Type**: Appears below Mode. Used for things like Primary / Secondary or H1 / H2. * **Layout**: Appears below Type. Used for things like Horizontal / Vertical or varying quantities. * **State**: Appears below Layout. Used for things like Focus / Active or Open / Closed or Active / Inactive. @@ -42,39 +41,4 @@ sidebar_position: 6 * Add content fields for every editable content area. * Header and title fields should be named descriptively – i.e. header / title or header 1, header 2, etc. * Body copy fields should always be named “content”. - * Fields such as labels, tags, and buttons should be named descriptively – i.e. button text. - -## How to set up icons - -### Adding icons to the library -1. Log in to [Font Awesome (version 5.15.4)](https://fontawesome.com/v5/search) and look for the specific icon. -2. Click SVG and then right click and copy the SVG code snippet. -3. In the Figma [Design Library](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?node-id=719%3A1428&t=mZejOtPIYdGFPfth-1), paste the SVG code snipped onto the “Design Elements” page. -4. In the right panel, select “constrain proportions” and set the longest side of the SVG to 24px. This will scale it appropriately. -5. Then, add any color variants for the icon. - -### Preparing icons for handoff -#### Duotone icons -1. Open [Icons 2.0](https://www.figma.com/file/cLGkWCYparhoT1kDSw0xX4/%F0%9F%93%90-Icons-2.0---VAMobile?node-id=0%3A1&t=cuVnHqvFVGMX3KrI-1) file in Figma -2. Log in to [Font Awesome (version 5.15.4)](https://fontawesome.com/v5/search) and look for the duotone icon. - * If it exists, copy the SVG code snippet and paste it into the Figma file. - * Remove the frame and resize the icon so that the longest side is 24px. - * If it does not exist, look for the version without the circle. Copy the SVG code snippet and paste it into the Figma file. - * Remove the frame and resize the icon to fit inside of the 24px circle. Depending on the icon, it will most likely be around 12 to 16 px. - * Draw a 24x24px circle, center the icon inside of the circle, and subtract it. - * Place another copy of the icon on top of the circle, center it, and group the layers. -3. Label the group layer with the name of the icon – always use the same name that FE uses. -4. Change the center fill of the icon to #FFFFFF and the circle to #000000 fill. -5. Click on the group layer and select export SVG. -6. In your downloads, right click and select "Open with" > "Text edit." -7. Copy the code from the text edit and send to FE. Ask FE to review and make sure it is working as expected. - -#### Single layer icons -1. Open [Icons 2.0](https://www.figma.com/file/cLGkWCYparhoT1kDSw0xX4/%F0%9F%93%90-Icons-2.0---VAMobile?node-id=0%3A1&t=cuVnHqvFVGMX3KrI-1) file in Figma -2. Log in to [Font Awesome (version 5.15.4)](https://fontawesome.com/v5/search) and look for the icon. Copy the SVG code snippet and paste it into the Figma file. -3. Remove the frame and resize the icon to fit inside of the 24px circle. -4. Label the vector layer with the name of the icon – always use the same name that FE uses. -5. Change fill to #000000. -6. Click on the vector layer and select export SVG. -7. In your downloads, right click and select "Open with" > "Text edit." -8. Copy the code from the text edit and send to FE. Ask FE to review and make sure it is working as expected. \ No newline at end of file + * Fields such as labels, tags, and buttons should be named descriptively – i.e. button text. \ No newline at end of file diff --git a/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md b/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md index cd6b1fa2552..158174a5511 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md @@ -55,19 +55,13 @@ All of our Figma files are set so “**anyone with the link can view**.” If yo |Guests|View only|View only|View only| - -### Setting permissions for libraries -* For **01 Design Libraries project**, set the Owner as the UX Lead and add the Design Librarian as an editor. Then, set the share settings so “Members of VA Mobile App can view.” -* For **library files**, set the Owner as the UX Lead. Then, set the share settings so “Anyone at Ad Hoc with the link can view.” - - #### Library permissions by role |Team member|Library project|Library files| |--- |--- |--- | |UX Lead|🔑 Owner|🔑 Owner| |Design Librarian|✅ Can edit|✅ Can edit| -|UX Designer|View only - Required to create a branch to edit|View only - Required to create a branch to edit| -|UX Content|View only - Required to create a branch to edit|View only - Required to create a branch to edit| +|UX Designer|✅ Can edit|✅ Can edit| +|UX Content|✅ Can edit|✅ Can edit| |UX Researcher|View only - Able to use library in drafts|View only - Able to use library in drafts| |Product|View only - Able to use library in drafts|View only - Able to use library in drafts| |Engineering|View only - Able to use library in drafts|View only - Able to use library in drafts| diff --git a/VAMobile/documentation/docs/UX/How-We-Work/index.md b/VAMobile/documentation/docs/UX/How-We-Work/index.md index 0f63e765689..29071ef5c76 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/index.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/index.md @@ -6,5 +6,6 @@ title: How We Work - [Designing the UI](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/designing-ui) - [Design Librarian](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/design-librarian) - [Branching in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/figma-branching) +- [Building screens in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/building-screens-figma) - [Creating components in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/figma-components) - [Permissions and sharing in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/figma-permissions) \ No newline at end of file diff --git a/VAMobile/documentation/docs/UX/How-We-Work/where-we-work.md b/VAMobile/documentation/docs/UX/How-We-Work/where-we-work.md index 28f0c04da58..eca51ed80f4 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/where-we-work.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/where-we-work.md @@ -7,99 +7,88 @@ sidebar_position: 1 ## Whiteboarding - ### Mural +Whiteboarding software used to brainstorm, do group work, and synthesize research. -Main whiteboarding software where we brainstorm, do group work, and research synthesis. +### FigJam +Whiteboarding software that comes with Figma. We use this to do group work, map out user flows, and brainstorm ideas. Might eventually replace Mural. +## Wireframing -### Figjam +### Pen and paper -Optional software that comes with Figma. We’ve used this to do group work, map out user flows, and brainstorm. Might eventually replace Mural but for now when in doubt use Mural. +Feel free to go old school when drafting up ideas. Photos of low fidelity drawings can be inserted in Mural, FigJam, Figma, Google docs, Zenhub tickets, etc. -## Wireframing +### Balsamiq +Where designers are encouraged to work on wireframes and low-fidelity designs. We have two workspaces: +* [UX Brainstorm and Working](https://balsamiq.cloud/s4uw4la/pnnwuqv) for ideation and work in progress. +* [UX Ready to Handoff](https://balsamiq.cloud/s4uw4la/pa3zodh) where we move finished work we want to talk to with the larger team. -### Pen and paper +## Prototyping -Feel free to go old school when drafting up ideas. Photos of low fidelity drawings can be inserted in Mural, Google docs, Figma, Zenhub tickets, etc. +Both Balsamiq and Figma can be used to develop prototypes, although we typically develop them in Figma. +## Design -### Balsamiq +We use Figma for design work. This is where we maintain our UI libraries and work on high-fidelity designs, prototypes, and content. Each project within the VA Mobile team has a specific purpose. -Where designers are encouraged to work on wireframes and low-fidelity designs. We have two workspaces: +### Flagship team +#### Design Resources 🧰 +- Includes Flagship libraries, UI kits, and templates for working/shipped files + - The Flagship Library is used for flagship-specific components that have not been built into the design system yet. +- Who uses this: UX teams +#### Global 🌎 +- Includes research, working files, shipped files, prototypes, and product management files +- Who uses this: Global team -* [UX Brainstorm and Working](https://balsamiq.cloud/s4uw4la/pnnwuqv) for ideation and work in progress. -* [UX Ready to Handoff](https://balsamiq.cloud/s4uw4la/pa3zodh) where we move finished work we want to talk to with the larger team. +#### Health & Benefits 🏥 +- Includes research, working files, shipped files, prototypes, and product management files +- Who uses this: Health and benefits team +### Platform team -## Prototyping +#### API & QART 🚀 +- Includes App Store Images and device UI kits +- Who uses this: API & QART teams -Both Balsamiq and Figma can be used to develop prototypes, although we typically develop them in Figma. +#### Design System 📐 +- Includes Design System libraries, working files, and product management files +- Who uses this: Design system team +### Other -## UI Library and Feature Designs - Figma - -Where we keep our UI library and work on high-fidelity designs, prototypes, and content. Each Project within the VA Mobile team has a specific purpose: - -### 00 Start here 🧰 -Meant to orient folks to Figma organization and how to work. -- [Figma folder structure](https://www.figma.com/file/lWuA27DkIcFXZLnr2d960F/%F0%9F%A7%B0-FigmaFolderSetup---Resource---VAMobile?node-id=487%3A1386&t=UZQWXX9DFDz50aLt-1) 🧰 - - How we organize projects in Figma -- [Figma file workflow](https://www.figma.com/file/myVAkBM6nrpt3iC39RyjXz/%F0%9F%A7%B0-FigmaFileWorkflow---Resource---VAMobile?node-id=344%3A279&t=jC6U9HEvK543P9i4-1) 🧰 - - How we work on (and communicate the status of) projects in Figma -- [Figma file thumbnail + file naming convention](https://www.figma.com/file/fX8N9Y9Dz2Gtm3Syjjv4tR/%F0%9F%A7%B0-FigmaThumbnailTemplate---VAMobile?node-id=512%3A43&t=gNw3kFTFWViXpZwy-1) 🧰 - - How to use thumbnails and name files -### 01 Design Libraries - -1.0 = App MVP, 2.0 = App with new navigation & beyond - -- 📐[Design Tokens 1.0](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/%F0%9F%93%90-DesignTokens1.0---Library---VAMobile?node-id=952%3A17&t=Cj3aArAf6rU0EF9T-1) - - The Design Tokens file includes colors and text styles. In the future, this file may include additional tokens such as spacing and sizing. - - Design tokens are set up to be used within the Design Library components by using the [Tokens Studio plugin](https://www.figmatokens.com/). - - This is currently a work in progress. If you have questions, ask the Design Librarian. - - Light and dark mode are currently managed by the [Light Theme 1.0](https://www.figma.com/file/yXL0MkEKyAPGXPZqRH0VFZ/%F0%9F%93%90-LightTheme1.0---Library---VAMobile?t=RcdT8wghx0Oab3F1-1) and [Dark Theme 1.0](https://www.figma.com/file/gOhb2kZvoQiXiGigqWZhnx/%F0%9F%93%90-DarkTheme1.0---Library---VAMobile?t=RcdT8wghx0Oab3F1-1) files. - - This is currently a work in progress. If you have questions, ask the Design Librarian. - - Only the owner (UX lead) and current Design Librarians have permission to edit this file. - - Who uses this file: Designers on our team - - 📐[Design Library 1.0](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/VA-Mobile-Design-Library?node-id=1028%3A3927) - - The Design Library file includes finalized components. Components are added to this file after they’ve been vetted in production and approved by QA. - - Components are set up to be used within feature files. - - Only the owner (UX lead) and current Design Librarians have permission to edit this file directly. Everyone else is listed as a viewer. - * Regardless of permissions, we should never edit the main file. Instead, we should create a branch and ask the Design Librarian to review our edits before merging them into the main file. [More about branching in Figma](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/UX/How-We-Work/figma-branching). - - Who uses this file: Designers on our team -### [CategoryName] -- 🔍[FeatureName] - Working - VAMobile - - Where designers are making features, handing off to ENG & QA - - Also includes explorations for existing features that we aren’t moving forward with but want to keep a record of. - - If you are designing using existing components please use the ones from the Design Library. - - If you are building new components you can create them here. If adopted they will eventually move to the Design library. - - Who uses this: UX, PM, QA, ENG -- 🚢[FeatureName] - Shipped - VAMobile - - Example screens from the app that are live in the app, comparable to Demo mode as a resource for folks. - - Good for using as a reference but not the source of truth (the app is the source of truth) - - Who uses this: UX, Product, outside Stakeholders/colleagues. -- 🧪[FeatureName] - Prototype - VAMobile - - Prototypes we’ve built for research studies (one prototype per file). - - Files should be read-only, so that we maintain quality for the usability study - - Who uses this: UX, UR -### Resources 🧰 -- 🧰 Toolbox - - Includes files that might be helpful like Material and iOS kit to grab native components. - - Also includes a thumbnail template you can use. - - Who uses this: UX -- 🧰 App store images (Apple & Google) - - This file is where we create and manage the app store images. - - App images inside the phone/tablet wrappers ideally come from screenshots of demo mode. - - Who uses this: UX and Product -### Sandbox 🏖 -- [EachDesigner’s name] **🏖** - - This is your own area where you can explore and iterate. - - Each team member has their own sandbox file. - - If you are working on something together consider working or moving Sandbox work to a Working file. - - Who uses this: UX folks. You might decide to share files with product and engineering for collaboration and early feasibility discussions, but how you use your Sandbox is up to you. -### XX Graveyard 💀 +#### 🏖 Sandbox +- This is your own area where you can explore and iterate. Each team member has their own sandbox file. If you are working on something together, consider working or moving Sandbox work to a working file. +- Who uses this: UX. You might decide to share files with product and engineering for collaboration and early feasibility discussions, but how you use your Sandbox is up to you. + +#### 🪦 Graveyard - A place to put features we aren’t going forward with. -- Who uses this: UX \ No newline at end of file +- Who uses this: UX + +#### 🪦 Version 1.0 +- A place to put files from version 1.0 of the app. +- Who uses this: UX + +### File names in Figma + +We use consistent file naming conventions across projects in Figma. + +- [File Name] - 🔍 Working - VA Mobile + - Where designers are creating features and handing off to ENG & QA + - Also includes explorations for existing features that we aren’t moving forward with, but want to keep a record of. + - If you are building new components, you can create them here. If adopted, they will eventually move to the Design library. + - Who uses this: UX, PM, QA, ENG +- [File Name] - 🚢 Shipped - VA Mobile + - Example screens from the app that are live in the app, comparable to Demo Mode. + - Good for using as a reference, but not the source of truth (the app is the source of truth). + - Who uses this: UX, PM, QA, outside stakeholders/colleagues +- [File Name] - 🧪 Discovery/Research/Prototype - VA Mobile + - Discovery, research, and prototype files + - Files should be read-only, so that we maintain quality for the usability study. + - Who uses this: UX teams +- [File Name] - 💡 Strategy/Product - VA Mobile + - Files related to planning and strategy + - Who uses this: Product teams, UX teams \ No newline at end of file diff --git a/VAMobile/documentation/static/img/figma/figma-change-variable-mode-icon.png b/VAMobile/documentation/static/img/figma/figma-change-variable-mode-icon.png new file mode 100644 index 00000000000..c69c2400065 Binary files /dev/null and b/VAMobile/documentation/static/img/figma/figma-change-variable-mode-icon.png differ diff --git a/VAMobile/documentation/static/img/figma/figma-screen-template-properties.png b/VAMobile/documentation/static/img/figma/figma-screen-template-properties.png new file mode 100644 index 00000000000..f1e7b2825b5 Binary files /dev/null and b/VAMobile/documentation/static/img/figma/figma-screen-template-properties.png differ