Blog – Page 6 – Johan Ronsse

Thinking through the contour feature of Screenshot to Layout

December 9, 2023 - Posted in build-in-public figma-plugins screenshot-to-layout

Earlier this week I thought through the contour feature for Screenshot to Layout . This is a future feature, that essentially adds a second layer of output to the plugin, with the goal of visualizing clear shapes in the processed screenshot, so that the designer can use it as a reference point for further work.

Right now I am thinking through how this should work by doing various experiments and prototypes.

I’ve had the comment that my Figma plugin Screenshot to Layout is essentially “image to text”, and that is true for sure at this point in time.

Someone else asked me: is it your goal to convert a whole screenshot to its original design? The answer to that is no. The goal is to provide designers with the ultimate starting point from a screenshot that fits into their workflow.

The output of the Screenshot to Layout plugin should be a starting to point to continue whatever work you have to do. As a designer you will likely have a file with all kinds of attached text and colour styles as well as library components. It doesn’t make sense to try and recreate the actual layout. What makes sense is to provide a starting point that enables you to put the output into your design system faster.

So given that, let’s look at how the contour feature would ideally work. I tweeted this to ask the community what they think:

Given a screenshot such as this, what is the ideal output?

Text only? Form controls visible? Buttons visible?

left: source – right: output pic.twitter.com/KH0cqVeoY8
— Johan Ronsse (@wolfr_2) December 2, 2023

This screenshot shows a dialog with 4 radio buttons and 3 actual buttons.

Personally, I think what would help me most is to see the contours of shapes that are very clear and isolated to understand a processed screenshot in a better way. In this example I would want to see the text (coming from the existing OCR features), but then from the contour feature the buttons, maybe the radio circles, but not much more.

As an another, if you have a screenshot of a contacts list, you might want to see grey circles in the place of the actual avatars. This way you know you have to replace those with your “avatar” design system component.

With this idea I mind I did some experimentation and wrote a script to recognize shapes in images. Specifically rectangular and circular shapes.

The current problem I have is that this is fairly fickle. You need some exact settings to not detect text (e.g. an “o” is also a circle); in UI design there’s often overlaid elements etc. So you find that it’s easy to get to a lot of unusable output like in the screenshot below (red strokes are circles and blue strokes are “rectangles”)

Unusable output 😅

One can wonder in general how much can the computer “see” and how much has to be determined by the designer? The “seeing” part could potentially be enhanced by a custom machine learning model.

Another experiment I did involved testing Microsoft’s Cognitive Services for the use case of recognising shapes, but I saw fairly quickly that this probably won’t help me.

Microsoft Cognitive Services – Foreground matting output

Another thing I looked into was segmentation and simplification. I think there might be something there for parts of the script, but I would have to find out where exactly it would help.

All in all there is still lots of work to determine how to move this feature forward.

I thought I would document these early steps in the evolution of this feature. I’ve always admired game development “devlogs” as well as for example Garret‘s blog posts about the early design decisions in Sifter. If I don’t document it now, I will surely forget.

This is complex computer science topic which is quite new for me. If anyone has their own ideas, or feel they can offer some help, feel free to reach out!
Planning for Screenshot to Layout 1.2

December 1, 2023 - Posted in build-in-public figma-plugins screenshot-to-layout
I am doing an investment in taking Screenshot to Layout to to the next level. I am working together with a few freelancers, each skilled in their own right, from making plugins for graphic design apps to advanced Javascript wizardry. Together we will improve the plugin.

Here’s a sketch of what I am to achieve with the new marketing website. Showing the idea in a nice GIF/short video/animation will be a challenge.

I want to write a bit of a “devlog” so I don’t forget what we are doing. Maybe it’s bad luck to talk about your plans, but OK. I am trying to build in public, and I found that that I didn’t write down enough while doing Obra Icons.

Right now we are in a planning phase where I am setting milestones and attaching min/max budgets to these milestones.
- First, we will lightly research alternate solutions. Is the Azure platform the perfect platform to keep building on? Should we use Tesseract? Or something else? I am pretty sure we will keep building on Azure, but it feels like the right time to assess – with the knowledge of the team at hand – what alternate solution can be found
  - A very senior programmer friend I’ve known for a looooong time will likely take a close look and use his 30+ years of programming experience to asses the above.
