Guide: Figma for developers (written by their friends at UI/UX)

daniellex0 commented 3 years ago

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.

[ ] Gather Examples Solo (open in a new tab)
[ ] Gather Examples Collaboratively
[ ] Create a Guide Draft
- [ ] If needed, create a template
[ ] Have your guide peer reviewed
[ ] Present your guide for leadership review
Resources/Instructions

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 commented 3 years ago

Hi @dhwanirparekh , let us know when this is ready to assign a reviewer! :)

dhwanirparekh commented 3 years ago

Hi...I am meeting Josh tomorrow, so this should be ready for review by tomorrow's EOD. Will keep you posted :)

daniellex0 commented 3 years ago

https://docs.google.com/document/d/1Is5Ah0tUH07kWYG_J6HTo0RF8Z9Foi2l/edit?rtpof=true

abenipa3 commented 3 years ago

Hello! I finished reading/reviewing the Figma for developers Guide, and left a couple of suggestions.

Other than that, the guide is very straightforward and easy to understand. I think the details in the guides are very helpful as well. Please feel free to let me know if you have any questions. Thank you! :octocat:

dhwanirparekh commented 3 years ago

Thanks Alyssa for reviewing, I updated the guide as per your comments. :)

anonymousanemone commented 3 years ago

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 commented 3 years ago

Hi @dhwanirparekh. The guide looks really good. We have a couple of changes we are requesting to make the guide match the other guide formats.

Please

Change this to a google document (instead of a word doc)
Make the first page look like the How to write a Guide doc
Revise Header to say How To: Figma for Developers
- Make a header by using this template and save it into the folder you have created
Write an overview (I have added a section to your doc for that)

Please format images in your doc using these instructions: ADD SCREENSHOTS & GRAPHICS TO YOUR GUIDE

Two issues I see:

It looks like you have used a different font to communicate information about some of the screenshots, please use the method in the doc above.
It looks like you have copied images from Figma's website and credited it to them, but we don't know if they allow that. Even though they don't have a copywrite symbol on their site or on the image, we should not assume we have the rights to use their images as is. There are two choices.
A: you can go ask for permission to them. B: you can remake the images to make them fit with our color and format style (as is laid out in the doc above). I prefer this option. If you decide to do option A, let's talk about it first so I can get you an official email, etc.

...

ExperimentsInHonesty commented 3 years ago

@dhwanirparekh Please provide update or let us know if you wont be continuing on this issue. There is no rush, we just want to make sure it does not get abandoned while being assigned.

Progress
Blockers
Availability
ETA

dhwanirparekh commented 3 years ago

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 commented 3 years ago

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

ExperimentsInHonesty commented 3 years ago

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

ExperimentsInHonesty commented 3 years ago

@dhwanirparekh do you want to be removed from this issue?

ExperimentsInHonesty commented 3 years ago

@dhwanirparekh Hi, hope the move went well. I know you are busy... Just bumping this back into your inbox for an update. If we don't hear from you by next Monday 2021-10-18 we will go ahead and unassign you from this issue.

dhwanirparekh commented 3 years ago

Hi

Apologies for not getting back earlier, have lots going on. I have made changes other than one for images. To remake the images (11 of them with some of them been gifs) would take me some time. If this is urgent I would suggest to re-assign this ticket, otherwise, I might be able to get it done in 3-4 weeks, as I'm traveling over weekends.

ExperimentsInHonesty commented 3 years ago

@dhwanirparekh we can wait for the changes. Thanks for letting us know. 🥰 We will check back with you in a month if we have not heard something by then.

ExperimentsInHonesty commented 3 years ago

Hi @dhwanirparekh checking in with you. Hope all is well.

Reminder of our last exchange:

Hi Apologies for not getting back earlier, have lots going on. I have made changes other than one for images. To remake the images (11 of them with some of them been gifs) would take me some time. If this is urgent I would suggest to re-assign this ticket, otherwise, I might be able to get it done in 3-4 weeks, as I'm traveling over weekends.

ExperimentsInHonesty commented 28 days ago @dhwanirparekh we can wait for the changes. Thanks for letting us know. 🥰 We will check back with you in a month if we have not heard something by then.

ExperimentsInHonesty commented 2 years ago

@dhwanirparekh It looks like the guide has been deleted. Since you are the author you might be able to get it back. Can you look into this asap.

ExperimentsInHonesty commented 2 years ago

@dhwanirparekh It looks like the guide has been deleted. Since you are the author you might be able to get it back. Can you look into this asap.

ExperimentsInHonesty commented 2 years ago

@dhwanirparekh It looks like the guide has been deleted. Since you are the author you might be able to get it back. Can you look into this asap. There is a 30 day clock on getting back deleted files

ExperimentsInHonesty commented 2 years ago

Have added this issue to the agenda with Kevin to see if we want to ask the community to rewrite it.

ExperimentsInHonesty commented 2 years ago

Sent Dhwani an email on 2022-03-18

ExperimentsInHonesty commented 2 years ago

This guide will have to be remade from scratch.

Aparna1Gopal commented 6 months ago

https://github.com/hackforla/UI-UX/issues/27#issuecomment-1086034287

JesseTheCleric commented 1 week ago

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 hackforla/knowledgebase-content#97 with the name of item you are working on ~[DRAFT Guide](https://docs.google.com/document/d/1Is5Ah0tUH07kWYG_J6HTo0RF8Z9Foi2l/edit?rtpof=true) ~- 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 - [100 Automations](https://github.com/100automations/website) - [311 Data](https://github.com/hackforla/311-data) - [Access the Data](https://github.com/hackforla/access-the-data) - [BallotNav](https://github.com/hackforla/ballotnav) - [Brigade Organizer's Playbook](https://github.com/codeforamerica/brigade-playbook) - [Civic Tech Index](https://github.com/civictechindex/CTI-website-frontend) - [Civic Tech Jobs](https://github.com/hackforla/CivicTechJobs) - [Civic Tech Structure](https://github.com/hackforla/civic-tech-structure) - [Data Science Projects](https://github.com/hackforla/data-science) - [Design Systems](https://github.com/hackforla/design-systems) - [Engage](https://github.com/hackla-engage) - [Expunge-Assist (formerly known as Record Clearance)](https://github.com/hackforla/expunge-assist) - [Food Oasis](https://github.com/hackforla/food-oasis) - [GreenEarthOS](https://github.com/hackforla/climate-project) - [Guides](https://github.com/hackforla/guides) - [HomeUniteUs](https://github.com/hackforla/homeuniteus) - [Internship project](https://github.com/hackforla/internship) - [Lucky Parking](https://github.com/hackforla/lucky-parking) - [Open Community Survey](https://github.com/hackforla/open-community-survey) - [People Depot](https://github.com/hackforla/peopledepot) - [Tables team](https://github.com/hackforla/tables/) - [TDM Calculator](https://github.com/hackforla/tdm-calculator) - [VRMS](https://github.com/hackforla/vrms) - [Hack for LA's Website](https://github.com/hackforla/website) - [Youth Justice Nav](https://github.com/hackforla/YouthJusticeNav/)

JesseTheCleric commented 1 week ago

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

![image](https://github.com/user-attachments/assets/31984132-5cb1-48f5-942d-b1dba58ddff8)

JesseTheCleric commented 1 week ago

Files in this Issue

Guide draft

This document looks like it has been deleted

hackforla / UI-UX