SVG, Flex Layout, Assets & Palettes: feedbacks and improvements suggestions

Help us improve Penpot Feature requests
1

Hi everyone,

After playing with Penpot during a few months, I’m finally using it for a real client web design project for the first time! Here is some firsts feedbacks and suggestions I would like to share.

SVG

  • SVG export code is excessively complicated and not production-ready. For example, if I design a simple + icon with two 2px wide black rectangles centered in a 32 x 32px artboard, here is what I got:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="32" xmlns="http://www.w3.org/2000/svg" height="32" id="screenshot-85984686-2f90-8058-8002-2e07d51c2821" viewBox="0 0 32 32" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1">
	<g id="shape-85984686-2f90-8058-8002-2e07d51c2821">
		<defs>
			<clipPath class="frame-clip-def frame-clip" id="frame-clip-85984686-2f90-8058-8002-2e07d51c2821-rumext-id-1">
				<rect rx="0" ry="0" x="0" y="0" width="32" height="32" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/>
			</clipPath>
		</defs>
		<g clip-path="url(#frame-clip-85984686-2f90-8058-8002-2e07d51c2821-rumext-id-1)">
			<clipPath class="frame-clip-def frame-clip" id="frame-clip-85984686-2f90-8058-8002-2e07d51c2821-rumext-id-1">
				<rect rx="0" ry="0" x="0" y="0" width="32" height="32" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/>
			</clipPath>
			<g class="fills" id="fills-85984686-2f90-8058-8002-2e07d51c2821">
				<rect rx="0" ry="0" x="0" y="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="32" height="32" class="frame-background"/>
			</g>
			<g class="frame-children">
				<g id="shape-85984686-2f90-8058-8002-2e07dfed229c">
					<g class="fills" id="fills-85984686-2f90-8058-8002-2e07dfed229c">
						<rect rx="0" ry="0" x="15" y="4" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="2" height="24" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/>
					</g>
				</g>
				<g id="shape-85984686-2f90-8058-8002-2e0a188cc31c">
					<g class="fills" id="fills-85984686-2f90-8058-8002-2e0a188cc31c">
						<rect rx="0" ry="0" x="4" y="15" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="24" height="2" style="fill: rgb(0, 0, 0); fill-opacity: 1;"/>
					</g>
				</g>
			</g>
		</g>
	</g>
</svg>

Here is what I would expect (a lot simpler):

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <rect width="2" height="24" x="15" y="4" fill="#000"/>
  <rect width="24" height="2" x="4" y="15" fill="#000"/>
</svg>
  • I would also love to have an SVG export settings panel to control the code output, a bit like SVGOMG.

Flex Layout

  • when you add Flex Layout on an already existing Group, it should keep the same layer name, not automatically renaming it “Board”.
  • it also should try to guess to correct gap value (column or row) if items or properly aligned and evenly spaced.

Assets & Palettes

  • the Colors and Fonts Palettes (in the bottom) should group and sort colors and text styles the same way it does in the Assets. For exemple, if I have a blue/500, blue/600 and blue/700 colors or lg/400, lg/700 fonts, I expect to have it grouped by blue and lg and then sorted alphabetically by their name.
  • I would like to be able to reorder Assets groups manually by drag and drop

That’s it for the moment :slight_smile:
Congratulations to the whole team, keep the good work!

9 Likes