Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a Guide/Template: Figma for developers #125

Open
7 tasks
daniellex0 opened this issue Feb 22, 2021 · 26 comments
Open
7 tasks

Create a Guide/Template: Figma for developers #125

daniellex0 opened this issue Feb 22, 2021 · 26 comments
Labels
Complexity: Missing CoP: UI/UX feature : guide creation Guide : Research milestone: missing Phase: 1 - Gather Examples Solo size: missing status: 1.1 needs wiki examples Gathering examples by checking each team's wiki status: 1.2 needs issues examples Gathering examples by checking each team's issues status: 1.3 needs project board examples Gathering examples by checking each team's project board cards status: 1.4 needs slack examples Check each team's slack channel for examples

Comments

@daniellex0
Copy link
Member

daniellex0 commented Feb 22, 2021

Overview

We need to create a guide for Figma for developers, so that new developers on Hack for LA teams can learn how to view and analyze designs, and export assets, on Figma.ion]

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.

Resources/Instructions

Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
0125 Figma for developers

https://www.youtube.com/watch?v=XA4fM5I4GvQ&list=PL7e8VJ_ZN6epq-oiYOufiuPI-fpDC2Mby&ab_channel=GregorySchmidt

https://www.figma.com/best-practices/tips-on-developer-handoff/

https://www.youtube.com/watch?v=B242nuM3y2s&ab_channel=Figma

https://www.smashingmagazine.com/2020/09/figma-developers-guide/

https://www.figma.com/best-practices/guide-to-developer-handoff/

Projects to Check

Tasks

  • This is where you will copy instructions from the wiki page for the step you are currently on.
@daniellex0 daniellex0 changed the title Guide to figma for developers (written by their friends at UI/UX) Guide: Figma for developers (written by their friends at UI/UX) Feb 22, 2021
@dhwanirparekh dhwanirparekh self-assigned this Mar 9, 2021
@daniellex0

This comment was marked as outdated.

@dhwanirparekh

This comment was marked as outdated.

@daniellex0

This comment was marked as outdated.

@abenipa3 abenipa3 self-assigned this Apr 27, 2021
@abenipa3

This comment was marked as outdated.

@dhwanirparekh

This comment was marked as outdated.

@anonymousanemone
Copy link
Member

For devs adding this guide to the Toolkit page: the guide card Illustration and image credit information is in the Toolkit page Figma file (blue rectangle on bottom left)

@ExperimentsInHonesty

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@dhwanirparekh
Copy link
Member

Apologies, I will update the guide as mentioned in the above comments. But I'm traveling and moving this weekend so ETA: 19th Sep.

@ExperimentsInHonesty

This comment was marked as outdated.

@ExperimentsInHonesty
Copy link
Member

@dhwanirparekh Hi, hope the move went well. I know you are busy... Just bumping this back into your inbox for an update.

@ExperimentsInHonesty

This comment was marked as off-topic.

@ExperimentsInHonesty

This comment was marked as outdated.

@dhwanirparekh

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@ExperimentsInHonesty

This comment was marked as outdated.

@juliagab56 juliagab56 self-assigned this Jun 16, 2022
@juliagab56 juliagab56 removed their assignment Jan 12, 2023
@Aparna1Gopal
Copy link
Member

#125

@JesseTheCleric
Copy link
Member

Prior version of issue

Overview

We need to create a guide for Figma for developers, so that new developers on Hack for LA teams can learn how to view and analyze designs, and export assets, on Figma.

Action Items

  • Research existing information about Figma for developers in relevant resources including Figma's youtube videos and articles
    • Once done, remove the "Guide: Research" label and add the "Guide: Gather Examples" label
  • Gather examples of how other projects or volunteers have trained their developers in Figma (if applicable), adding each example as a link in the resources section below
    • Once done, remove the "Guide: Gather Examples" label and add the "Guide: Draft Guide" label
  • Create a draft guide, either in markdown format in this issue or a google doc in the [ux/ui google drive]
    • Once done, remove the "Guide: Draft Guide" label and add the "Guide: Review Guide" label
  • Review the guide with UX/UI community of practice
    • Once done, remove the "Guide: Review Guide" label and add the "Guide: Leadership Review" label
  • Present to the Hack for LA leadership team for sign off
    • If the guide needs more edits Leadership team will remove the "Guide: Leadership Review" label and add the "Guide: Leadership Edits Requested" label
    • Once Author has made changes, remove the "Guide: Leadership Edits Requested" label and add the "Guide: Leadership Review" label
    • Once approved, remove the "Guide: Leadership Review" label and add the "Guide: Place Guide" label

Resources

Update issue #97 with the name of item you are working on

~DRAFT Guide ~- Got deleted and we can't get it back

https://www.youtube.com/watch?v=XA4fM5I4GvQ&list=PL7e8VJ_ZN6epq-oiYOufiuPI-fpDC2Mby&ab_channel=GregorySchmidt

https://www.figma.com/best-practices/tips-on-developer-handoff/

https://www.youtube.com/watch?v=B242nuM3y2s&ab_channel=Figma

https://www.smashingmagazine.com/2020/09/figma-developers-guide/

https://www.figma.com/best-practices/guide-to-developer-handoff/

Projects to check

@JesseTheCleric
Copy link
Member

Assignee, Labels, Project Board Placement, and Milestones for this issue in the UI/UX Repo:

image

@JesseTheCleric
Copy link
Member

JesseTheCleric commented Nov 3, 2024

Files in this Issue

Guide draft

  • This document looks like it has been deleted

@JesseTheCleric JesseTheCleric transferred this issue from hackforla/UI-UX Nov 17, 2024
@JesseTheCleric JesseTheCleric changed the title Guide: Figma for developers (written by their friends at UI/UX) Create a Guide/Template: Figma for developers (written by their friends at UI/UX) Nov 17, 2024
@JesseTheCleric JesseTheCleric changed the title Create a Guide/Template: Figma for developers (written by their friends at UI/UX) Create a Guide/Template: Figma for developers Nov 17, 2024
@JesseTheCleric JesseTheCleric added size: missing milestone: missing status: 1.1 needs wiki examples Gathering examples by checking each team's wiki status: 1.3 needs project board examples Gathering examples by checking each team's project board cards status: 1.2 needs issues examples Gathering examples by checking each team's issues status: 1.4 needs slack examples Check each team's slack channel for examples Phase: 1 - Gather Examples Solo Complexity: Missing labels Nov 17, 2024
@JesseTheCleric JesseTheCleric moved this from Properly Labeled and not yet ready for Guides Team Review to Needs to be Triaged in P: Guides: Tracker of issues in CoPs Nov 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Missing CoP: UI/UX feature : guide creation Guide : Research milestone: missing Phase: 1 - Gather Examples Solo size: missing status: 1.1 needs wiki examples Gathering examples by checking each team's wiki status: 1.2 needs issues examples Gathering examples by checking each team's issues status: 1.3 needs project board examples Gathering examples by checking each team's project board cards status: 1.4 needs slack examples Check each team's slack channel for examples
Projects
Status: Needs to be Triaged
Status: Needs to be Triaged
Development

No branches or pull requests

10 participants