Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/puzzle/wireframe-kit

A free and open source wireframing kit made for draw.io
https://github.com/puzzle/wireframe-kit

draw mockups prototyping ux ux-design wireframe-kit wireframes

Last synced: 16 days ago
JSON representation

A free and open source wireframing kit made for draw.io

Awesome Lists containing this project

README 

        
# PWK | Puzzle Wireframe Kit



A free and open source wireframing kit made for draw.io (https://www.draw.io/)



## How to use the PWK



There are various ways to use the PWK with draw.io:



### 1: Use the PWK libraries (recommended)

* Simply click on this link: https://bit.ly/2LpMMKi

* Clicking on it will open and install the PWK libraries in draw.io

* Make sure to clear your default style in draw.io before using the PWK (Ctrl + Shift +R)



*Or just use one of the libraries*:

* 00_Views: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F00_Views_v0-1.xml

* 01_Devices: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F01_Devices_v0-1.xml%20

* 02_Elements_Buttons: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F02_Elements_Buttons_v0-1.xml

* 02_Elements_Cards: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F02_Elements_Cards_v0-1.xml

* 02_Elements_Feedback_Notification_Toasts_Dialogs: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F02_Elements_Feedback_Notification_Toasts_Dialog_v0-1.xml

* 02_Elements_Forms: https://www.draw.io/?splash=0&clibs=Uhttps://raw.githubusercontent.com/puzzle/wireframe-kit/master/libraries/02_Elements_Forms_v0-1.xml

* 02_Elements_Placeholders: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F02_Elements_Placeholders_v0-1.xml

* 03_Navigation: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F03_Navigation_v0-1.xml

* 04_Icons: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F04_Icons_v0-1.xml

* 05_Avatars: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F05_Avatars_v0-1.xml

* 06_Colors: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F06_Colors_v0-1.xml

* 07_Typography: https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2Flibraries%2F07_Typography_v0-1.xml



### 2: Download and use the PWK libraries

* Download the PWK libraries from this repo (or click on the link in the «Puzzle-Wireframe-Kit.xml»)

* Open draw.io and import the libraries via: file > Open Library from …

* Now you have our PWK-libraries available in your draw.io (in the panel on the left).



### 3: Open the PWK file

* Open the PWK collection directly in draw.io with this link: https://www.draw.io/?splash=0#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fpuzzle%2Fwireframe-kit%2Fmaster%2FPuzzle-Wireframe-Kit.xml

* Or you can also download the file «Puzzle-Wireframe-Kit.xml» and open it manually with draw.io

* First unlock the layer «Kit»

* Then, you can copy an element and paste it in your own draw.io file



### 4: Download the PWK file

* You can also download the file «Puzzle-Wireframe-Kit.xml» and open it manually with draw.io

* First unlock the layer «Kit»

* Then, you can copy an element and paste it in your own draw.io file



*Make sure to clear your default style before using the PWK (Ctrl + Shift +R)*



# Puzzle Brand Libraries



We also have Puzzle Brand libraries (logos, icons, colors, infographics) for draw.io. 

* Simply click on this link: https://bit.ly/2CNomI0

* Clicking on it will open and install the PWK libraries in draw.io

* Make sure to clear your default style in draw.io before using the PWK (Ctrl + Shift +R)



Our infographics-library is based on the one from draw.io: https://t.co/FgbJUR3EIx



# Licence

We published the PWK with a CC-licence (Attribution-ShareAlike 4.0 International, CC BY-SA 4.0). You are free to use any of the shapes/elements in the PWK for commercial use.



But if you change the PWK itself, you have to publish your version of the kit with the same licence again and make it open source.