Giter Site home page Giter Site logo

penpot / penpot Goto Github PK

View Code? Open in Web Editor NEW
26.1K 205.0 1.2K 125.49 MB

Penpot - The Open-Source design & prototyping platform

Home Page: https://penpot.app

License: Mozilla Public License 2.0

Clojure 73.18% JavaScript 18.07% HTML 0.94% Shell 0.47% PLpgSQL 0.12% Dockerfile 0.13% XSLT 0.02% SCSS 6.55% Mustache 0.04% CSS 0.07% Java 0.33% Vim Script 0.01% Lua 0.01% Python 0.07% MDX 0.01%
ux-design ux-experience prototyping clojure clojurescript ui design

penpot's Introduction


PENPOT

License: MPL-2.0 Gitter Managed with Taiga.io Gitpod ready-to-code

WebsiteGetting StartedUser GuideTutorials & InfoCommunityTwitterInstagramMastodonYoutube

feature-readme

🎇 Penpot Fest exceeded all expectations - it was a complete success! 🎇 Penpot Fest is our first Design event that brought designers and developers from the Open Source communities and beyond. Watch the replay of the talks on our Youtube channel or Peertube channel

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open standards (SVG). Penpot invites designers all over the world to fall in love with open source while getting developers excited about the design process in return.

Table of contents

Why Penpot

Penpot makes design and prototyping accessible to every team in the world.

For cross-domain teams

We have a clear focus on design and code teams and our capabilities reflect exactly that. The less hand-off mindset, the more fun for everyone.

Multiplatform

Being web based, Penpot is not dependent on operating systems or local installations, you will only need to run a modern browser.

Open Standards

Using SVG as no other design and prototyping tool does, Penpot files sport compatibility with most of the vectorial tools, are tech friendly and extremely easy to use on the web. We make sure you will always own your work.

Open Source

Getting started

Install with Elestio

Elestio offers a fully managed service for on-premise instances of a selection of open-source software! This means you can deploy a dedicated instance of Penpot in just 3 minutes with no technical knowledge needed.

You don’t need to worry about DNS configuration, SMTP, backups, SSL certificates, OS & Penpot upgrades, and much more.

Get started with Elestio.

Install with Docker

You can also get started with Penpot locally or self-host it with docker and docker-compose.

Here’s a step-by-step guide on getting started with Docker.

Penpot cloud app

If you prefer not to install Penpot in a local environment, login or register on our Penpot cloud app. Create a team to work together on projects and share design assets or jump right away into Penpot and start designing on your own.

Getting started

Community

We love the open source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your ideas and code are welcome!

If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community!

You will find the following categories:

Communnity

Contributing

Every sort of contribution will be very helpful to enhance Penpot. How you’ll participate? All your ideas, designs and code are welcome:

To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing-guide.

Contributing

Resources

You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.

💾 Documentation

🚀 Getting Started

✏️ Tutorials

🏘️ Architecture

📚 Dev Diaries

License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) KALEIDOS INC

Penpot is a Kaleidos’ open source project

penpot's People

Contributors

00ff88 avatar ahmaduxui avatar akshay-gupta7 avatar alextecplayz avatar alotor avatar aminografik avatar andrewzhurov avatar azazeln28 avatar belen-albeza avatar elhombretecla avatar eranot avatar erral avatar evamarco avatar girafic avatar hirunatan avatar iblueer avatar iprithvitharun avatar jespino avatar linerly avatar locness3 avatar madmath03 avatar myfunnyandy avatar niwinz avatar oersen avatar pabloalba avatar superalex avatar thescientistpt avatar weblate avatar wizzytod avatar yarons avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

penpot's Issues

Change location of error messages

Error messages cover the top toolbar and prevent me from using it, even though the toolbar is functional. Perhaps showing it at the top of the canvas is less intrusive?

Export icon is unclear.

The export icon is very similar to the common "share" icon.
export icon-share-128.
In View mode, the same icon has a "share" tooltip.
share
In the export dialogue box, all the explanations use the word "download".
Perhaps, the export icon should be called "download" and the icon changed to reflect this.

Cannot login/register

I'm getting "Unable to connect to backend server" message.
In the console:

XMLHttpRequest cannot load https://test.uxbox.io/api/auth/token. Response for preflight is invalid (redirect)

'on-error: {:status 0, :payload ""} uxbox$main$ui$on_error @ ui.js:39'

undefined uxbox$main$ui$on_error @ ui.js:41

However, I can login to the demo site.

Lock icon for size and radius is unclear.