- Next, we will do 2 parallel tracks: the first track is to improve the algorithm behind STL. What I call the “algo” actually consists of 2 parts.
  - The first is what output is gained from “the machine”. Microsoft has a computer vision API, which, given an image with text, gives you back the coordinates of said text and information about what it detected as lines, words or paragraphs. The output of this is sometimes pretty good and sometimes has problems, so there is code that has to work around those problems.
    
    A reason to stay with Microsoft Azure is that Azure makes an update to their engine every 6 months. A quick test of the latest model (31-10-23) is promising.
  - The second part is the code that processes said text + coords information to the canvas. That code takes the raw information and tries to make sense of it. For example, if the bounding box of a line of text spans 20px between y1 and y2, and it’s only detected as a single line of text (no paragraphs), there is a likelihood that it should be rendered back to the canvas as 16px text. If it’s a paragraph, the calculation is a little bit different, because now we are also taking into account space between lines.
  - What kind of improvements can we make then? I will be the first to say that the code that I wrote myself is not very good. It works, and I am quite proud of it (its even in TypeScript!), but my hope is that a second look by a skilled development team will bring the code to a new level, also enhancing the OCR output. Right now, there are various small problems which I discuss in detail in this video. To spare you the watch, they are a) inaccurate positioning b) inaccurate text sizing of text layers that look similar in the source screenshots c) the recognition engine mistaking typical icon shapes as single characters (o, v, > etc) and d) the system not at all working with vertically oriented text (90 degree rotated text)
- The other track is about bringing the plugin to be a full inside-Figma experience. Right now, you have to register on an external website, and the process feels a bit disjointed. Ideally, you can trial the plugin without having to register at all, and then register if you use it a lot. I still want to keep that logic to track people’s usage and so my cloud bill does not go overboard.
- When we have combined these two tracks, we need to get the word out about the plugin to more people. The third track is a small marketing track which involves improving the visual design of the website, promoting the idea to our combined network and possibly the creation of a clear demo/marketing video.
This is the plan for a first phase of the plugin development, which is slated for release in +-3 months. In the meantime, you can already try out the current version of the plugin for free. It will be free for at least the next full year, so make sure to give it a try. It’s here on Figma community.
Screenshot to layout: landing page & usage update

November 19, 2023 - Posted in build-in-public figma-plugins screenshot-to-layout

I whipped up a quick landing page at https://screenshottolayout.com . It contains instructions on how to get started and a quick demo. It’s pretty ugly but will do the job for now I think.

I released the plugin for free earlier this week, hoping to get some feedback from Figma users. So far a few people seem to have tried it with no feedback coming in. I might have to wait for actual usage during the next working week.
Screenshot to Layout released for free

November 17, 2023 - Posted in build-in-public figma figma-plugins

You can use my Figma plugin Screenshot to Layout to generate editable text from a screenshot.

Select an image in Figma, run the plugin command “Process image”, and then see a Figma layout appear with editable text. You can see how it works in this video:

This plugin is extremely useful to quickly start working on a new design based on a screenshot.

You will need a free Screenshot to Layout account to use this plugin. Go to figma.obra.studio to get started. Then enter your API key in the plugin itself via the menu item Plugins > Screenshot to Layout > Enter API key*.

Pro tip: there is also a command you run called Process image so you only ever need to open the plugin once, to set your API key.

Note: this plugin might shut down at any time if it gets popular due to the processing cost of sending your image to Microsoft Azure for processing. We are releasing it for free to test if it vibes with an audience, before overthinking the aspect that it might get popular.

Privacy: Do note that your image gets sent to a server, and the actual image data can be retrieved from the logs. We don’t look at the image passing through this service, except for debugging reasons, but be careful with OCR’ing sensitive data.

*Note that these instructions are for an older version of Screenshot to Layout. For the newest, refer to the website.
Obra Icons indie report: how I launched – how it’s going. 2 sales, but powering on.

