Skip to content

Commit

Permalink
Update the docs for exporting icons from Figma. (#69)
Browse files Browse the repository at this point in the history
* Update the docs for exporting from Figma.

* Better docs by searching!
  • Loading branch information
pixlwave authored Feb 8, 2024
1 parent f5b4884 commit 4d76140
Showing 1 changed file with 17 additions and 4 deletions.
21 changes: 17 additions & 4 deletions docs/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,26 @@ Transforms the icon to a vector drawable asset

### iOS

Transforms the icon to an XCode Image Set
Transforms the icon to an Xcode Image Set

## Synchronising icons

- Create the icon and add it to the [Figma icon library](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&mode=design&t=lYEYAWjnNUSGFhV4-11)
. Refer to [the guidelines for icon preparation](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&node-id=280-6047&mode=design&t=wOCsc1FBoOz4YnJo-0).
- Use [SVG Export](https://www.figma.com/community/plugin/814345141907543603) on Figma. Making sure to use `currentColor` so the icon can be tintable
- Create the icon and add it to the [Figma icon library](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&mode=design&t=lYEYAWjnNUSGFhV4-11). Refer to [the guidelines for icon preparation](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&node-id=280-6047&mode=design&t=wOCsc1FBoOz4YnJo-0).
- Export the icons from Figma
- We currently export the 24x24 icon variants only (optical scaling is yet to be adopted). The process is manual but fast to do.
- First select all of the 24pt variants from the document above. This easiest way to do this is to search for `24` and select all the results except for the placeholder ones.
- Copy & paste these (or Option/Alt drag) to a safe working area, leaving the originals alone.
- Using the [SVG Export](https://www.figma.com/community/plugin/814345141907543603) plugin on Figma, apply the `Monochrome` preset to the selected icons. This preset exports using `currentColor` so the icon can be tintable.
- Download the icons zip file and extract it locally.
- Tidy up the file names: lower case and replace spaces with hyphens
**bash/zsh**
```bash
for file in *; do mv -v -- "$file" "$(echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')"; done
```
**fish**
```
for file in *; mv -v -- "$file" (echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]'); end
```
- Copy the icons to the `icons/` folder
- Run `yarn build` at the root of the project or ask a maintainer to do this for you
- Open a pull request against the `develop` branch
Expand Down

0 comments on commit 4d76140

Please sign in to comment.