7

Apply Sketch layer styles directly to any element on a website

over 6 years ago from , UX designer

Hey DN folks!

Few weeks ago I posted that I’m working on a new Mac app that allows designers to push pixels on any live website and I got awesome feedback from you! We’re still exploring different functionalities and I want to show what we have made last week – element styles.

Now you can define and reuse different element styles just like you do it in Sketch. As a matter of fact, with our Sketch plugin you can import Shared Layer Styles and Document Colors to Finch and apply them to any website’s elements right away. And by using our Media Editor you can even make those styles responsive ;)

What are your thoughts about this? Would you benefit from a feature like this?


The app is still in early stage, but if you want try out Finch, shoot me a message to janis@finch.io or leave your email address on the landing page – I send out invitations in small batches.

6 comments

  • Mattan IngramMattan Ingram, over 6 years ago

    I love this concept, but the primary issue I had playing around with Finch on the home page is that I can't just drag and drop absolutely/fixed positioned elements. I already can type in Top/Left/Right/Bottom values in the Inspect Panel, so Finch isn't really saving me any time there.

    Furthermore it appears Finch only supports pixel values? To go back to the absolutely positioned elements example, my website has them positioned with % and vw/vh units, so the translation to pixels doesn't really help particularly in regards to different screen sizes.

    I really, really like this app concept, but at least for my particular use cases it isn't saving me as much time as I would have hoped.

    0 points
    • Janis VegisJanis Vegis, over 6 years ago

      Mattan, thanks for the great feedback! Could you tell me more about your use case?

      By the way, to work with original values in Finch, just tick the show original units option under view in the menubar :)

      0 points
      • Mattan IngramMattan Ingram, over 6 years ago

        Sure thing! In the image below I have some absolutely positioned images layered on top of each other next to the text. These images are positioned and sized using % and vw/vh units, and it's a hassle to experiment with their positioning because I have to adjust the values in the Inspector Tool and then resize my screen, and then adjust, etc. What I really want to do is just grab them and drag them around and have it adjust the existing top/left or margin-right/margin-top values I already have.

        This extension "Positionable!" does this half way: https://chrome.google.com/webstore/detail/positionable/hcakmjkjjgaehnnflnelfngbhnppgnpp

        It lets me drag them around, but it only uses pixel values and isn't aware of my existing SASS/CSS as far as I can tell.

        Absolutely Positioned Images

        0 points
        • Janis VegisJanis Vegis, over 6 years ago

          Hmmm, this is an interesting use case. Currently Finch doesn't have the desired functionality, but this is definitely something we could implement. Again – thanks for the feedback, Mattan!

          0 points
    • Janis VegisJanis Vegis, over 6 years ago

      Did you try our Mac app or did you just play around with the demo on our landing page? Finch Mac app is the real deal – the editor on our website is just a demo that helps to communicate the basic idea of Finch :)

      0 points
      • Mattan IngramMattan Ingram, over 6 years ago

        Just the landing page demo. Sounds like the real app has more functionality. I submitted my email for a beta invite, looking forward to experimenting with it!

        0 points