November 8, 2023 - Posted in bootstrap build-in-public obra-icons
I launched an indie project called Obra Icons on October 1st. This is a report of how it’s going.

The initial version took me about 7 days of work total + around 3 days of external freelancer’s work to work out the initial version.

What is it? It’s a set of 750+ vector icons, both in stroke and filled variants. The icons are ideal to use in user interface designs.

The website has all the icons downloadable for free, and there is also a free Svelte package.

The commercial aspect is a $15 license to get the Figma source files and original vectors.

I posted a version of this blog post on Indie Hackers which is a community for, well, indie hackers. The blog post was intended for that audience but I am putting it here to make sure it’s archived correctly.

After launch I decided to work full-time for my client(s) because of an influx of work. Given evenings and weekend work I managed to put around 3 more days into the project after launch myself, and paid for 2 more days of freelance work to improve the project over the past month.

For the initial iteration, I designed and developed the website, put the icon set up for sale at $20, developed the Svelte package with a freelance developer and launched it on Product Hunt (pretty poorly).

The design of the marketing website has since received several small copy and UX tweaks but more or less stayed the same.

For the initial iteration I dove into the setup to be able to sell the source files and quickly compared SendOwl, LemonSqueezy and Paddle with each other. In the end I chose SendOwl, which is connected to Stripe for now.

The platform works but I don’t love it though. The checkout page is very ugly and unclear. Since I only have 2 sales so far, I am not going to spend time finding the right merchant of record – but maybe I should since the checkout does not inspire confidence.

I released Obra Icons as Obra Icons 1.0.0 with 350 icons. I followed up over the past few weeks with 10 more releases, which goes fast since I count adding icons as a release.

Together with the team I grew the icon count from 350 (initial release) to 750+. I personally believe the icons are always getting better and we are reaching a great quality level. Although I’ve found the overall quality to be decreasing as we add more exotic icons. Let me tell you, it’s not that easy to draw a car at 24x24px.

I am also dogfooding my own work the whole time, using Obra icons in my design projects. When I discover flaws I go in and fix them.

One thing that really annoyed me was the search engine on the website icons page. In a previous project I made a manual keywords file to provide better search. A design goal of Obra Icons was to be able to update the set easily, so we explored automating things.

In the first iteration of Obra Icons we chose to generate the keywords by the OpenAI API using a custom prompt. This worked OK, but I quickly discovered that some icons have multiple meanings. For example, a typical refresh icon might as well pose as a redo icon. An icon that depicts sparkles is often used for “ai” these days.

We then improved the search engine adding additional logic to the scripts that parses the layer name in Figma (e.g. sparkles[ai]) into a manual keywords file which should get priority in the search.

The search is not perfect yet but it’s kind of fun how it can generate interesting results you wouldn’t think of yourself some times. We use Orama in the background.

Now, what about the commercial aspect? The project is sold directly and via Figma’s community. It has been sold twice directly via SendOwl, and not yet via Figma community.

What do I think after one month and “only” 2 sales? To be honest, it’s pretty thrilling to receive a sale from an indie project. I am happier with an indie sale than another billable hour on a client project.

I don’t track stats on the website so I have no idea how much is it visited, but the npm package has 7,238 weekly downloads. Not sure where all those are coming from, but that’s nice!

I created a discount code to give the set away to some friends. I am getting some nice and positive reactions. Since it’s a digital product, I can give it away for free to my designer friends, hoping they can help promote it – because I am sure anyone following me on X is already annoyed by my promotional tweets.

I have lots of ideas to improve, on the planning:
- Create a blog
- Create a React dev package (maybe Vue? Does anyone still use that?)
- Blog about the process
- Keep improving the set!
- Maybe some SEO blog posts (Christmas icons! Halloween icons!) but it’s not really my style to dirty up the internet
Right now I don’t really know where my priorities are with this project. I might move on and only maintain it lightly. It was supposed to be a small project after all.

I want to blog about it more and see if I can get any “design influencers” to promote the project.