Only the colour changes, not the shape. This makes it difficult to remember which is which and tell the difference, especially for colour blind people. Hovering over the icon also changes the icon to the same colour as locked, but does not change the state, unless you click, which makes things even more confusing. A slightly bigger icon would be even clearer!
Screenshot is from firefox, but Chromium is similar.
lock

Improve backend error message

If I cannot connect to demo.uxbox.io after I log in, I get the "Unable to connect to backend server" error message. However, my pages load and most of the functionality is available. Therefore, the error message could be more descriptive and tell me what functionality remains and what is lost. Obviously, if my work has been saved is the most important!

Note that this is the same message I get if I cannot login, so there may need to be specific messages, not just 1 generic message.

Finally, some kind of help or suggestions would be nice to troubleshoot.

Path objects and pencil objects should be differentiated.

Path objects and pencil objects use different tools and icons to create them, but they are represented by the same icon and name in the layers panel. It would be more consistent and easier to identify if the pencil objects were given a pencil icon and name.

Keyboard collision for many keyboard shortcuts

Many of the uxbox keyboard shortcuts are standard browser keyboard shortcuts (on Chrome, Firefox, Edge for Windows/Linux). For example:
Ctl-R -> reload page
Ctl-Shift-H -> open history window
Ctl-Shift-O -> open bookmarks window
See Chrome, Firefox, Edge and Safari keyboard shortcuts for details.

Whoever designed uxbox's shortcuts was obviously using a Mac ;-)

I can suggest some hopefully better shortcuts (later) if you want.

Docker Installation error

Hii i am facing an error during installation in step 21 which is imagemagick installations. Also have atatched the screenshot of the error which i got. can you please help me with the same.
1

"Sitemap" should be renamed "Pages".

Even if you are planning to show pages as a tree structure, the Sitemap panel should be renamed. Sitemaps are very different things. I guess the icon should also be changed at the same time. The position of the project name coud be improved as well.
Something like this?

sitemap2

Connection to Running UXBOX Docker Image

Hi,

when i try to reconnect the docker image, it restarts the process of running the app and thus it done finds uxbox under /home/uxbox/ . How to reconnect the running application Docker image/Container terminal.

NOTE: STILL THE APPLICATION IS ACCESSIBLE FROM WEB URL.

Paths should have a fill colour of "none".

When paths are created, the default fill colour is black at an opacity of 0%. However, this is confusing because the path is not filled (the first thing you see is the black palette, my eye did not go further to see the opacity setting). If it were set to "none", it would be more intuitive. Inkscape has a "no fill" button (see below).
ink_colour

Further, even when you change the colour, the path does not change, because opacity is 0%. If you change from a colour of "none", to some colour, the opacity should default to 100%.
Maybe, something like this?
fill2

Autoconf missing

FYI: I got the following error message when running the manage.sh script:

CDPATH="${ZSH_VERSION+.}:" && cd . && /bin/bash /imagemagick/config/missing autoconf
/imagemagick/config/missing: line 81: autoconf: command not found
WARNING: 'autoconf' is missing on your system.
         You should only need it if you modified 'configure.ac',
         or m4 files included by it.

Fixed it by adding autoconf to the Dockerfile :)

Make functionality of ruler tool icon more obvious.

The function of the ruler icon is not clear. It is currently next to the grid icon which shows/hides the grid, which suggests that the ruler icon shows/hides the x-y axis page rulers (it actually measures distances between 2 points). The location, icon, etc should be improved to make the function clearer.
See issue #48 for an example of confusion!
ruler_on

NVM Git Clone Issues

Hi, i am facing the issues over NVM git clone. able to clone form the server but this docker file is uable to pull it. Can u please have look on the bellow error i faced.
1

Magnet is checked, but not enabled when grid is off.

Grid is off in the image below, but the magnet is checked. If I move objects when grid is off, it does not snap to grid.

magnet
There are three solutions:

  1. snap to grid even when grid is off.
  2. dim and disable magnet (and other grid settings) when grid is off.
  3. dim and disable grid settings, on click of grid settings, undim, enable and edit settings and show grid.

Option 3 is the best UX and most work :D. This would require some thought as to how to show that the settings are disabled. The text is so dim already, another visual indicator is required.
As an aside, the "Magnet option" would be better named "Snap", with the checkbox labelled "Snap to grid".

Measure tool needs text background

Measurements cannot be seen if the background and measurement text are the same colour. A (semi-transparent) text background would fix this.
ruler4

Redo does not work.

