figma emoji

Posts tagged with :figma:

Kieran
@Kieran2
https://scrapbook-into-the-redwoods.s3.amazonaws.com/81d47aaf-a9af-4ac0-8514-430fe8b63540-28395.pnghttps://imgutil.s3.us-east-2.amazonaws.com/9e0c726dbf983e2b5e5bc7311c665acbab26f2d45161347c2493bf0550201e2a/12a18225-52d0-4b02-81d2-6fb1017f2623.png
phaedra
@phaedra0
day 3 of #10-days-in-public (ignore how i knocked out at like 7pm yesterday and forgot day 2...) currently designing the layout for my about me! i also added stars to the home page (really leaning into slack bio rn) and im likely gonna work on this into the night, just tryna get the post in before getting back to work ^_^
https://scrapbook-into-the-redwoods.s3.amazonaws.com/3695defd-b3f1-4de3-8533-1fcec3309183-image.png
wom emoji
figma emoji
10daysinpublic emoji
savina
@savina0
day 1 of #10-days-in-public! got to do some research on what i should use to build my calendar app (never built an app before lol) and designed some of the UI in figma!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/1f57dbd4-e984-4f03-a01a-9e9a751666a1-screenshot_2024-02-15_at_22.00.25.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/0d1d76b3-0a0d-4b93-bb9a-33997375cfe6-welcome_page.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/c8c02399-896a-486a-93d4-5fe219da5762-log_in_page.png
10daysinpublic emoji
wom emoji
figma emoji
NikosTsilas-U04N415FE4T
@NikosTsilas-U04N415FE4T0
Day 1 of #10-days-in-public! I started my website (micro-lessons). I prepared a Figma file and I also did the basic HTML and css (linking of files, nav-bar, and some text).
https://scrapbook-into-the-redwoods.s3.amazonaws.com/6e155c72-3662-4853-b3bb-b10b2fae3185-day_1.png
phaedra
@phaedra0
phaedraverse v3 is in the works! this time its in 3d (but its hard to portray 3d stuff in figma :p)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/2caf4f6e-260d-4c78-908b-aeea5a7f09cf-img_0676.jpg
Malycia
@Malycia2
Figma implementation of my notes from yesterday :)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/c25dbf02-7109-4bcd-aba7-a71213e444fb-screenshot_2024-01-16_180025.png
figma emoji
sahitid
@sahitid0
:forsyth-hacks-label: forsyth hacks (#forsyth-hacks) happened on November 18th, 2023 and was an overall success! at a point we had around 60 attendees and overall had an amazing time with our theme ⚡ (electricity) as well as workshops ranging from @ajs2’s jams to a mini UI design competition. and finally, the hours of food, coding, new friends, and projects (everything from a storm tracker app to a platformer game made w flow!) personal highlights of the event for me was probably the conversations i had with new people :heart_hands: the whole day, the chance to mentor a group into creating their entire project - from not having an idea, to developing and shipping it 🚢, lightning talks during lunch (like the one about jamstack by @davidm) 🎤, presenting an APIs workshop :postman:, the amazing swag we were able to handout (including string bags, polaroids :tw_camera_with_flash:, & stickers), and of course the presentations at the end! i want to give a huge thank you and shoutout to the following: • @ChristianDutton-U04E0LL16MA right hand man all the way and helped make my website design a lovely reality. (can't wait for 3.0) • @RyanDu-U04QM0MH6TV for the fresh new perspective and ideas for the event & an awesome workshop on how to not make crappy UI design (as well as the mini:figma:competition afterward) • dj! for the most amazing design and logo for the event :forsyth-hacks-2-bulb:. (or "sick sticker" as sam poder himself deemed worthy) • everyone who attended! we had over triple the amount of projects than last year and over 80 registered by the day of! • and ofc everyone at hack club :hackclub-party: who cheered me on all the way (and :bank-hackclub-dark: ofc hcb grant- this event would not have been possible without this :money-printer:, and from the bottom of my heart i am very grateful :blobheart: ). ◦ i had an amazing conversation with @theamazing0 in the middle of the day about how special hack club was to me and how he's in the process of discovering this love for the community as i did a year ago. ▪︎ this spread of love would not be possible if not for the support of more hackathons and more clubs around the world! 📷 full photo album: photos.app.goo.gl/RdvvgMmpD3rpioNc6 :githubparrot: hackathon website source code: github.com/SFHSHackClub/forsyth-hacks-v2-site
https://scrapbook-into-the-redwoods.s3.amazonaws.com/0fc712f0-05cc-411d-a2de-6793f056a2b0-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/5a925c33-5113-49a6-965d-fbce54ff0a38-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/11b3e1f4-6e24-4ecc-8bc1-cfc66b23978a-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/fc345924-8000-4c8f-bfe8-737e6271af81-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/65422c80-ec94-4c59-9973-0a840c296cc8-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/ae43eab0-98e7-4ddb-8c2d-1d68f2c1cb95-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/f6ee376f-a0db-4f73-bf69-3f3296a4c2f1-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/ed9e42d0-b168-44d5-b555-fa1419201080-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/2528f751-a3da-4aad-b7cd-e5caed3a1d57-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/614a5d50-c505-4fbc-a3fa-175786b08cd4-image.png
Malycia
@Malycia2
Decided to re-create the Figma logo(s) in Figma :)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/3ba1de66-8765-455f-ae00-ee0c96261a1d-screenshot_2023-11-13_113620.png
ligma emoji
figma emoji
Malycia
@Malycia2
Finished events section + created prototype for desktop and mobile :)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/586d9f09-e856-4d50-a04b-1f671d6319ae-screenshot_2023-10-24_220335.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/f1c506b2-9363-468d-a73c-a5d16b8844ce-screenshot_2023-10-24_220356.png
figma emoji
Sean
@Sean0
I gave up with my figma file for my docs rewrite, and have now decided to go to what I call "Iterative Build and Design" (basically, building and designing at the same time). I shopped around for cool looking UI libraries and eventually settled on shadcn/ui I then proceeded to implement part of my navigation bar. Go Gord! :gord:
https://scrapbook-into-the-redwoods.s3.amazonaws.com/dd5ef75a-37a9-42b3-8191-765a2773953c-image.png
figma emoji
cooll-thumbs emoji
sprig-dino emoji
Malycia
@Malycia2
Created a combined prototype of "home" and "about us" (view for desktop, mobile) + created event registration popups + refined events flow chart :)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/4cba16db-7de3-4c09-adce-9a13829cd40f-events-flow-chart.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/bf949d8e-d98c-4045-8c96-d11a65ef4b14-events-mobile.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/432b156f-a52a-407c-8a25-ed0820023ad3-events-desktop.png
figma emoji
Sean
@Sean0
School has been hectic recently, Anyway I finally got time to work on a long overdue project (Moving my docs from sean.cyou/docs to their own subdomain) Here are some rough Figma designs 🙂
https://scrapbook-into-the-redwoods.s3.amazonaws.com/d5c1e8a2-67c2-4c05-94c8-5cdaf467c5c4-main_docs_view.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/22cee762-4bcf-4415-bbe3-e25c9f6057a2-class_view.png
figma emoji
Malycia
@Malycia2
https://scrapbook-into-the-redwoods.s3.amazonaws.com/70bf78e8-164d-4279-b363-f0dcb4b4dae9-screenshot_2023-10-07_171613.png
figma emoji
msw
@msw0
stayed up a little late tonight working on some fun art in figma! been a while since I got to doodle with design and this was fun to go through old HC designs
https://scrapbook-into-the-redwoods.s3.amazonaws.com/d7813c0d-d1ea-4ed7-ae88-e2886f52fb07-screenshot_2023-10-02_at_22.46.07.png
Malycia
@Malycia2
Finished the wireframe + learned some new shortcuts in Figma! Next up: creating the UI kit :)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/c2bf9b91-8ffc-4318-87b2-b7be969e2665-9-26-scrapbook.png
figma emoji
ThomasStubblefield
@ThomasStubblefield0
added gift to topbar will some more progress. considering a modal for the share menu. steps to implement: 1. Make a design in Figma 2. Implement base functionality in code (perhaps through a modal or a pop-up)
https://scrapbook-into-the-redwoods.s3.amazonaws.com/3c3692a7-92a3-40d1-83b7-a9da4ba83ae4-screenshot_2023-09-19_at_8.40.36_pm.png
figma emoji
summer-of-making emoji
goose-honk-technologist emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 221 today i learnt the basics of UI designing and figma, trying to work out a proper prototype for n&w s4 designing interfaces is not as simple as i thought it would be :scared-hamster:
https://scrapbook-into-the-redwoods.s3.amazonaws.com/662db50e-b3f5-4f83-84d1-c84760d4eb65-image.png
figma emoji
sam
@sam0
Was messing around on Figma :figma: This is a cool sticker design ;p
https://scrapbook-into-the-redwoods.s3.amazonaws.com/47451a54-d85c-4443-872c-e112775d5f5b-road_display.png
cooll-dino emoji
summer-of-making emoji
figma emoji
sonicx180
@sonicx1800
Learning figma!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/c3a71301-b4a7-4e6a-9bf2-d943ac9c92ca-image.png
spring-of-making emoji
figma emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 12 daily figma, created a fun Home Screen for Trivia Travel just a fun game idea I had Gpt come up with, where you answer questions based on where your traveling. Based the UI around the Home Screen for trivia crack
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 10 of Daily Figma
figma emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 9 of Figma, I ran out of time to finish adding a parallax scroll but will try another time
spring-of-making emoji
ultrafastparrot emoji
figma emoji
pig-happy-jumping emoji
blob_hype emoji
blobhypedance emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 8 Daily Figma, Made a tribute to one of my favorite artists "Nujabes" Had a lot of fun on this one
spring-of-making emoji
figma emoji
blob_hype emoji
pig-happy-jumping emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
daily 30 min figma - day 7 - recently bought a new wide monitor and hopefully when i set it up it will look similar to this
https://scrapbook-into-the-redwoods.s3.amazonaws.com/bf9fd27b-0490-4d80-ab75-c1bf1bf3bb4f-image.png
figma emoji
spring-of-making emoji
Marios
@Marios0
It is FIGMA :figma: time!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/d07dfcf1-bf6f-47d4-a347-d135c8a76e49-image.png
figma emoji
spring-of-making emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 6 Figma, made a fun map
https://scrapbook-into-the-redwoods.s3.amazonaws.com/8963ce5c-960c-4215-a7c1-ada8e122ae89-image.png
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 5 of Figma, trying to learn more shapes
https://scrapbook-into-the-redwoods.s3.amazonaws.com/ed383a2c-cd7d-46c3-9e96-569780a2a655-image.png
figma emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 4, Daily 30 min Figma
scrappy-retry emoji
spring-of-making emoji
figma emoji
ThomasStubblefield
@ThomasStubblefield0
Redesigning Club Network for Mobile (in Figma atm) (dailyUI #4)
spring-of-making emoji
hackclub emoji
figma emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Day 3 Daily UI, Slowly learning Figma more
figma emoji
Sameer
@Sameer0
Doing random designs on Figma! Thinking I'll make something useful!:cooll-dino:
https://scrapbook-into-the-redwoods.s3.amazonaws.com/e2954297-c454-472a-8bf8-78057f22d597-img_20230506_230041.jpg
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
30 minutes a day of Figma, Day 2
blob_hype emoji
aussieparrot emoji
spring-of-making emoji
beatsaber emoji
catjam emoji
figma emoji
ImDeet-U045B4BQ2T0
@ImDeet-U045B4BQ2T01
Never used Figma before, going to start 30 minutes a day to try to learn more :ac--villager-roald:
partyparrot emoji
spring-of-making emoji
figma emoji
ShubhamPatil
@ShubhamPatil0
THE FILE IS 27MB EXPORTED FROM FIGMA
https://cloud-q2fr1qhje-hack-club-bot.vercel.app/0image.png
figma emoji
wom emoji
khalby786
@khalby7860
Behind-the-scenes of Epoch's Figma files cc @fayd
https://cloud-fcfmb1zt4-hack-club-bot.vercel.app/0image.png
figma emoji
epoch emoji
khalby786
@khalby7860
2 weeks to go till Epoch, and here's the story of this sticker. It all started a few months ago when genius minds from all over the world decided to brainstorm ideas for stickers they'd like at Epoch. We decided we wanted stickers with local Delhi references for advanced humour. And one such idea was to make a sticker that says Horn Ok Please, with Epoch-ish Hack Club elements in there. For context, Horn Ok Please is written on the back of trucks and lorries prominently seen in North India (in South India, we just have Sound Horn) to alert drivers of vehicles approaching from behind to sound their horns if they wish to overtake, in a country like India where honking is the primary source of communication between you and the other vehicles on the road. Part of the idea was also to make it look like Horn Ok Please was written on the back of a truck. I said, "OK OK LMAOOO WE'RE MAKING A STICKER OUT OF THIS". Now I'm not exactly the most productive and efficient person out there, I thrive on deadlines. I would occasionally just visit the Figma file, do random stuff and close my tabs while I did not have exams, homework or both. Normally I'd be able to complete stuff while "occasionally" visiting but this one was a bit hard. There weren't many reference images I could find, other than a photo directly from the Wikipedia page. I somehow also found the same image from a frontal angle which helped me trace out the letters and create "Horn Ok Please" as an SVG (my Figma Pen Tool skills are unrivalled, they talk about my curves). I also needed some random art related to India, like peacocks and the Taj Mahal, so what I did was take photos from unsplash.com, remove their background and run them through svgco.de (WHICH IS A GOD SENT BTW, credit to @OjasSomethin' for pointing this wonderful tool out) to give them a painted and vector-y look. I quickly combined them together but I realized it didn't have the same back-of-the-truck feeling and other people were quick to point that out. @deven then points out that I should do "Hack Ok Please" ("cos the H matches") and a few days later, there's a better reference picture of a Horn Ok Please in #design. In the thread where the image was posted, there was a lot of talk about getting the text bevels and shadows right along with identifying a similar font, which @sarthak narrowed down to a font called Syne, which fortunately was available on Google Fonts and I had it downloaded in no time. I decided to start with the background, and I wanted it to look realistic as possible. The question is, how do you make wooden planks in Figma? Sure, I could draw lines, and make it look realistic in a vector art sense but I wanted the right colour and texture. Well, what if I just placed a picture of wooden planks? That is exactly what I did, and it's called textures. A visit to textures.com gave me some quality seamless textures of wooden planks, and to make it pink I added a separate colour layer and decreased the opacity of the colour layer (I slightly colour-corrected the plank textures for it to be visible while still having the desired shade of pink). I also wanted the grooves (or gaps, whatever you call them) between the planks to affect the surrounding elements as if all the designed elements were actually painted on wooden planks. I did this by manually drawing out groove lines using the good ol' Pen Tool and giving it a slight drop shadow. The text. "Hack Ok Please!!". It needed bevels. Neither does Figma have an option for bevels nor could I find a plugin that gives bevels to text. Having lost all hope, I wandered around on YouTube hoping some Indian tech guy could help me out when an unexpected ally rose to the occasion: pixlr.com/e. They could make bevels out of text input and export it into PNG - that was more than enough for me. I dragged the export across the browser and into Figma and used a freemium plugin called Image Tracer which I thought had already been exhausted of its 5 free trials but apparently not. I got an SVG, got box shadows using a wonderful plugin called oblique and added that stuff on top of the wood. Only the decorations remained. I'm not gonna lie, I didn't have much creativity in this area. The corners of my reference image had floral-like colourful designs and I wasn't really sure about manually tracing it using the Pen Tool. The floral-like design reminded me of something I used to do with my mom when I was a kid, where basically I'd take an A4-sized paper, fold the paper in half, put drops of acrylic paint of different colours on the crease of the paper and fold it again to create something that looked like a butterfly. I thought that if I could do something like that with the right colours, I could take a good picture with my phone, remove its background, change its colours a bit and use it in my design. After begging my sister to help me (spoiler alert: she did not), I decided to steal my sister's paint (she's not on Hack Club, so she won't find out) and perform the sacred method of "squish painting". Long story short, it did not come out like I expected it to, it was too narrow and too green for my liking. (I wanted to take a picture of the result I got for the sake of this scrapbook post, but the paint stuck to each other and now I can't unfold the paper and tearing it doesn't seem like a good idea.) At this point, I decided to give up on everything else and trust the mighty Pen. By listening to the Doom OST theme song and Cocomelon songs on a loop, I traced out the basic lines of the floral designs and just randomly coloured them with every main colour I could find. By now, I was too lazy and uncreative to create my own assets, so I just screenshotted the flower thingy at the bottom of the reference image and then modified the colours a bit so that it matches the background colour of the sticker. Combine this with some smooth curves and spheres, and we have our decorations. To make it even more realistic, I got some grime and brush stroke textures from textures.com, removed their backgrounds, reduced the highlights a bit, increased the shadows a lot, halved the opacities and added the corners of the sticker. Oh and I almost forgot, there's a slight amount of noise at the very top to give it a slightly dirty/realistic feeling, using the Noise plugin. Adding noise textures to my designs is a reflex action at this point.
https://cloud-3t9z86ohm-hack-club-bot.vercel.app/00image.pnghttps://cloud-9395dltdx-hack-club-bot.vercel.app/0image.pnghttps://cloud-briizaflu-hack-club-bot.vercel.app/0image.pnghttps://cloud-6vyogbk1y-hack-club-bot.vercel.app/0image.pnghttps://cloud-a55d8l8px-hack-club-bot.vercel.app/0image.png
khalby786
@khalby7860
Well there goes my attempt to build svgco.de in Figma using it's underlying technologies but without WebAssembly and no Node, Figma plugins are a bit limiting. Anyways, time to go back and continue working on :epoch: stickers!
https://cloud-kx4qlqf4h-hack-club-bot.vercel.app/0image.png
figma emoji
toby
@toby0
hey everyone!! here's my update for day 10 of #10-days-in-public! today, i implemented the mockup i made in figma yesterday! later on, i'm going to try and make the emoji reactions interactive (maybe some confetti!) :D
https://cloud-b5bqllskf-hack-club-bot.vercel.app/0image.png
figma emoji
10daysinpublic emoji
toby
@toby0
here's my update for day 9 of #10-days-in-public!! today, i decided that grooovy's landing page needing a bit of a redo, so i decided to make a quick mockup in figma!
https://cloud-2zga41n1n-hack-club-bot.vercel.app/0grooovy.png
10daysinpublic emoji
figma emoji
adelly13
@adelly130
day 1/10 of #10-days-in-public! working on building my personal website using next.js and tailwind css! today, i set up the repo and put in a rough sketch of the homepage that i had designed on figma a few weeks prior! first time using next.js and tailwind css in combination, so still getting used to everything 😄
https://cloud-lsohetkqu-hack-club-bot.vercel.app/0image.png
figma emoji
10daysinpublic emoji
js emoji
tailwind emoji
nextjs emoji
reesericci
@reesericci0
I re-made the style guide for my group's magazine in Figma
https://cloud-dzk0jkpah-hack-club-bot.vercel.app/0image.png
figma emoji
adelly13
@adelly130
started actually coding my website with next.js and tailwind css after designing it in figma!
https://cloud-oi7z304b5-hack-club-bot.vercel.app/0image.png
adelly13
@adelly130
working on a rough design of my personal website in figma!
https://cloud-2c587p1pb-hack-club-bot.vercel.app/0image.png
figma emoji
KanishqKancharla-U041MC28L3B
@KanishqKancharla-U041MC28L3B0
taught myself figma animations hehe
reesericci
@reesericci0
Day 9/10 for #zachtoberfest! I worked on the mobile-version of the digital ticket today!! (that's just the figma)
https://cloud-j1xy15hjc-hack-club-bot.vercel.app/0image.png
Lucas
@Lucas0
Day 7 of #10-days-in-public For #10 days in public, I'm rebuilding my study group website. Today I didn't do much, it's a holiday in Brazil, I just researched a little more about Figma and added icons in the Brand Guide
https://cloud-q1r5cqb9o-hack-club-bot.vercel.app/0image.png
Andrew
@Andrew0
day 7 of #10-days-in-public i didnt get much done today sadly, i had a headache and had school work to catch up on. I did make more progress on the figma mockup for the dashboard. Lastly, I setup storybook.js.org for the dashboard app and thats pretty much it! Tomorrow I plan to tackle way more 🙂.
https://cloud-m2nng1ig2-hack-club-bot.vercel.app/0screen_shot_2022-10-11_at_8.55.25_pm.png
figma emoji
Lucas
@Lucas0
Day 6 of #10-days-in-public For #10-days-in-public, I'm rebuilding my study group website. Today I explored Figma (first time messing with Figma) and I'm trying to understand how to add Figma to websites
https://cloud-f9bhub0ge-hack-club-bot.vercel.app/0image.png