I lowered the price to $15 and I am planning a sale in December for $10 to experiment with pricing. I think it’s good to do pricing experiments with light, small projects like this.

I am constantly thinking about how to improve things. First of all about which icons to the set and how to improve the drawings.

Talking about drawing quality, I went as far as starting the design of a first font, to be able to support icons with letters and numbers in them in a better way. I drew the characters of a full alphabet in uppercase and lowercase in Figma. I started to learn Glyphs, too. People on the Glyphs forum say Figma is not a great vector tool, and I agree it has shortcomings, but for this project I rather like it.

I know my way around Figma and its features such as autolayout combined with the scripting/plugin capabilities it has, I am able to work at a scale that I’ve never been able to work before.

To support that working at scale, I created a custom Obra devtools plugin to handle all kinds of manual actions to be able to maintain the consistency of the set while scaling it up with hundred of icons. Through this I got better at creating Figma plugins, which helps with another project I have, which I might revive soon.

It’s funny how working on this project is affecting my outside behavior. I take photos on the streets of icons I see in real-life and I’ve never looked more closely at any graphic design around me as before.

If you’ve made it this far, all feedback is welcome, and in exchange for your feedback you can get a discount code to download the set for free. Thank you for your attention!
Icon requests for Obra Icons

October 3, 2023 - Posted in obra-icons

Yesterday I launched Obra Icons 1.0.0. We are already actively working on the next version which will mostly contain more icons. But which icons are you missing? You can see full, searchable list of icons here. Hover over an icon to copy or download the SVG, or to copy the Svelte import.

If you have any requests, let us know, and we will consider it. Let us know at iconrequest@obra.studio or make a Github issue.
Bootstrapping update (4) – Obra Icons

October 1, 2023 - Posted in bootstrap build-in-public obra-icons
It’s the start of month four of my bootstrapping journey.

In June I stated I wanted to build something in public, build something that’s real and provides value, see if ideas get traction, and experiment or learn new things.

I have some doubts about the “build in public” part, since essentially you are sharing all your built-up IP for someone to take it. I’ve always been of the school of thought that even if people might take your work, they must also be able to do something with it and that requires certain skills. Increasingly those skills are becoming mainstream, and it’s becoming easier than ever to learn anything; thus maybe some IP protection is in order.

It kind of nags in the back of my mind that when building in public basically you are sharing all your business “secrets”. Des Traynor said it interestingly on X: “If you think you’re building “massively disruptive, AI first” product, it’s important to make sure you’re not just doing unpaid R&D for the incumbents.” I also feel like what most people are sharing in their “build in public” story is really only the pretty parts and not the doubts, the problems and the negative thoughts. I’ve started reading The messy middle, and that’s exactly what that book is about.

Anyway, I felt like I wanted to do a little project before jumping into the “big” one. Mostly because of timing – I am going on a holiday, and I want to have a clean break before and after the holiday.

The little project I’ve tackled over the past 2-3 weeks is Obra Icons

That bootstrapped project time I have is approx. 2-3 days a week now. This is new and a change of schedule: the months before I just did everything in my free time.

I am considering using that time in my schedule in the future to tackle my main idea (see this post), or alternatively to find a second consulting project. For the main idea I am looking for a (technical) co-founder because it’s not something to just do by myself.

An alternative scenario in my mind is that I can find a client in the US timezone with an exciting project. That’s why I now mention freelance availability on the general Obra website. Being in Mexico, we have overlapping timezones, I can easily travel to the US, and I’ve long wanted to work for a company with a US culture of getting it done.

Will the client come to me or will I have to do a deep search to find the ideal match? Will I find a business partner for BrandingKit? I am putting it out there – and I am starting networking and searching.

Back to Obra Icons – this has been an exciting project to work on. I feel like I managed to do a lot in not that much time:
- Design and develop the website at icons.obra.studio
- The setup to be able to sell the source files
- Improve the icons themselves with fellow designer Marina
- Work on the development of the Svelte package for Obra Icons: importing an icon in your project is as simple as writing
import { IconFish } from "obra-icons-svelte"
- See this REPL
- Work on the search aspect of the website, powered by AI to have a fuzzy search
- Iterate on the commercial and license aspect
The website is ready to use today, as well as the Svelte package.

