Just starting out: Great docs and an idea for a Figma UI kit

[Daniel “dux”]

Hi everyone, I've been working with Blockly as a designer since 2017 and have just recently jumped into the the software development side of things. The docs, examples and codelabs have made it a very rewarding experience.

There's a little snapshot attached of what I cobbled together after the first codelab .

I have a question and an idea for a project to contribute something back to Blockly.

One of the difficulties I have had working as a designer is developing storyboards and and design prototypes (XD, Figma etc) to design Blockly content and reference material for developers. The Blockly dev tools (block factory etc) are excellent, but I still need to work with design tools to design new contexts for using visual coding.

I was thinking it would be great if there was a Figma design kit with the standard Blockly code blocks to support design prototyping (e.g., a quick mockup of piping window.alert to a terminal emulator with the loop and text blocks).

Is there a way to export a block from the workspace as an SVG? I saw in the docs that I can use console.log to serialize the workspace to get JSON or XML definitions.

Is there a method available for rendering the JSON definitions and saving them to a file?

Thanks,

Daniel.

[Christopher Allen]

Hi Daniel,

Hi everyone, I've been working with Blockly as a designer since 2017 and have just recently jumped into the the software development side of things.

We're always glad to hear about how Blockly is part of people's path towards a career (or just a hobby) as a software developer; surprisingly often it is, as it is for you, not through merely using Blockly, but through wanting to build something with it.  ❤️

Is there a way to export a block from the workspace as an SVG?

Is there a method available for rendering the JSON definitions and saving them to a file?

The Blockly workspace consists of a number of separate <svg> elements tied together with other HTML elements (mainly <div>s), so exporting the whole thing as a single SVG file is slightly tricky.

If you're just after the individual SVG elements used to render the blocks, backgrounds, icons etc., you can obtain these pretty easily by using the Chrome developer tools:

1. Open the developer tools: (on macOS:) View > Developer > Developer Tools.
2. Click the mouse-pointer-in-square icon at the left of the developer tools menu bar to activate inspection mode.
3. Click on the element you are interested in in inspecting.
4. Notice that an HTML element has been selected.  This will be either the <svg …> element or some sub-element enclosed in an <svg> element.
5. Click on the enclosing <svg> element to select it (if it is not already selected).
6. Right-click and choose Copy > Copy element.  The clipboard will now contain the SVG for the item you inspected.

You'll also need to copy some of the pages's CSS in order for it to be styled correctly; I'm not sure of the details but I believe a colleague is intending to follow up this message with further instructions in this regard.

Another approach might be to try using a Chrome extension to export SVG from the page.  I tried a few different ones listed here, with varying levels of success.  Some didn't seem to do anything at all; the best one was SVG Screenshot although the results were still mediocre.

I notice there is a HTML to Figma extension that seems designed to capture the whole page (or any part of it) and export it as a file that can be imported into Figma.  It does indeed produce a .figma.json file, though I don't have Figma to see what the results look like.

Christopher

[Neil Fraser]

Here's the minimal SVG and CSS that will render blocks.  Just replace the 'g' tag with the 'g' tag of your block as copied from your browser's inspector:

<?xml version="1.0" encoding="UTF-8"?>

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">

<style>

.blocklyPathLight {

fill: none;

stroke-linecap: round;

stroke-width: 1;

}

.blocklyText {

cursor: default;

fill: #fff;

font-family: sans-serif;

font-size: 11pt;

}

.blocklyEditableText>text {

fill: #000;

}

.blocklyEditableText>rect {

fill: #fff;

fill-opacity: .6;

stroke: none;

}

</style>

<g data-id="1dCES5UXz1@J8]zZB,D." class="blocklyDraggable">

<path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d=" m 8,0 h 58.69718933105469 v 5 H 66.69718933105469 V 5 H 66.69718933105469 V 23 H 66.69718933105469 V 23 V 27 h -58.69718933105469 H 8 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>

<path class="blocklyPath" stroke="none" fill="#5b80a5" d=" m 8,0 h 58.69718933105469 v 5 H 66.69718933105469 V 5 H 66.69718933105469 V 23 H 66.69718933105469 V 23 V 27 h -58.69718933105469 H 8 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>

<path class="blocklyPathLight" stroke="#8ca6c0" d=" m 8,0 m 0.5,0.5 H 66.19718933105469 H 66.19718933105469 M 8.5,26.5 M 8.5,26.5 V 20 v -1.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5"></path>

<g class="blocklyEditableText" transform="translate(13,5)" style="cursor: default;">

<rect rx="4" ry="4" x="0" y="0" height="18" width="48.69718933105469" class="blocklyFieldRect blocklyDropdownRect" stroke="#8ca6c0" fill="transparent"></rect>

<text class="blocklyText blocklyDropdownText" text-anchor="start" x="5" y="14">true<tspan style="fill: rgb(91, 128, 165);"> ▾</tspan></text>

<image style="display: none;"></image>

</g>

</g>

</svg>

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAN0w5eZEaLQ5REfar4yihdWtW6j_Z9dXgz1Me2gsXL4xj1%3DQbQ%40mail.gmail.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[Daniel “dux”]

Excellent, thanks for the feedback. I had tried some browser extensions in the past with little success.

The HTML to Figma extension is generally very good, but it reproduces a whole site and needs a bit of design linting to be workable. The code block SVGs are no better than other extensions.

 However I tried a new one with Edge called SVG export that worked really quite well.

Here's what it looks like in Figma: https://www.figma.com/file/NqmwxgkxIbNfIMwwGUOTfV/Untitled?node-id=1%3A1097&t=GnP0lyyIvaahVhmP-1

This is a good start for the project I have in mind.

I also found the screenshot.js script in the blockly library from Beka's post. The PNG image quality is excellent and I might be able to modify this to export a PNG and an SVG.

https://github.com/google/blockly/blob/master/tests/playgrounds/screenshot.js

Daniel.

[Daniel “dux”]

Brilliant, thanks Neil! I'll do some tinkering in VS Code.