diff --git a/Figma/App Icon - Apple iOS.fig b/Figma/App Icon - Apple iOS.fig new file mode 100644 index 0000000..62fb1df Binary files /dev/null and b/Figma/App Icon - Apple iOS.fig differ diff --git a/Figma/App Icon - Apple macOS.fig b/Figma/App Icon - Apple macOS.fig new file mode 100644 index 0000000..666b7f3 Binary files /dev/null and b/Figma/App Icon - Apple macOS.fig differ diff --git a/Figma/App Icon - Apple tvOS.fig b/Figma/App Icon - Apple tvOS.fig new file mode 100644 index 0000000..5af19e0 Binary files /dev/null and b/Figma/App Icon - Apple tvOS.fig differ diff --git a/Figma/App Icon - Apple watchOS.fig b/Figma/App Icon - Apple watchOS.fig new file mode 100644 index 0000000..5bc6de9 Binary files /dev/null and b/Figma/App Icon - Apple watchOS.fig differ diff --git a/Figma/App Icon - Google Android adaptive icon.fig b/Figma/App Icon - Google Android adaptive icon.fig new file mode 100644 index 0000000..2d43bde Binary files /dev/null and b/Figma/App Icon - Google Android adaptive icon.fig differ diff --git a/Figma/App Icon - Google Android.fig b/Figma/App Icon - Google Android.fig new file mode 100644 index 0000000..f85ae27 Binary files /dev/null and b/Figma/App Icon - Google Android.fig differ diff --git a/Figma/App Icon - Microsoft Windows Tiles.fig b/Figma/App Icon - Microsoft Windows Tiles.fig new file mode 100644 index 0000000..e2bebdd Binary files /dev/null and b/Figma/App Icon - Microsoft Windows Tiles.fig differ diff --git a/Figma/App Icon - Microsoft Windows.fig b/Figma/App Icon - Microsoft Windows.fig new file mode 100644 index 0000000..bad7a1f Binary files /dev/null and b/Figma/App Icon - Microsoft Windows.fig differ diff --git a/Figma/Favicon - Web.fig b/Figma/Favicon - Web.fig new file mode 100644 index 0000000..3c3bccd Binary files /dev/null and b/Figma/Favicon - Web.fig differ diff --git a/Help/Help.md b/Help/Help.md index e9c28fd..b069c6f 100644 --- a/Help/Help.md +++ b/Help/Help.md @@ -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) @@ -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. @@ -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. \ No newline at end of file +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. diff --git a/Help/Version History.md b/Help/Version History.md index 4d97713..d6c2613 100644 --- a/Help/Version History.md +++ b/Help/Version History.md @@ -1,5 +1,9 @@ # Bjango App Icon Templates version history +### 1.9 + +- Add support for figma + ### 1.8 21 September 2018 @@ -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 @@ -69,4 +73,4 @@ 26 January 2016 - Initial release. -- Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP. \ No newline at end of file +- Complies with iOS 9, watchOS 2, tvOS 1, Android 6, and Windows 10 UWP. diff --git a/Readme.md b/Readme.md index fc529fd..6edd29f 100644 --- a/Readme.md +++ b/Readme.md @@ -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) @@ -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. @@ -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. ``` - ::::::::: ::::::: :::: :::: ::: :::::::: :::::::: - :+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+: - +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+ - +#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+ - +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+ - #+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+# - ######### ##### ### ### ### #### ######## ######## + ::::::::: ::::::: :::: :::: ::: :::::::: :::::::: + :+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+: + +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+ + +#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+ + +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+ + #+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+# + ######### ##### ### ### ### #### ######## ######## ```