The commercial aspect, which is about downloading the source files, is ~~almost ready~~ ready to go. For $20 you can download the source files, which should be super handy for any designer wanting to use and/or extend the icon set.

If you have any feedback about what’s already there I would love to hear it! E-mail me: letsbootstrap@johanronsse.be.

Looking a small bit ahead, I’m excited to visit South-Korea and China the next few weeks.

I’m looking into some reading – re-read The Innovator’s Dilemma, read The messy middle, and maybe play something new on my Nintendo Switch. If you have reading or gaming tips, be sure to let me know.

Over and out!
Bootstrapping update (3)

September 16, 2023 - Posted in bootstrap build-in-public

Wednesday I had a day to work on my bootstrapped projects.

First up I had a meeting about Obra Icons with a fellow designer. This is an initiative to create an icon set that is basically an upgrade to Mono Icons.

I spent the rest of the morning investigating some of the design decisions behind the icon set. One of the goals is to be able to export straight from the Figma file, even generate the docs site and corresponding dev packages.

The reasoning behind this is that when it’s easy to update the set, it can grow indefinitely, and always become a bigger set over the years (as needs for more icons arise).

Another goal is to have a beautiful set, that matches with common UI patternsm, so I am studying all kinds of design details to make sure the base decisions of the set make sense.

In the afternoon I had a technical assessment meeting about Brandingkit, my brand portal project. With a technical analyst and developer I went through the ideas and checked how they can be built.

Friday I also had a day to work on my bootstrapped projects.

First up I needed to do some organizing and created a github org for Obra.

The thing is that there are multiple initiatives (Screenshot to Layout, Obra Icons and Brandingkit), next to client projects, andI want to organize those properly, either in code or in design.

Good organization is necessary. So far the repos had been living on my personal Github account and some of the structures, especially around monorepos became a bit unclear.

After this housekeeping I used Bike to think about where I am with those different initiatives and structure my thoughts. I’ve been trying this little app. I don’t yet know where it falls between using a reminders/todo app and streamlining your thoughts in some kind of mindmapping software. But the interactions are super well done and it’s interesting to follow the evolution of it, so I’m along for the ride.

The main thing I am working on is a brand portal project. I talked about this in the previous post.

I had a marketing site design lying around for it, and I decided to test some no-code tooling.

Design for the marketing site in Figma

I found a workflow that makes sense to me, which is a Figma to Framer export, and then fine tuning in Framer. As I get more used to Framer, I might want to start in Framer directly.

The result after a few hours of work was a simple landing page at brandingkit.net.

Right before that, I tried to come up with a good product name. One that has an available domain, that people can understand, and that ultimately can become a good company name. I don’t love brandingkit but it does what it says on the box, and it’s 2 english words, and I managed to grab a relatively common .tld. So for now I went with that.

.net always reminds me of some 80s computer hacker’s first website but OK, it’s what I have ;)

I am pretty impressed by what Framer has managed to build. Basically the idea is to design with what is called “auto layout” in Figma in mind, for every part of what you do. You create frames, which are set up as flexible boxes, with content inside them. The content has styles that can react to different breakpoint. It’s as if Webflow had a baby with Figma, backed by some seriously impressive UX.

Do I mind that the code is not perfect? Yes. Is it OK for a one-off landing page that might change anytime? Also yes.

In general, my time is divided now between a main client project, Obra Icons and BrandingKit. The idea is to release Obra Icons when it’s ready, and to do more research and prototypes around BrandingKit.

Thank you for following my bootstrapping journey. Over… and out!

This is a post in my bootstrapping series. In June ’23 I started off with the idea to build a bootstrapped business on the side. You can read the initial post here.

If you have any feedback on one of the projects or ideas, I would love to hear it: e-mail letsbootstrap@johanronsse.be .
A new plan: brand portal

September 2, 2023 - Posted in bootstrap build-in-public
My new plan is to build a brand portal product.

What is a brand portal, you may ask?

It’s a place to document your brand assets, like a logo, colours and icons.

