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

Add Figma Support #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Figma/App Icon - Apple iOS.fig
Binary file not shown.
Binary file added Figma/App Icon - Apple macOS.fig
Binary file not shown.
Binary file added Figma/App Icon - Apple tvOS.fig
Binary file not shown.
Binary file added Figma/App Icon - Apple watchOS.fig
Binary file not shown.
Binary file added Figma/App Icon - Google Android adaptive icon.fig
Binary file not shown.
Binary file added Figma/App Icon - Google Android.fig
Binary file not shown.
Binary file added Figma/App Icon - Microsoft Windows Tiles.fig
Binary file not shown.
Binary file added Figma/App Icon - Microsoft Windows.fig
Binary file not shown.
Binary file added Figma/Favicon - Web.fig
Binary file not shown.
21 changes: 20 additions & 1 deletion Help/Help.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
- [Using the Illustrator templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-illustrator-templates)
- [Using the Sketch templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-sketch-templates)
- [Using the Affinity Designer templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-affinity-designer-templates)
- [Using the Figma templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-figma-templates)
- [Using other design tools](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-other-design-tools)
- [iOS, tvOS and other icon masks](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#ios-tvos-and-other-icon-masks)
- [Bitmap vs vector scaling](https://github.com/bjango/Bjango-Templates/blob/master/Help/Scaling.md)
Expand Down Expand Up @@ -125,6 +126,24 @@ To export using the Google Android adaptive icon template, hide all the layers e
To export a single image of all the icons, choose `File` → `Export`.
-----

### Using the Figma templates

For most Figma templates, create your artwork in the `Icon Artwork` group, inside the icon size folders.

To export using the templates below, click `Export` under `File` in the menu, then choose which icons to export (probably leave all of them set to export), then click the `Export` button, choose a destination, then click `Save`.

- `App Icon - Apple iOS.sketch`
- `App Icon - Apple macOS.sketch`
- `App Icon - Apple tvOS.sketch`
- `App Icon - Apple watchOS.sketch`
- `App Icon - Google Android.sketch`
- `App Icon - Google Android adaptive icon.sketch`
- `App Icon - Microsoft Windows Tiles.sketch`
- `App Icon - Microsoft Windows.sketch`
- `Favicon - Web.sketch`

The `All Icons` slice exports a single image of all the icons.

### Using other design tools

If you’re not using Photoshop, Illustrator, Sketch or Affinity Designer, the PNG images should still contain everything you need to build icons for those platforms. They indicate all the required icon sizes, icon regions, pixel densities and other information. To use them, import a template image into your design tool of choice, and build your icon artwork on top.
Expand Down Expand Up @@ -189,4 +208,4 @@ If you’re after some more generalised app icon design tips, I’ve written a f

### Feedback and future plans

These documents are maintained by [@marcedwards](https://twitter.com/marcedwards). If you find errors or have suggestions, I’d love to hear about them. Currently, the Windows Tiles templates are missing some elements.
These documents are maintained by [@marcedwards](https://twitter.com/marcedwards). If you find errors or have suggestions, I’d love to hear about them. Currently, the Windows Tiles templates are missing some elements.
Expand Down
12 changes: 8 additions & 4 deletions Help/Version History.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Bjango App Icon Templates version history

### 1.9

- Add support for figma

### 1.8

21 September 2018
Expand All @@ -17,14 +21,14 @@

1 April 2017

- Sketch iOS, macOS, tvOS, watchOS, Android, Android adaptive, and web favicon templates now use symbols.
- Sketch iOS, macOS, tvOS, watchOS, Android, Android adaptive, and web favicon templates now use symbols.

### 1.5

27 March 2017

- Added Android adaptive icon templates.
- Improved layer name consistency across templates.
- Added Android adaptive icon templates.
- Improved layer name consistency across templates.

### 1.4

Expand Down Expand Up @@ -69,4 +73,4 @@
26 January 2016

- Initial release.
- Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP.
- Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP.
19 changes: 10 additions & 9 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ The [Bjango App Icon Templates](https://bjango.com/designresources/) are a compr
- [Using the Sketch templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-sketch-templates)
- [Using the Sketch quick templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-sketch-quick-templates)
- [Using the Affinity Designer templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-affinity-designer-templates)
- [Using the Figma templates](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-the-figma-templates)
- [Using other design tools](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#using-other-design-tools)
- [iOS, tvOS and other icon masks](https://github.com/bjango/Bjango-Templates/blob/master/Help/Help.md#ios-tvos-and-other-icon-masks)
- [Bitmap vs vector scaling](https://github.com/bjango/Bjango-Templates/blob/master/Help/Scaling.md)
Expand All @@ -31,8 +32,8 @@ The [Bjango App Icon Templates](https://bjango.com/designresources/) are a compr

An overview of some common layers included in the templates:

`Labels` — Indicate icon sizes and scale factor.
`Icon Masks` — In cases where the OS masks icons, this group fills non-icon areas, showing you how icons will be masked.
`Labels` — Indicate icon sizes and scale factor.
`Icon Masks` — In cases where the OS masks icons, this group fills non-icon areas, showing you how icons will be masked.
`Icon Artwork` — Place your icon artwork here.

In some cases, all layers and groups except the `Icon Artwork` group will need to be hidden before exporting. For most templates, exporting is set up using slices. Short questions can be sent to [@marcedwards](https://twitter.com/marcedwards) or [@bjango](https://twitter.com/bjango) on Twitter. More verbose questions can be sent via the [Bjango contact page](https://bjango.com/contact/). If you notice any errors, please let me know.
Expand All @@ -44,11 +45,11 @@ In some cases, all layers and groups except the `Icon Artwork` group will need t
Apple, iPhone, iOS, tvOS, Apple TV and Apple Watch are trademarks of Apple Inc., registered in the U.S. and other countries. Microsoft and Windows are trademarks of Microsoft Corporation Inc., registered in the U.S. and other countries. Google and Android are trademarks of Google Inc., registered in the U.S. and other countries.

```
::::::::: ::::::: :::: :::: ::: :::::::: ::::::::
:+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+:
+:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+
+#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+
+#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+
#+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+#
######### ##### ### ### ### #### ######## ########
::::::::: ::::::: :::: :::: ::: :::::::: ::::::::
:+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+:
+:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+
+#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+
+#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+
#+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+#
######### ##### ### ### ### #### ######## ########
```