I hope I'm not annoying you with all this feedback!!! :D Keep up the great work. I'm looking forward to an amazing release!

redo

Cannot ungroup objects.

If I select the group layer, the ungroup icon is disabled. I expect to be able to ungroup all objects if the group-1 object is selected.
group
If I select a grouped object, the ungroup icon is enabled, but does not ungroup. It would be nice if selecting one grouped object (eg Circle-1) let me ungroup only that object.
group_object.

However, I can ungroup nested groups. But it still does strange things. Notice in the gif that after I ungroup Group-3, the ungroup icon is still enabled and only after I click it again does it become disabled.
layer

Close button does not close "new project" dialogue box

Also, the close button does not change colour until I click it. It should change (I think) when I hover over it. I can only close the dialogue box if I click outside the box, but not on the close button.

Interestingly, I can close the "new color" dialogue box by clicking on the button (but again the colour only changes when I click it).
close new project dialogue box

Some errors trying to start the docker container:

Error on starting figwheel in frontend

In frontend:

npm run figwheel

> [email protected] figwheel /home/uxbox/uxbox/frontend
> PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

npm ERR! Linux 4.8.0-37-generic
npm ERR! argv "/home/uxbox/.nvm/versions/node/v6.9.2/bin/node" "/home/uxbox/.nvm/versions/node/v6.9.2/bin/npm" "run" "figwheel"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] figwheel: `PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] figwheel script 'PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uxbox package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uxbox
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uxbox
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uxbox/uxbox/frontend/npm-debug.log

Error on starting clojure stuff in backend

In backend:

./scripts/run.sh

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

I've no idea where I am going wrong here.

Any idea?

View Mode Redirection

When click on View Mode (Ctrl + P). The url dosent hold the IP on which the application is hosted. it goes to local host IP.

Remove full name from sign up.

The need for full name at sign up is unclear. If there is no reason for it, can we remove it, to make sign up simpler? This will require removal from profile page as well.

getting error during starting

I got the error in figweel(#1) tmax screen

Saving to: ‘/home/uxbox/.lein/self-installs/leiningen-2.7.1-standalone.jar.pending’

/home/uxbox/.lein/self-installs/leini 100%[=======================================================================>]  14.66M   136KB/s    in 3m 5s   

2017-01-20 14:43:01 (81.2 KB/s) - ‘/home/uxbox/.lein/self-installs/leiningen-2.7.1-standalone.jar.pending’ saved [15370238/15370238]

Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

npm ERR! Linux 4.8.0-34-generic
npm ERR! argv "/home/uxbox/.nvm/versions/node/v6.9.1/bin/node" "/home/uxbox/.nvm/versions/node/v6.9.1/bin/npm" "run" "figwheel"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] figwheel: `PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] figwheel script 'PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uxbox package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PATH=./scripts:$PATH ./scripts/build-worker && PATH=./scripts:$PATH ./scripts/figwheel
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uxbox
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uxbox
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uxbox/uxbox/frontend/npm-debug.log
uxbox@44074e1b6533:~/uxbox/frontend$

and backend(#2) tmax screen too

uxbox@44074e1b6533:~/uxbox/backend$ ./scripts/run.sh 
Could not transfer artifact lein-ancient:lein-ancient:pom:0.6.10 from/to clojars (https://clojars.org/repo/): Specified destination directory cannot be created: /home/uxbox/.m2/repository/lein-ancient/lein-ancient/0.6.10
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

how to use

I've started the docker container but I'm unfamiliar with tmux and not sure how to use it.

I'm not even sure what to look for, are there screenshots anywhere to help get started?

Explain uxbox's vision in Readme and landing page.

A vision of what uxbox aspires to be will encourage early adoption and contribution. Contributors will be able to decide if uxbox is a project that they want to contribute to. This also helps keep uxbox on track. It also improves transparency. See Jared Spool's 3Qs.

The vision should describe uxbox's raison d'etre. This boils down to:

  • values of the organisation
  • what differentiates uxbox from other prototyping tools
  • why you are building uxbox. What pain points are you trying to solve.
  • a description of what uxbox intends to be at version 1 (?)

"Activate magnet" does not do anything.

I expect "activate magnet" to align objects to the grid (when I move them), but nothing happens. There are also a number of usability issues (like the name and "magnet option" is not necessary), which perhaps should go in a different issue.

Tested on Chromium and Firefox at commit #ba40b99c.

Recover password does not work.

Password recovery email does not get sent. Is this just because those settings are disabled or not configured for the dev environment?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.