Why is this helpful?
- To keep your brand consistent – you can send people to the brand portal
- To provide a more direct way to get brand assets – nobody likes hunting for the right asset in Dropbox folders, or to get the right asset out of a PDF document
I created one for Doccle. And I think this could be an interesting product for more companies.

Right now I am
- doing user and competitive research
- developing small prototypes
- designing the first ideas for the user flow
I often post little nuggets on X and Mastodon. If you are interested in following my journey, follow me there or subscribe to this blog’s RSS feed.
Bootstrapping update (2)

August 29, 2023 - Posted in build-in-public figma
Today I want to talk about why it’s probably not that interesting to release Screenshot to Layout to the public, even though I put a lot of effort into it in the month of July.

I am not saying I won’t ever release it, but it needs to be part of a bigger plan. In the meantime if you are interested, I can drop you a copy to install locally and a testing API key.

Right before my holiday I delisted my plugin. It’s actually ready to be out there, it fully works and it’s an addition to my workflow.

But… I haven’t found a way to release it in a way that won’t give me maintenance work forever.

One of the indie goals is to make meaningful money off of a side project. Otherwise I might as well consult on UI design projects or scale up design work through an agency logic.

The problem with Figma plugins is that the market is really not that big.

If you look closely on the Figma marketplace, you can probably tell pretty fast there are relatively few plugins making money.

There are some UI kits listed where, if you divide the views/uses between 100 to get a sense of the revenue, you end up with something like €20-€400 which is frankly not worth the effort. I am not that interested in UI kits either. I don’t think they lead to good design.

Then there are some paid plugins that might have made a meaningful amount but they are few in between. I think some people made some money, but no one made meaningful money.

Let’s say I release the plugin for cheap and 100 people buy it. Now I have to support the plugin for a long time, even though the amount they paid was less than a coffee.

I could release it for free to promote something else, but if it gets popular I can’t start charging users, because
1. that’s not how the Figma plugin marketplace works. You can’t make a free plugin paid
2. It’s also not how I want to work. If it’s paid, there’s a promise of working software that provides value (and keeps providing value). If it’s free, there’s much less of a promise in there.
If 100 people buy it, and the amount was $20, it would still be less +-3 days of UI design consulting. For those 100 people, I would now have to:
- Maintain my Supabase user logic ($25/month although I could probably get away with the free plan then)
- Maintain an active Azure account that I have to monitor
- Deal with any issues that arise
- Provide other support, around invoicing (and the ways to provide support via Figma’s tools are pretty limited, can’t even refund!)
If 1000 people buy it, then we are talking about a meaningful amount of money – $20k. But now, first 15% gets cut off by Figma themselves, and then half by the Belgian tax collector. So in reality we are still talking about $8500 (+-€7800).

That’s nice money but very hypothetical, amd depending on a 1%-4% conversion rate of trial to paid user, I would need between 25 000 people interested and 100 000 people looking at it.

If you look at the these numbers, compare them to the most (free) popular plugins on Figma that reach +-200-500k users – you can tell the market just isn’t there.

Then there is the hassle of making a trial of a Figma plugin. You can’t really. Via their systems it’s either 24 hours refund on a paid plugin or 7 day trial but then you have to force people to pay monthly. This doesn’t vibe well with my ideas around payments.

Jan suggested a yearly fee which sounds like a good in-between between annoying SaaS pricing and not getting anything out of active users when supporting a product for years.

But to implement such a structure, I would need to set up Stripe, connect it to my Supabase accounts and basically invest more in setting up my own infrastructure. This way I have access to subscriptions, refunds… which would solve some of my woes, but not all of them.

Ideally, Figma will improve their payment APIs.

Right now you basically have to roll your own logic or (probably) prepare a world of support pain. Unless your plugin is really simple and you know it will always work reliably.

Furthermore, there is not that much plugin development activity. At least the community around plugins is rather silent on Discord in general. This worries me from a developer standpoint.

So that’s a long explanation why I am not going to go ahead with releasing my plugin for now.

But hey, I learned something. A lot actually. On to the next project!